/*!
 * Carousel - CSS
 * Migrated 2026-05-21 from WPCode snippet #7066.
 * Enqueue condition: global
 */

.accessories-carousel .brxe-woocommerce-products li.product {

    background-color: #fff;

    border-radius: 8px;

    box-shadow: 0 8px 20px rgba(0,0,0,.06);

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: transform .2s ease-in-out

}



.accessories-carousel .brxe-woocommerce-products li.product:hover {

    transform: translateY(-4px)

}



.accessories-carousel .brxe-woocommerce-products li.product img {

    max-width: 100%;

    height: auto;

    object-fit: cover;

    border-radius: 6px;

    margin-bottom: 16px

}



.accessories-carousel .brxe-woocommerce-products li.product h5 {

    font-size: 1.1rem;

    font-weight: 500;

    margin: 0 0 10px;

    color: #111;

    line-height: 1.4;

    min-height: 3em

}



.accessories-carousel .brxe-woocommerce-products li.product h5 a {

    color: inherit;

    text-decoration: none

}



.accessories-carousel .brxe-woocommerce-products li.product h5 a:hover {

    text-decoration: underline

}



.accessories-carousel .brxe-woocommerce-products li.product .woocommerce-Price-amount {

    font-size: 1.1rem;

    font-weight: 700;

    color: #000;

    margin-bottom: 12px;

    display: inline-block

}



.accessories-carousel .brxe-woocommerce-products li.product .add_to_cart_button,.accessories-carousel .brxe-woocommerce-products li.product .button.product_type_simple,.accessories-carousel .brxe-woocommerce-products li.product .button.product_type_variable {

    background-color: #f50;

    color: #fff;

    padding: 10px 18px;

    border: 0;

    border-radius: 5px;

    font-weight: 600;

    text-align: center;

    text-transform: uppercase;

    font-size: .9rem;

    cursor: pointer;

    transition: background .2s ease-in-out;

    width: 100%

}



.accessories-carousel .brxe-woocommerce-products li.product .add_to_cart_button:hover,.accessories-carousel .brxe-woocommerce-products li.product .button:hover {

    background-color: #c40;

    color: #fff

}



.accessories-carousel .brxe-woocommerce-products li.product.outofstock {

    opacity: .5;

    pointer-events: none

}



.accessories-carousel .brxe-woocommerce-products li.product.outofstock::after {

    content: "Sold Out";

    position: absolute;

    top: 12px;

    right: 12px;

    background-color: #c00;

    color: #fff;

    font-size: .75rem;

    font-weight: 700;

    padding: 6px 10px;

    border-radius: 4px

}



@media screen and (max-width:768px) {

    .accessories-carousel h3.brxe-heading {

        font-size: 1.5rem;

        margin-bottom: 24px

    }



    .accessories-carousel .brxe-woocommerce-products ul.products {

        grid-template-columns: repeat(auto-fill,minmax(180px,1fr));

        gap: 24px

    }



    .accessories-carousel .brxe-woocommerce-products li.product {

        padding: 15px

    }



    .accessories-carousel .brxe-woocommerce-products li.product h5 {

        font-size: 1rem

    }

}



/* =======================

   🎯 CONTAINER STRUCTURE

   ======================= */

#accessories-carousel-section,

.accessories-carousel {

  position: relative;

  width: 100%;

  overflow: hidden;

}



/* =======================

   📦 SCROLL WRAPPER + LIST

   ======================= */

.carousel-track-wrapper ul.products {

  display: flex;

  flex-wrap: nowrap;

  gap: 24px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  padding: 0 20px 20px 20px;

  margin: 0;

  scrollbar-width: none; /* Firefox */

}



.carousel-track-wrapper ul.products::-webkit-scrollbar {

  display: none; /* Chrome, Safari */

}



/* =======================

   🧱 PRODUCT CARD STYLING

   ======================= */

.carousel-track-wrapper li.product {

  flex: 0 0 auto;

  width: 250px;

  min-width: 250px;

  max-width: 250px;

  scroll-snap-align: start;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



/* =======================

   ↔️ ARROW STYLING

   ======================= */

.carousel-arrow-left,

.carousel-arrow-right {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  background-color: rgba(0, 0, 0, 0.5);

  color: white;

  padding: 10px 14px;

  border-radius: 50%;

  cursor: pointer;

  font-size: 18px;

  transition: background 0.2s ease;

}



.carousel-arrow-left:hover,

.carousel-arrow-right:hover {

  background-color: rgba(0, 0, 0, 0.7);

}



.carousel-arrow-left {

  left: 10px;

}



.carousel-arrow-right {

  right: 10px;

}



/* =======================

   🖥️ RESPONSIVE OPTIMIZATION

   ======================= */

@media (max-width: 768px) {

  .carousel-track-wrapper li.product {

    width: 200px;

    min-width: 200px;

  }



  .carousel-arrow-left,

  .carousel-arrow-right {

    font-size: 16px;

    padding: 8px 12px;

  }

}



/* === Section Padding Around Product Blocks === */

.accessories-gallery {

  padding-top: 60px;

  padding-bottom: 60px;

}



/* === Bottom Section Carousels === */

.accessories-carousel {

    max-width: 1200px;e

    margin: 0 auto;

    padding: 60px 20px;

    background-color: #fdfdfd

}



.accessories-carousel h3.brxe-heading {

    font-size: 2rem;

    font-weight: 600;

    text-align: center;

    margin-bottom: 40px;

    color: #222

}



#accessories-bottom-container .brxe-woocommerce-products ul.products {

    display: grid;

    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));

    gap: 32px;

    padding: 0;

    margin: 0;

    list-style: none

}