/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[5]!./src/components/sections/loop-product/index.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.mtk_products {
  margin: 0 -10px;
}

.mtk_products .mtk_product {
  width: 33.33%;
  background-color: rgba(249, 249, 249, 0);
  border-radius: var(--border-radius-sm);
  margin: 0 0 20px;
  padding: 10px;
  transition: var(--def-transition-300ms);
  will-change: background-color, box-shadow, opacity, transform;
  position: relative;
}

@media (max-width: 768px) {
  .mtk_products .mtk_product {
    width: 50%;
  }
}
@media (min-width: 897px) and (max-width: 1024px) {
  .mtk_products .mtk_product {
    width: 25%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product:hover {
    background-color: #f9f9f9;
    box-shadow: 0 1px 8px rgba(0, 8, 20, 0.15);
  }
  .mtk_products .mtk_product:hover .mtk_product__buy:not([disabled]) {
    width: 110px;
  }
  .mtk_products .mtk_product:hover .mtk_product__buy:not([disabled]) span {
    transform: translate(calc(50% - 5px), -50%);
  }
}
.mtk_products .mtk_product.invisible {
  opacity: 0;
  transform: scale(0.9);
}

.mtk_products .mtk_product__labels {
  padding: 10px 0 0 10px;
  pointer-events: none;
  transform: translate(10px, 10px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.mtk_products .mtk_product__labels li {
  display: inline-block;
  margin-bottom: 5px;
}

.mtk_products .mtk_product__labels span {
  display: inline-block;
  font-weight: var(--semi-bold);
  font-size: 10px;
  text-transform: uppercase;
  border-radius: var(--border-radius-sm) 0 var(--border-radius-sm) 0;
  padding: 5px 10px;
}

.mtk_products .mtk_product__labels span.new {
  color: var(--color-blue-charcoal);
  background-color: var(--color-amber);
  animation: keyframes-product-label 2.2s infinite;
}

.mtk_products .mtk_product__labels span.sale {
  color: var(--color-red-orange);
  background-color: rgba(255, 51, 51, 0.1);
}

.mtk_products .mtk_product__labels span.outofstock {
  color: var(--color-white);
  background-color: rgba(117, 117, 117, 0.6);
}

.mtk_products .mtk_product__labels span.onorder {
  color: var(--color-white);
  background-color: rgba(79, 76, 255, 0.6);
}

.mtk_products .mtk_product__labels span.bestseller {
  color: var(--color-midnight);
  background-color: rgba(52, 199, 89, 0.6);
  animation: keyframes-product-label 2s infinite;
}

.mtk_products .mtk_product__labels span.lowstock {
  color: var(--color-midnight);
  background-color: rgba(255, 55, 55, 0.6);
}

.mtk_products .mtk_product__thumbnail {
  display: block;
  aspect-ratio: 3/4;
  background-color: var(--loop-product-thumb-backdrop-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__thumbnail:hover img {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
.mtk_products .mtk_product__thumbnail__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--loop-product-thumb-backdrop-color);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--def-transition-300ms);
  position: absolute;
  top: 0;
  left: 0;
}

.mtk_products .mtk_product__thumbnail__loader.is_loading {
  pointer-events: all;
  opacity: 1;
  z-index: 2;
}

.mtk_products .mtk_product__thumbnail__loader.is_loading .spinner {
  animation-play-state: running;
}

.mtk_products .mtk_product__thumbnail__loader.is_loading ~ img {
  opacity: 0;
}

.mtk_products .mtk_product__thumbnail__loader .spinner {
  display: inline-block;
  width: 42px;
  aspect-ratio: 1;
  border: 4px solid var(--color-amber);
  border-bottom-color: var(--color-primary);
  border-radius: 50%;
  animation: keyframes-rotate 500ms linear infinite;
  animation-play-state: paused;
}

.mtk_products .mtk_product__thumbnail__image {
  object-position: center;
  mix-blend-mode: multiply;
  transition: var(--def-transition-300ms);
  will-change: opacity, transform;
}

.mtk_products .mtk_product__thumbnail__image.cover {
  object-fit: cover;
}

.mtk_products .mtk_product__thumbnail__image.contain {
  object-fit: contain;
}

.mtk_products .mtk_product__attr_colors, .mtk_products .mtk_product__attr_sizes {
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
}

.mtk_products .mtk_product__attr_colors > div, .mtk_products .mtk_product__attr_sizes > div {
  max-width: calc(100% - 48px);
  width: 100%;
  overflow: hidden;
}

.mtk_products .mtk_product__attr_colors input, .mtk_products .mtk_product__attr_sizes input {
  visibility: hidden;
  position: absolute;
  left: -9999px;
  z-index: -1;
}

.mtk_products .mtk_product__attr_colors input:checked ~ label::before, .mtk_products .mtk_product__attr_colors input[checked] ~ label::before, .mtk_products .mtk_product__attr_sizes input:checked ~ label::before, .mtk_products .mtk_product__attr_sizes input[checked] ~ label::before {
  border-color: #001d3d;
}

.mtk_products .mtk_product__attr_colors button, .mtk_products .mtk_product__attr_sizes button {
  width: 24px;
  aspect-ratio: 1;
  color: var(--color-midnight);
  text-align: center;
  align-content: center;
  padding: 0;
  transition: var(--def-transition-300ms);
  will-change: opacity;
}

.mtk_products .mtk_product__attr_colors button.swiper-button-disabled, .mtk_products .mtk_product__attr_sizes button.swiper-button-disabled {
  opacity: 0.5;
}

.mtk_products .mtk_product__attr_colors button i, .mtk_products .mtk_product__attr_sizes button i {
  font-size: 16px;
}

.mtk_products .mtk_product__attr_colors > div {
  border-radius: 100px;
  overflow: hidden;
}

.mtk_products .mtk_product__attr_colors input:checked ~ label::before, .mtk_products .mtk_product__attr_colors input[checked] ~ label::before {
  border-color: #001d3d;
}

.mtk_products .mtk_product__attr_colors label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__attr_colors label:hover::before {
    border-color: #001d3d;
  }
}
.mtk_products .mtk_product__attr_colors label::before {
  content: "";
  display: block;
  width: 26px;
  aspect-ratio: 1;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 29, 61, 0);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: var(--def-transition-300ms);
  will-change: border-color;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mtk_products .mtk_product__attr_colors .color__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: unset;
  padding: 5px 10px;
}

.mtk_products .mtk_product__attr_colors .color__bubble {
  display: flex;
  flex-flow: row nowrap;
  width: 26px;
  aspect-ratio: 1;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0);
  border-radius: 50%;
  overflow: hidden;
}

.mtk_products .mtk_product__attr_colors .color__bubble span {
  display: inline-block;
  height: 100%;
  position: relative;
  z-index: 2;
}

.mtk_products .mtk_product__attr_sizes input:checked ~ label, .mtk_products .mtk_product__attr_sizes input[checked] ~ label {
  color: var(--color-white);
  background-color: var(--color-midnight);
  border-color: var(--color-midnight);
}

.mtk_products .mtk_product__attr_sizes .size__slide {
  width: 32px;
  aspect-ratio: 1;
}

.mtk_products .mtk_product__attr_sizes label {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-weight: var(--medium);
  font-size: 14px;
  color: var(--color-midnight);
  text-align: center;
  align-content: center;
  border: 1px solid rgba(117, 117, 117, 0.2);
  border-radius: var(--border-radius-sm);
  transition: var(--def-transition-300ms);
  will-change: color, background-color, border-color;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__attr_sizes label:hover {
    color: var(--color-white);
    background-color: var(--color-midnight);
    border-color: var(--color-midnight);
  }
}
.mtk_products .mtk_product__brand {
  margin-bottom: 10px;
}

.mtk_products .mtk_product__brand span {
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--color-gray);
}

.mtk_products .mtk_product__title {
  color: var(--color-midnight);
  transition: color var(--def-transition-300ms);
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__title:hover {
    text-decoration: underline;
  }
}
.mtk_products .mtk_product__title h3 {
  font-weight: var(--medium);
  font-size: 14px;
  margin: 0;
}

.mtk_products .mtk_product__price {
  display: flex;
  flex-flow: column-reverse;
  font-weight: var(--bold);
  font-size: 18px;
  color: var(--color-midnight);
}

.mtk_products .mtk_product__price__sale:not(:empty) ~ span {
  font-weight: var(--regular);
  font-size: 14px;
  color: var(--color-boulder);
  text-decoration: line-through;
}

.mtk_products .mtk_product__buy {
  width: 42px;
  height: 42px;
  background-color: var(--color-amber);
  border-radius: 100px;
  padding: 10px;
  transition: var(--def-transition-300ms);
  will-change: width, background-color;
  overflow: hidden;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__buy:not([disabled]):hover {
    background-color: var(--color-midnight);
  }
  .mtk_products .mtk_product__buy:not([disabled]):hover * {
    color: var(--color-white);
  }
}
.mtk_products .mtk_product__buy:disabled, .mtk_products .mtk_product__buy[disabled] {
  display: none;
}

.mtk_products .mtk_product__buy * {
  pointer-events: none;
}

.mtk_products .mtk_product__buy i,
.mtk_products .mtk_product__buy span {
  transition: color var(--def-transition-300ms);
}

.mtk_products .mtk_product__buy i {
  font-size: 16px;
  color: var(--color-midnight);
  margin: 1px 0 0 1px;
}

.mtk_products .mtk_product__buy span {
  font-weight: var(--bold);
  font-size: 16px;
  margin-left: 15px;
  transform: translate(calc(50% + 5px), -50%);
  transition: var(--def-transition-300ms);
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 0;
}

.mtk_products .mtk_product__stock {
  font-weight: var(--medium);
  font-size: 12px;
  margin-top: 3px;
}

.mtk_products .mtk_product__stock span {
  color: var(--color-gray);
}

.mtk_products .mtk_product__stock span.instock {
  color: var(--color-fruit-salad);
}

.mtk_products .mtk_product__stock span.outofstock {
  color: var(--color-gray);
}

.mtk_products .mtk_product__stock span.onbackorder {
  font-weight: var(--bold);
  color: var(--color-amber);
}

.mtk_products .mtk_product__buy[disabled], .mtk_products .mtk_product__buy:disabled, .mtk_products .mtk_product__wishlist[disabled], .mtk_products .mtk_product__wishlist:disabled, .mtk_products .mtk_product__view[disabled], .mtk_products .mtk_product__view:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mtk_products .mtk_product__wishlist, .mtk_products .mtk_product__view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-white);
  box-shadow: 0 3px 6px rgba(0, 8, 20, 0.2);
  border-radius: 50%;
  padding: 0;
  transition: transform var(--def-transition-300ms);
  position: absolute;
  z-index: 10;
}

@media (max-width: 768px) {
  .mtk_products .mtk_product__wishlist, .mtk_products .mtk_product__view {
    width: 32px;
    height: 32px;
  }
}
.mtk_products .mtk_product__wishlist *, .mtk_products .mtk_product__view * {
  pointer-events: none;
  transition: var(--def-transition-300ms);
}

.mtk_products .mtk_product__wishlist i, .mtk_products .mtk_product__view i {
  font-size: 16px;
  color: var(--color-midnight);
  transition: var(--def-transition-300ms);
  will-change: color;
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .mtk_products .mtk_product__wishlist i, .mtk_products .mtk_product__view i {
    font-size: 14px;
  }
}
.mtk_products .mtk_product__wishlist {
  background-color: var(--color-white);
  transition: var(--def-transition-300ms);
  will-change: background-color, opacity, transform;
  transform: translate(-10px, 10px);
  top: 0;
  right: 0;
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__wishlist:hover:not([disabled]), .mtk_products .mtk_product__wishlist:hover:not(:disabled) {
    transform: translate(-10px, 10px) scale(1.2);
  }
}
.mtk_products .mtk_product__wishlist.in_wishlist {
  background-color: var(--color-hollywood-cerise);
}

.mtk_products .mtk_product__wishlist.in_wishlist i {
  color: var(--color-white);
}

.mtk_products .mtk_product__wishlist__auth {
  transform: translate(-20px, 20px);
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__wishlist__auth:hover:not([disabled]), .mtk_products .mtk_product__wishlist__auth:hover:not(:disabled) {
    transform: translate(-20px, 20px) scale(1.2);
  }
}
.mtk_products .mtk_product__view {
  transform: translate(-10px, -10px);
  transition: var(--def-transition-300ms);
  will-change: opacity;
  right: 0;
  bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__view:hover:not([disabled]), .mtk_products .mtk_product__view:hover:not(:disabled) {
    transform: translate(-10px, -10px) scale(1.2);
  }
}
.mtk_products .slide__attr__color {
  display: flex !important;
}

.mtk_products .slide__attr__color label {
  cursor: pointer;
}

.mtk_products .slide__attr__color input {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  left: -9999px;
}

.mtk_products .slide__attr__color input[checked] ~ .color__backface, .mtk_products .slide__attr__color input:checked ~ .color__backface {
  background-color: var(--color-selago);
}

.mtk_products .slide__attr__color input[checked] ~ .color__frontface, .mtk_products .slide__attr__color input:checked ~ .color__frontface {
  border-width: 1px;
  border-style: solid;
  border-color: #001d3d;
}

@keyframes keyframes-product-label {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes keyframes-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}