.product-slider-container {
    position: relative;
}

/* Image slider layout */
.product-image-slider {
    position: relative;
    display: block;
    overflow: hidden;
    max-width: 600px;
    margin: auto;
}

/* Slider item base */
.slider-item {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1
    width: 100%;
    height: auto !important;
}
/* link top */

.slider-item > a {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

/* Active image styling */
.slider-item.active {
    opacity: 1;
    position: relative;
}

/* Image fit */
.slider-item img {
    width: 100%;
    height: auto !important;
    object-fit: contain;
    display: block;
}

/* Prev/Next Buttons (Desktop only) */
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: #424242;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    z-index: 10;
    font-weight: 600;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.slider-prev i.fa-solid.fa-chevron-right,
.slider-next i.fa-solid.fa-chevron-left {
    opacity: 0 !important;
    padding: 10px !important;
}

.product-slider-container:hover .slider-prev i.fa-solid.fa-chevron-right,
.product-slider-container:hover .slider-prev i.fa-solid.fa-chevron-left {
    opacity: 1;
}

.slider-prev {
    left: 10px;
}

.slider-next {
    right: 10px;
}

/* Buttons hover */
.slider-prev:hover, .slider-next:hover,
.slider-next:focus, .slider-prev:focus {
    color: #000000;
    background-color: #cc336600;
    text-decoration: none;
    border: none !important;
    outline: none !important;
}

/* Dots below slider */
.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 12px;
}

.slider-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 4px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dot.active {
    background-color: #000;
}

/* Hide arrows on mobile */
@media (max-width: 768px) {
    .slider-prev,
    .slider-next {
        display: none !important;
    }
}

/*.product-slider-container {*/
/*    position: relative;*/
/*}*/
/**/
/*.product-image-slider {*/
/*   position: relative;*/
/*    display: flex;*/
/*    overflow: hidden;*/
/*    max-width: 600px;*/
/*    margin: auto;*/
/**/
/*}*/
/**/
/*.slider-item {*/
/*    position: absolute;*/
/*    opacity: 0;*/
/*    transition: opacity 0.5s ease-in-out;*/
/*    width: 100%;*/
/*    height: auto !important; /* Ensure images fit the aspect ratio */*/
/*}*/
/**/
/*.slider-item.active {*/
/*    opacity: 1;*/
/*    position: relative;*/
/*}*/
/**/
/*.slider-item img {*/
/*    width: 100%;*/
/*    height: auto !important; /* Stretch to fill the container while maintaining aspect ratio */*/
/*    object-fit: contain; /* Maintain image aspect ratio within the container */*/
/*    display: block;*/
/*}*/
/**/
/*.slider-prev, .slider-next {*/
/*    position: absolute;*/
/*    top: 10%;*/
/*    transform: translateY(-10%);*/
/*    background: none;*/
/*    color: #424242;*/
/*    border: none;*/
/*    background-color: transparent !important;*/
/*    cursor: pointer;*/
/*    font-size: 16px;*/
/*    padding: 0;*/
/*    z-index: 10;*/
/*    font-weight: 600;*/
/*    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;*/
/*}*/
/*.slider-prev i.fa-solid.fa-chevron-right,*/
/*.slider-next i.fa-solid.fa-chevron-left{*/
/*	  opacity: 0 !important; /* Initially hidden */*/
/*	padding: 10px !important;*/
/*}*/
/**/
/*.product-slider-container:hover .slider-prev i.fa-solid.fa-chevron-right,*/
/*.product-slider-container:hover .slider-prev i.fa-solid.fa-chevron-left{*/
/*    opacity: 1; /* Show arrows on hover */*/
/*}*/
/**/
/*.slider-prev {*/
/*    left: 10px;*/
/*}*/
/**/
/*.slider-next {*/
/*    right: 10px;*/
/*}*/
/**/
/*@media (max-width: 768px) {*/
/*    .slider-prev,*/
/*    .slider-next {*/
/*        opacity: 1; /* Always visible on mobile */*/
/*    }*/
/*}*/
/**/
/*.slider-prev:hover, .slider-next:hover, .slider-next:focus, .slider-prev:focus {*/
/*    color: #000000;*/
/*    background-color: #cc336600;*/
/*    text-decoration: none;*/
/*    border: none !important;*/
/*    outline: none !important;*/
/*}*/