/* -------------------------------------------------
*           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 ------------------- */
  @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;
	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 {
		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 {
	transform: none;
	background-image: var(--skeleton-gradiant);
	animation: var(--skeleton-animation);
	filter: unset;
	background-position: unset;
	background-size: 50% 100%;
	left: -200%;
	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%;
		transform: rotate(45deg);
		background-image: var(--skeleton-gradiant);
		background-size: 60% 100%;
		background-position: -100% 0;
		background-repeat: no-repeat;
		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 {
		order: initial;
	  }
	  .shimmer-single-product .entry-summary {
		min-height: 400px;
		overflow: hidden;
	  }
	  .shimmer-single-product > .row {
		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;
		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;
	animation: var(--skeleton-animation);
  }
  /* -------- END --------------------------------- */
  
    

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