/* -------------------------------------------------
*           CSS STRUCTURE
* --------------------------------------------------
 *
 *    Table of Contents:
 *
 *    01. Hide Elements on Load
 *    02. Grid View Skeleton
 *    03. List View Skeleton
 *    04. Product Page Skeleton
 *        1. Product Image Section
 *        2. Product Details Section
 *        3. Product Page Grid Skeleton 
 *
 *
 *
* -----------------------------------------------*/
/* ---------------- Animation ------------------- */
@-webkit-keyframes skeleton_loading_01 {
  to {
    background-position: 200% 0;
  }
}
@keyframes skeleton_loading_01 {
  to {
    background-position: 200% 0;
  }
}
/* -------- END --------------------------------- */
:root {
  --skeleton-gradient-color: #ebebeb;
  --skeleton-gradiant: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 30%,
    rgb(255 255 255 / 60%) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  --skeleton-grid-gradient: linear-gradient(
  	var(--skeleton-gradient-color) 100%,
  	transparent 0
    ),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0);
  --skeleton-list-gradient: linear-gradient(
  	var(--skeleton-gradient-color) 245px,
  	transparent 0
    ),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 20px, transparent 0);
  --shimmer-page-gradient-left: linear-gradient(
  	var(--skeleton-gradient-color) 100%,
  	transparent 0
    ),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0);
  --shimmer-page-gradient-right: linear-gradient(
  var(--skeleton-gradient-color) 25px,
  transparent 0
   ),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 18px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 1px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 25px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 35px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 25px, transparent 0);
  --skeleton-animation: skeleton_loading_01 1.5s infinite 0.2s;
  --skeleton-background-size: 64rem 100%;
}

/* -------- END --------------------------------- */
:root .color-switch-dark {
  --skeleton-gradient-color: #333333;
  --skeleton-gradiant: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 30%,
    rgb(24 24 24 / 60%) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  --skeleton-grid-gradient: linear-gradient(
  	var(--skeleton-gradient-color) 100%,
  	transparent 0
    ),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0);
  --skeleton-list-gradient: linear-gradient(
  	var(--skeleton-gradient-color) 245px,
  	transparent 0
    ),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 20px, transparent 0);
  --shimmer-page-gradient-left: linear-gradient(
  	var(--skeleton-gradient-color) 100%,
  	transparent 0
    ),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0),
    linear-gradient(var(--skeleton-gradient-color) 100%, transparent 0);
  --shimmer-page-gradient-right: linear-gradient(
  var(--skeleton-gradient-color) 25px,
  transparent 0
   ),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 18px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 1px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 25px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 35px, transparent 0),
   linear-gradient(var(--skeleton-gradient-color) 25px, transparent 0);
  --skeleton-animation: skeleton_loading_01 1.5s infinite 0.2s;
  --skeleton-background-size: 64rem 100%;
}

ul.products li.product.shimmer {
  overflow: hidden !important;
}

/* ----------------------------------------------------------
*  01. Hide Elements on Load
-------------------------------------------------------------- */
body:not(.elementor-editor-active) .products .shimmer div,
body:not(.elementor-editor-active) .products .shimmer span,
body:not(.elementor-editor-active) .products .shimmer a,
body:not(.elementor-editor-active) .products .shimmer p,
body:not(.elementor-editor-active) .products .shimmer h1,
body:not(.elementor-editor-active) .products .shimmer h2,
body:not(.elementor-editor-active) .products .shimmer h3 {
  display: none !important;
}

body:not(.elementor-editor-active) .products .shimmer {
  overflow: hidden !important;
}

/* -------- END --------------------------------- */
/* -------------------------------------------------------------
*   02. Grid View Skeleton
-------------------------------------------------------------- */
body:not(.elementor-editor-active) ul.products.grid-cols li.shimmer.product:before,
body:not(.elementor-editor-active) ul.products.grid-cols > li.shimmer:before,
body:not(.elementor-editor-active) .woocommerce-carousel .splide__track li.shimmer.product:before,
body:not(.elementor-editor-active) .woocommerce-carousel .splide__track > li.shimmer:before {
  content: "";
  display: block;
  padding-top: calc(110% + 120px);
  background-repeat: no-repeat;
  background-image: var(--skeleton-grid-gradient);
  background-size: 100% 68%, 50% 12px, 70% 16px, 50% 12px, 40% 16px;
  background-position: left 0, left calc(68% + 20px), left calc(68% + 44px), left calc(68% + 66px), left calc(68% + 92px);
  background-position-x: center, center, center, center, center;
  position: relative;
}

body:not(.elementor-editor-active) .products .shimmer:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background-image: var(--skeleton-gradiant);
  background-size: 60% 100%;
  background-position: -100% 0;
  background-repeat: no-repeat;
  -webkit-animation: var(--skeleton-animation);
          animation: var(--skeleton-animation);
}

/* -------- END --------------------------------- */
@media screen and (max-width: 767px) {
  body:not(.elementor-editor-active) ul.products.grid-cols li.shimmer.product:before,
  body:not(.elementor-editor-active) ul.products.grid-cols > li.shimmer:before,
  body:not(.elementor-editor-active) .woocommerce-carousel .splide__track li.shimmer.product:before,
  body:not(.elementor-editor-active) .woocommerce-carousel .splide__track > li.shimmer:before {
    padding-bottom: 20px;
  }
}
/* -------------------------------------------------------------
*   03. List View Skeleton
-------------------------------------------------------------- */
.products-list-view ~ .page-load-status ul.products {
  -ms-grid-columns: 245px;
  grid-template-columns: 245px;
}

body:not(.elementor-editor-active) .products-list-view ~ .page-load-status ul.products li.shimmer:before,
body:not(.elementor-editor-active) ul.products.grid-cols.products-list-view li.shimmer.product:before,
body:not(.elementor-editor-active) ul.products.grid-cols.products-list-view > li.shimmer:before,
body:not(.elementor-editor-active) .woocommerce-carousel .products-list-view .splide__track li.shimmer.product:before,
body:not(.elementor-editor-active) .woocommerce-carousel .products-list-view .splide__track > li.shimmer:before {
  padding-top: 245px;
  background-image: linear-gradient(var(--skeleton-gradient-color) 245px, transparent 0), linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0), linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0), linear-gradient(var(--skeleton-gradient-color) 12px, transparent 0), linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0), linear-gradient(var(--skeleton-gradient-color) 14px, transparent 0), linear-gradient(var(--skeleton-gradient-color) 16px, transparent 0), linear-gradient(var(--skeleton-gradient-color) 20px, transparent 0);
  background-size: 245px 100%, 150px 12px, 245px 16px, 150px 12px, 100% 14px, 100% 14px, 120px 16px, 200px 20px;
  background-position: left 0, 270px 20px, 270px 44px, 270px 70px, 270px 105px, 270px 130px, 270px 170px, 270px 205px;
}

body:not(.elementor-editor-active) .products-list-view li.shimmer:after {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  background-image: var(--skeleton-gradiant);
  -webkit-animation: var(--skeleton-animation);
          animation: var(--skeleton-animation);
  -webkit-filter: unset;
          filter: unset;
  background-position: unset;
  background-size: 50% 100%;
  left: -200%;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

/* -------- END --------------------------------- */
/* -------------------------------------------------------------
*   04. Product Page Skeleton
-------------------------------------------------------------- */
.shimmer-single-product .shimmer-single-product div,
.shimmer-single-product .shimmer-single-product h1,
.shimmer-single-product .shimmer-single-product h2,
.shimmer-single-product .shimmer-single-product p,
.shimmer-single-product .shimmer-single-product a,
.shimmer-single-product .shimmer-single-product span,
.shimmer-single-product .shimmer-single-product nav,
.shimmer-single-product .entry-summary div,
.shimmer-single-product .entry-summary h2,
.shimmer-single-product .entry-summary h3,
.shimmer-single-product .entry-summary h1,
.shimmer-single-product .entry-summary p,
.shimmer-single-product .entry-summary span,
.shimmer-single-product .entry-summary nav,
.shimmer-single-product span,
.shimmer-single-product p,
.shimmer-single-product .summary-before div,
.shimmer-single-product .woocommerce-product-gallery div,
.shimmer-single-product .woocommerce-product-gallery a,
.shimmer-single-product .entry-summary .cart {
  display: none !important;
}

.shimmer-single-product {
  overflow: hidden;
}

/* -------------- 1. Product Image Section ------------- */
.shimmer-single-product .entry-summary {
  overflow: hidden;
  position: relative;
}

.shimmer-single-product .entry-summary:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  background-image: var(--skeleton-gradiant);
  background-size: 60% 100%;
  background-position: -100% 0;
  background-repeat: no-repeat;
  -webkit-animation: skeleton_loading_01 1.5s infinite 0.2s;
          animation: skeleton_loading_01 1.5s infinite 0.2s;
}

.shimmer-single-product {
  position: relative;
  z-index: 1;
}

.shimmer-single-product .summary-before,
.shimmer-single-product .woocommerce-product-gallery {
  -webkit-box-ordinal-group: initial;
      -ms-flex-order: initial;
          order: initial;
}

.shimmer-single-product .entry-summary {
  min-height: 400px;
  overflow: hidden;
}

.shimmer-single-product > .row {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.shimmer-single-product > .row > div:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 15px;
  background-repeat: no-repeat;
}

/*-------- END --------------------------------- */
/* -------------- 2. Product Details Section ------------- */
.shimmer-single-product .summary-before,
.shimmer-single-product .woocommerce-product-gallery {
  height: 400px;
}

.shimmer-single-product .summary-before:before,
.shimmer-single-product .woocommerce-product-gallery:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 0;
  z-index: 90;
  right: 0;
  margin: -2px 16px;
  background-repeat: no-repeat;
  background-image: var(--shimmer-page-gradient-left);
  background-size: 100% calc(80% - 4px), calc(25% - 6px) calc(20% - 4px), calc(25% - 6px) calc(20% - 4px), calc(25% - 6px) calc(20% - 4px), calc(25% - 6px) calc(20% - 4px);
  background-position: center top, left bottom, 33.3333% bottom, 66.6666% bottom, right bottom;
}

.shimmer-single-product .woocommerce-product-gallery:before {
  margin: 0;
}

.shimmer-single-product .entry-summary:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0px;
  left: 0;
  z-index: 90;
  right: 0;
  margin: -2px 16px;
  background-image: var(--shimmer-page-gradient-right);
  background-position: center top, left bottom, 33.3333% bottom, 66.6666% bottom, right bottom;
  background-size: 100% calc(80% - 4px), calc(25% - 6px) calc(20% - 4px), calc(25% - 6px) calc(20% - 4px), calc(25% - 6px) calc(20% - 4px), calc(25% - 6px) calc(20% - 4px);
}

/*-------- END --------------------------------- */
/* -------------- 3. Product Page Grid Skeleton ------------- */
.shimmer-single-product .shimmer-single-product:before {
  content: "";
  display: block;
  padding-top: calc(110% + 110px);
  background-repeat: no-repeat;
  background-image: var(--skeleton-grid-gradient);
  background-size: 100% 68%, 50% 12px, 70% 16px, 50% 12px, 40% 16px;
  background-position: left 0, left calc(68% + 20px), left calc(68% + 44px), left calc(68% + 66px), left calc(68% + 92px);
  background-position-x: center, center, center, center, center;
}

.shimmer-single-product .shimmer-single-product:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background-image: var(--skeleton-gradiant);
  background-size: 60% 100%;
  background-position: -100% 0;
  background-repeat: no-repeat;
  -webkit-animation: var(--skeleton-animation);
          animation: var(--skeleton-animation);
}

/* -------- END --------------------------------- */
/* -------------------------------------------------------------
*  05. Hide Elements on Load categories
-------------------------------------------------------------- */
body:not(.elementor-editor-active) .products .shimmercat div,
body:not(.elementor-editor-active) .products .shimmercat span,
body:not(.elementor-editor-active) .products .shimmercat a,
body:not(.elementor-editor-active) .products .shimmercat p,
body:not(.elementor-editor-active) .products .shimmercat h1,
body:not(.elementor-editor-active) .products .shimmercat h2,
body:not(.elementor-editor-active) .products .shimmercat h3 {
  display: none !important;
}

body:not(.elementor-editor-active) .products .shimmercat {
  overflow: hidden;
}

/* -------- END --------------------------------- */
/* -------------------------------------------------------------
*   Category Grid View Skeleton
-------------------------------------------------------------- */
body:not(.elementor-editor-active) .products .shimmercat:before {
  content: "";
  display: block;
  padding-top: calc(70% + 75px);
  background-repeat: no-repeat;
  background-image: var(--skeleton-grid-gradient);
  background-size: 100% 70%, 65% 12px;
  background-position: left 0, left calc(70% + 20px);
  background-position-x: center, center;
}

body:not(.elementor-editor-active) .products .shimmercat:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background-image: var(--skeleton-gradiant);
  background-size: 60% 100%;
  background-position: -100% 0;
  background-repeat: no-repeat;
  -webkit-animation: var(--skeleton-animation);
          animation: var(--skeleton-animation);
}

/* -------- END --------------------------------- */
/* -------- END ------------------------------------------ */