/*
 Theme Name:   Shoptimizer Child
 Template:     shoptimizer
 Description:  A child theme for Shoptimizer.
 Author:       Your Name
 Version:      1.0
*/




/* Custom product categories carousel - HOMEPAGE */
.homepage-category-carousel-middle-wrapper {
            position: relative;
            z-index: 1; 
            overflow: visible; 
        }

        .homepage-category-carousel-middle-header {
            display: flex;
            justify-content: flex-start;
            padding: 0 10px 10px;
            position: relative;
            z-index: 10;
			margin-left: 230px;
        }

        .homepage-category-carousel-middle-arrows {
            display: flex;
            gap: 10px;
            z-index: 20;
            position: relative;
        }

        .homepage-category-carousel-middle-arrows .homepage-carousel-prev,
        .homepage-category-carousel-middle-arrows .homepage-carousel-next {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            color: black;
            border: 1px solid #ccc;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
            z-index: 20;
            position: relative;
        }

        .homepage-category-carousel-middle-arrows .homepage-carousel-prev:hover,
        .homepage-category-carousel-middle-arrows .homepage-carousel-next:hover {
            background: #f0f0f0;
        }
		
		.homepage-carousel-prev,
		.homepage-carousel-next {
    	 pointer-events: all;
		 }

        .homepage-category-carousel-middle {
            padding: 20px 0;
        }

        .homepage-category-carousel-middle .swiper-wrapper {
            align-items: stretch;
        }

        .homepage-category-carousel-middle .swiper-slide {
            width: 290px;
            height: 253px;
            background: #fff;
            box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.04);
            border-radius: 7px;
            position: relative;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        .category-card {
            display: block;
            text-decoration: none;
            color: inherit;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .category-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 180px;
            padding-top: 30px;
        }

        .category-inner img {
            width: 200px;
            height: auto;
            object-fit: contain;
        }

        .category-title {
            position: absolute;
            bottom: 12px;
            width: 100%;
            text-align: center;
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            color: #292929;
            margin-bottom: 20px;
        }

        .corner-arrow {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 16px;
            color: #5A5959;
            opacity: 0.6;
            transition: opacity 0.2s ease;
        }

        .category-card:hover .corner-arrow {
            opacity: 1;
        }
		
@media screen and (max-width: 767px) {
  .homepage-category-carousel-middle-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 40px 0;
  }

  .homepage-category-carousel-middle {
    width: 100%;
    position: relative;
  }

  .homepage-category-carousel-middle .swiper-wrapper {
    display: flex;
    align-items: center;
  }

  .homepage-category-carousel-middle .swiper-slide {
    width: 244px !important;
    height: 223px;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.04);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .category-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
  }

  .category-inner img {
    width: 100%;
    max-width: 156px;
    object-fit: contain;
  }

  .corner-arrow {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    color: #5A5959;
    opacity: 0.8;
  }

  .category-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    text-align: center;
    color: #292929;
    margin-top: 10px;
  }

  /* 🔧 FIXED: Full-width arrow container + centered positioning */
  .homepage-category-carousel-middle-header {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100vw;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
  }

  .homepage-carousel-prev,
  .homepage-carousel-next {
    width: 32px;
    height: 32px;
    border: 1px solid #292929;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    pointer-events: all;
    z-index: 20;
  }
}

/* Custom product categories carousel - HOMEPAGE (mobile) */

					@media screen and (max-width: 767px) {
					  .mobile-category-carousel-wrapper {
						width: 100%;
						position: relative;
						overflow: hidden;
						padding: 40px 0;
					  }

					  .swiper.mobile-category-carousel {
						width: 100%;
						box-sizing: border-box;
					  }

					  .swiper.mobile-category-carousel .swiper-slide {
						width: 100% !important; /* ✅ Full width slide */
						max-width: 100%;         /* Prevent half-slide peeking */
						margin: 0 auto;
						display: flex;
						justify-content: center;
					  }

					  .mobile-category-carousel-card {
						width: 244px;
						height: 223px;
						background: #fff;
						border-radius: 7px;
						box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.04);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;
						text-decoration: none;
						color: inherit;
					  }

					  .mobile-category-carousel-image {
						width: 156px;
						height: 140px;
						display: flex;
						justify-content: center;
						align-items: center;
					  }

					  .mobile-category-carousel-image img {
						width: 100%;
						height: auto;
						object-fit: contain;
					  }

					  .mobile-category-carousel-title {
						font-family: 'Poppins', sans-serif;
						font-size: 14px;
						margin-top: 10px;
						color: #292929;
						text-align: center;
					  }

					  .mobile-category-carousel-corner-arrow {
						position: absolute;
						top: 10px;
						right: 10px;
						font-size: 14px;
						opacity: 0.8;
						color: #5A5959;
					  }

					  .mobile-category-carousel-arrows {
						position: absolute;
						top: 50%;
						left: 0;
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 0 10px;
						transform: translateY(-50%);
						pointer-events: none;
						z-index: 10;
					  }

					  .mobile-category-carousel-prev,
					  .mobile-category-carousel-next {
						width: 32px;
						height: 32px;
						border-radius: 50%;
						border: 1px solid #292929;
						background: #fff;
						font-size: 16px;
						display: flex;
						justify-content: center;
						align-items: center;
						pointer-events: all;
						z-index: 20;
					  }
					}



/* === Preloader Overlay === */


#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

#preloader .preloader-inner {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: visible; /* allow spinner ring to show */

}
#preloader .preloader-logo {
  width: 50px;
  height: auto;
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
}

#preloader .preloader-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border: 4px solid rgba(113,204,152,0.3);
  border-top-color: #71cc98;
  border-radius: 50%;
  transform-origin: center center;
  animation: preloader-spin 1s linear infinite;
  z-index: 1;
}

@keyframes preloader-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

body.preloader-done #preloader {
  opacity: 0;
  pointer-events: none;
}