.bunny-bestsellers {
    width: 100%;
    background-color: #f9f9f9; /* bg-background */
    padding-top: 4rem; /* py-16 */
    padding-bottom: 4rem;
}

.bunny-bestsellers__container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {
    .bunny-bestsellers__container {
        padding-left: 64px;
        padding-right: 64px;
    }
}

.bunny-bestsellers__title {
    font-family: 'Inter', sans-serif;
    font-size: 1.875rem; /* text-3xl */
    line-height: 2.25rem;
    color: #1a1a1a; /* text-deep-black */
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    font-weight: 400;
}

@media (min-width: 768px) {
    .bunny-bestsellers__title {
        font-size: 2.25rem; /* text-4xl */
        line-height: 2.5rem;
    }
}

/* Swiper wrapper */
.bunny-bestsellers__swiper {
    position: relative;
    padding-bottom: 2rem; /* space for pagination if needed, or just visual balance */
}

/* Product Card */
.bunny-product-card {
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.bunny-product-card:hover {
    text-decoration: none;
}

.bunny-product-card__image-wrapper {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background-color: #f0f0f0; /* bg-surface-container */
}

.bunny-product-card__image-main,
.bunny-product-card__image-second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bunny-product-card__image-main {
    transition: opacity 500ms ease;
    opacity: 1;
}

.bunny-product-card:hover .bunny-product-card__image-main--has-second {
    opacity: 0;
}

.bunny-product-card__image-second {
    transition: opacity 500ms ease;
    opacity: 0;
}

.bunny-product-card:hover .bunny-product-card__image-second {
    opacity: 1;
}

.bunny-product-card__info {
    margin-top: 1rem;
}

.bunny-product-card__name {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem; /* text-sm -> project used body-md initially? let's use 14px */
    font-weight: 400;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: -0.025em; /* tracking-tight */
    margin: 0;
}

.bunny-product-card__price {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600; /* font-semibold */
    color: #1a1a1a;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* Swiper navigation buttons customization */
.bunny-bestsellers__prev,
.bunny-bestsellers__next {
    color: #1a1a1a !important;
    top: 40% !important; /* Move arrows up to center of images instead of whole container */
}

.bunny-bestsellers__prev::after,
.bunny-bestsellers__next::after {
    font-size: 1.5rem !important;
}

/* Hide arrows on mobile for cleaner look (swiper allows touch) */
@media (max-width: 767px) {
    .bunny-bestsellers__prev,
    .bunny-bestsellers__next {
        display: none !important;
    }
}