/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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: 25%;
  background-color: rgba(249, 249, 249, 0);
  border-radius: calc(var(--base-rounded) * 1.5);
  margin: 0 0 20px;
  padding: 10px 10px 15px;
  transition: var(--h);
  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__wishlist {
    transform: translate(-10px, 10px);
  }
  .mtk_products .mtk_product:hover .mtk_product__view {
    transform: translate(-10px, -10px);
  }
  .mtk_products .mtk_product:hover .mtk_product__buy:not([disabled]) {
    width: 100px;
  }
  .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: 11px;
  text-transform: uppercase;
  border-radius: var(--base-rounded) 0 var(--base-rounded) 0;
  padding: 5px 10px;
  animation: morph-and-wait 6s ease-in-out infinite;
}

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

.mtk_products .mtk_product__labels span.sale {
  color: var(--color-white);
  background-color: var(--color-bg-primary);
}

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

.mtk_products .mtk_product__labels span.onorder {
  color: var(--color-white);
  background-color: rgba(85, 96, 70, 0.6);
}

.mtk_products .mtk_product__labels span.bestseller {
  color: var(--color-bg-primary);
  background-color: rgba(85, 96, 70, 0.6);
  animation: keyframes-product-label 2s infinite;
}

.mtk_products .mtk_product__labels span.lowstock {
  color: var(--color-cinnabar-text);
  background-color: rgba(228, 56, 56, 0.6);
}

.mtk_products .mtk_product__thumbnail {
  display: block;
  aspect-ratio: 3/4;
  background-color: var(--loop-product-thumb-backdrop-color);
  border-radius: var(--base-rounded);
  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(--h);
  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(--h);
  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: opacity var(--h);
}

.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: var(--base-rounded);
  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: border-color var(--h);
  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(--base-rounded);
  transition: var(--h);
  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-text-muted);
  transition: color var(--h);
}

@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;
  color: var(--color-text-muted);
  margin: 0;
}

.mtk_products .mtk_product__short_description {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-boulder);
}

.mtk_products .mtk_product__short_description p {
  margin: 0;
}

.mtk_products .mtk_product__sku {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--color-boulder);
}

.mtk_products .mtk_product__sku span:empty {
  display: none;
}

.mtk_products .mtk_product__sku__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: -10px 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: color var(--h), opacity var(--h), visibility var(--h);
}

.mtk_products .mtk_product__sku__copy i {
  font-size: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .mtk_products .mtk_product__sku__copy:hover {
    color: var(--color-midnight);
  }
}
@media (hover: none) {
  .mtk_products .mtk_product__sku__copy {
    opacity: 1;
    visibility: visible;
  }
}
.mtk_products .mtk_product:hover .mtk_product__sku__copy,
.mtk_products .mtk_product__sku__copy:focus-visible {
  opacity: 1;
  visibility: visible;
}

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

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

.mtk_products .mtk_product__buy {
  width: 42px;
  height: 42px;
  color: var(--color-white);
  background-color: var(--color-bg-primary);
  border-radius: var(--base-rounded);
  padding: 10px;
  transition: var(--h);
  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-bg-primary-dark);
  }
  .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(--h);
}

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

.mtk_products .mtk_product__buy span {
  font-weight: var(--regular);
  font-size: 16px;
  margin-left: 15px;
  transform: translate(calc(50% + 5px), -50%);
  transition: transform var(--h);
  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-bg-primary);
}

.mtk_products .mtk_product__stock span.instock {
  color: var(--color-bg-primary);
}

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

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

.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: 32px;
  height: 32px;
  background-color: var(--color-white);
  box-shadow: 0 3px 6px rgba(85, 96, 70, 0.2);
  border-radius: 50%;
  padding: 0;
  transition: transform var(--h);
  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: color var(--h), opacity var(--h);
}

.mtk_products .mtk_product__wishlist i, .mtk_products .mtk_product__view i {
  font-size: 16px;
  color: var(--color-bg-primary);
  transition: color var(--h);
  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(--h);
  will-change: background-color, opacity, transform;
  transform: translate(25px, -25px);
  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-cinnabar);
}

.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(25px, 25px);
  transition: var(--h);
  will-change: opacity, transform;
  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);
  }
}
@keyframes morph-and-wait {
  0% {
    border-radius: var(--base-rounded) 0 var(--base-rounded) 0;
  }
  35% {
    border-radius: var(--base-rounded) 0 var(--base-rounded) 0;
  }
  50% {
    border-radius: 0 var(--base-rounded) 0 var(--base-rounded);
  }
  85% {
    border-radius: 0 var(--base-rounded) 0 var(--base-rounded);
  }
  100% {
    border-radius: var(--base-rounded) 0 var(--base-rounded) 0;
  }
}