/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  A child theme of Astra
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* You can add your custom CSS below */


/* CAROUSEL FOR PRODUCTS */

/* Make WooCommerce gallery thumbnails look like a horizontal carousel */
.flex-control-nav.flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;        /* Prevent wrapping to new lines */
    overflow-x: auto;         /* Enable horizontal scroll */
    scroll-behavior: smooth;  /* Smooth scrolling */
    gap: 8px;                 /* Space between thumbnails */
    padding-bottom: 8px;      /* Some padding for scrollbar space */
    margin-top: 10px;
  }
  
  .flex-control-nav.flex-control-thumbs li {
    flex: 0 0 auto;           /* Keep fixed width */
    width: 80px;              /* Thumbnail size */
    height: auto;
    list-style: none;
  }
  
  .flex-control-nav.flex-control-thumbs img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .flex-control-nav.flex-control-thumbs img:hover {
    transform: scale(1.05);
    opacity: 0.8;
  }
  
  /* Optional: hide scrollbar (Chrome/Safari/Edge) */
  .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    height: 6px;
  }
  .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }
  

  /* Optional arrows hint */
.flex-control-nav.flex-control-thumbs::before,
.flex-control-nav.flex-control-thumbs::after {
  content: '';
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.flex-control-nav.flex-control-thumbs::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
}

.flex-control-nav.flex-control-thumbs::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
}

.flex-control-nav.flex-control-thumbs {
    position: relative;
  }

  /* Carousel styling for WooCommerce thumbnails */
.thumbs-swiper {
    position: relative;
    width: 100%;
    margin-top: 10px;
  }
  
  .thumbs-swiper .swiper-slide {
    list-style: none;
    flex: 0 0 auto;
    width: 80px; /* adjust as needed */
     cursor: pointer;
  }
  
  .thumbs-swiper img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .thumbs-swiper img:hover {
    transform: scale(1.05);
    opacity: 0.85;
  }
  
  .thumbs-swiper .swiper-button-prev,
  .thumbs-swiper .swiper-button-next {
    color: #333;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  
  .thumbs-swiper .swiper-button-prev::after,
  .thumbs-swiper .swiper-button-next::after {
    font-size: 14px;
  }
  .flex-control-nav.flex-control-thumbs {
    display: none !important;
  }