/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/performance-loading.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/

/* =========================================================
   ROUTE LOADING / PERFORMANCE UX
   ========================================================= */

.kc-route-loading,
.kc-products-loading {
  padding-top: 36px;
  padding-bottom: 90px;
}

.kc-loading-hero,
.kc-loading-title,
.kc-loading-search,
.kc-loading-filter,
.kc-loading-card,
.kc-loading-product-card,
.kc-loading-product-image,
.kc-loading-product-line,
.kc-loading-product-price {
  background:
    linear-gradient(
      90deg,
      #eef3f0 25%,
      #f8faf9 45%,
      #eef3f0 65%
    );

  background-size: 200% 100%;

  animation:
    kc-loading-shimmer
    1.2s
    linear
    infinite;
}

.kc-loading-hero {
  height: 300px;
  border-radius: 24px;
}

.kc-loading-grid {
  margin-top: 24px;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  grid-gap: 14px;

  gap: 14px;
}

.kc-loading-card {
  height: 160px;
  border-radius: 18px;
}

.kc-loading-title {
  width: min(520px, 80%);
  height: 72px;
  border-radius: 14px;
}

.kc-loading-search {
  height: 58px;
  margin-top: 24px;
  border-radius: 15px;
}

.kc-loading-filter {
  height: 175px;
  margin-top: 18px;
  border-radius: 18px;
}

.kc-loading-products-grid {
  margin-top: 22px;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-gap: 18px;

  gap: 18px;
}

.kc-loading-product-card {
  min-height: 380px;
  padding: 14px;
  border-radius: 20px;
}

.kc-loading-product-image {
  height: 215px;
  border-radius: 14px;
}

.kc-loading-product-line {
  width: 65%;
  height: 14px;
  margin-top: 13px;
  border-radius: 999px;
}

.kc-loading-product-line.wide {
  width: 92%;
}

.kc-loading-product-price {
  width: 48%;
  height: 25px;
  margin-top: 20px;
  border-radius: 8px;
}

@keyframes kc-loading-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@media (max-width: 900px) {
  .kc-loading-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .kc-loading-products-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kc-loading-hero,
  .kc-loading-title,
  .kc-loading-search,
  .kc-loading-filter,
  .kc-loading-card,
  .kc-loading-product-card,
  .kc-loading-product-image,
  .kc-loading-product-line,
  .kc-loading-product-price {
    animation: none;
  }
}