/* --- Ultimate Product Carousel Styles --- */
.ultimate-product-carousel-wrapper {
    margin: 30px 0;
    position: relative;
}

.ultimate-product-carousel {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}

.ultimate-product-carousel.no-arrows {
    padding-left: 0;
    padding-right: 0;
}

.ultimate-product-slide {
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
}

.ultimate-product-link {
    display: block;
    text-decoration: none;
    color: #333;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ultimate-product-link:hover .ultimate-product-title {
    color: #6a3ab2;
}

.ultimate-product-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    margin-bottom: 15px;
    display: block;
}
.ultimate-product-image.woocommerce-placeholder {
     object-fit: contain;
     background-color: #f5f5f5;
}

.ultimate-product-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 10px 0;
    min-height: 42px;
    color: #333;
    flex-grow: 1;
    padding: 0 5px;
}

.ultimate-product-price {
    font-size: 16px;
    font-weight: bold;
    margin-top: auto;
    padding: 0 5px 10px 5px;
    line-height: 1.4;
}

.ultimate-product-price .price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ultimate-product-price del {
    color: #888;
    font-weight: normal;
    font-size: 0.9em;
    order: 1;
    line-height: 1;
}

.ultimate-product-price ins {
    text-decoration: none;
    color: #ff0000; /* Red sale price */
    font-weight: bold;
    order: 2;
    line-height: 1;
}
.ultimate-product-price ins .woocommerce-Price-amount.amount {
    color: #ff0000 !important; /* Red sale price */
}

.ultimate-product-price span.regular-price-carousel {
    display: block;
    color: #888;
    font-weight: normal;
    font-size: 0.9em;
    line-height: 1;
}
.ultimate-product-price span.regular-price-carousel del {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-decoration: line-through;
}
.ultimate-product-price span.regular-price-carousel del .woocommerce-Price-amount.amount {
    color: inherit;
}

/* Custom Sale Price Display (Generated by PHP Shortcode) */
/* ... other rules ... */

.ultimate-product-price span.sale-price-carousel {
    display: block;
    /* Color here sets the default for elements inside, like the '–' */
    color: #ff0000;
    font-weight: bold;
    line-height: 1;
}

/* Force nested Price Amount and Currency Symbol within sale-price-carousel to be RED */
.ultimate-product-price span.sale-price-carousel .woocommerce-Price-amount,
.ultimate-product-price span.sale-price-carousel .woocommerce-Price-currencySymbol {
    color: #ff0000 !important; /* Directly set to red and use !important */
}

/* --- Swiper Navigation & Pagination Styles --- */

/* Common Arrow Styles */
.upc-arrow {
    /* Swiper sets position: absolute for these buttons */
    width: 40px;
    height: 40px;
    background-color: #6a3ab2;
    color: #fff !important;
    border-radius: 0; /* Square */
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    /* MODIFIED: Position arrows higher up, closer to image vertical center */
    top: 40%; /* Adjust this percentage (e.g., 35% to 45%) as needed */
    transform: translateY(-50%); /* Vertically centers the arrow at the new 'top' position */
    /* margin-top: -20px; /* REMOVED - transform handles vertical centering now */
}
.upc-arrow::after {
    font-size: 18px;
    font-weight: bold;
    color: #fff !important;
}

.upc-arrow:hover {
    background-color: #502d8a;
}

/* Desktop Arrow Positioning (Outside Carousel) */
.upc-arrow.swiper-button-prev {
    left: -10px;
    right: auto;
}
.upc-arrow.swiper-button-next {
    right: -10px;
    left: auto;
}

/* Pagination Common Styles */
.upc-pagination {
    position: static;
    margin-top: 20px;
    text-align: center;
}

/* Pagination Bullets */
.upc-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: #ccc;
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 5px !important;
    transition: background-color 0.3s ease;
}
.upc-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #6a3ab2;
}

/* Pagination Fraction */
.upc-pagination.swiper-pagination-fraction {
    color: #333;
    font-size: 14px;
}

/* Pagination Progress Bar */
.upc-pagination.swiper-pagination-progressbar {
    background: #e0e0e0;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.upc-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #6a3ab2;
}


/* --- Mobile Specific Styles --- */
@media (max-width: 767px) {
    .ultimate-product-carousel:not(.no-arrows) {
        padding-left: 0;
        padding-right: 0;
    }

    .upc-arrow {
        width: 30px;
        height: 30px;
        /* top: 40%; and transform: translateY(-50%) are inherited from desktop.
           No need to repeat unless you want a DIFFERENT top % for mobile. */
        /* margin-top: -15px; /* REMOVED */
    }
    .upc-arrow::after {
        font-size: 14px;
    }

    .upc-arrow.swiper-button-prev {
        left: 5px !important;
        right: auto !important;
    }
    .upc-arrow.swiper-button-next {
        right: 5px !important;
        left: auto !important;
    }

    .ultimate-product-title {
        font-size: 14px;
        min-height: 36px;
    }
    .ultimate-product-price {
        font-size: 14px;
    }
}

/* --- Helper for when pagination is shown and arrows are NOT --- */
.ultimate-product-carousel-wrapper:has(.ultimate-product-carousel.no-arrows):has(.upc-pagination) {
     margin-bottom: 50px;
}
/* Fallback for older browsers might not be very effective here */
.ultimate-product-carousel.no-arrows + .upc-pagination {}