/*
 * Ahan Rooz product-type carousel redesign
 * Targets the existing BazarAhan widget markup only.
 * No taxonomy data or links are changed.
 */

.index-product-carousel-section {
    --ar-card-radius: 14px;
    --ar-card-shadow: 0 16px 34px rgba(10, 26, 38, .13);
    --ar-card-shadow-hover: 0 22px 46px rgba(10, 26, 38, .20);
    --ar-accent: #a91945;
}

.index-product-carousel-section .carousel-index-product .swiper-slide {
    height: auto;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 0 !important;
    margin-bottom: 34px !important;
    border-radius: var(--ar-card-radius);
    background: #e8ded5;
    box-shadow: var(--ar-card-shadow) !important;
    text-align: center;
    isolation: isolate;
    transform: translateY(0);
    transition: transform .28s ease, box-shadow .28s ease;
}

/* Readability layer for the title without hiding the product image. */
.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 48%;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(7, 15, 22, .70) 0%,
        rgba(7, 15, 22, .34) 46%,
        rgba(7, 15, 22, 0) 100%
    );
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .thumbnail {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 !important;
}

/* Remove the old oval decoration below the 64px icon. */
.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .thumbnail::after {
    display: none !important;
    content: none !important;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .thumbnail img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    transform: scale(1.001);
    transition: transform .45s cubic-bezier(.2,.65,.3,1), filter .3s ease;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    padding: 24px 16px 20px;
    text-align: center;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content .title {
    display: block;
    margin: 0 !important;
    color: #fff !important;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.55;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .38);
    transition: transform .28s ease;
}

/* Ahan Online-like card: keep the card clean and let the category name lead. */
.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content .view-price {
    display: none !important;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .dots {
    display: none !important;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner:hover {
    padding-top: 0 !important;
    transform: translateY(-5px);
    box-shadow: var(--ar-card-shadow-hover) !important;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner:hover .thumbnail img {
    transform: scale(1.045);
    filter: saturate(1.03) contrast(1.02);
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner:hover .content .title {
    margin: 0 !important;
    transform: translateY(-2px);
}

/* Thin Ahan Rooz accent at the bottom on hover. */
.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--ar-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s ease;
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner:hover::after {
    transform: scaleX(1);
}

.index-product-carousel-section .carousel-index-product .swiper-slide .item-inner:focus-visible {
    outline: 3px solid rgba(169, 25, 69, .28);
    outline-offset: 3px;
}

/* Keep the existing wide, edge-to-edge carousel behavior, but reduce visual clutter. */
.index-product-carousel-section .carousel-index-product {
    padding-top: 8px;
}

@media (max-width: 1024px) {
    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content .title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .index-product-carousel-section .carousel-index-product {
        margin-right: 0;
        margin-left: 0;
    }

    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner {
        padding-top: 0 !important;
        margin-bottom: 22px !important;
        border-radius: 12px;
    }

    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner:hover {
        padding-top: 0 !important;
        transform: translateY(-2px);
    }

    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content {
        padding: 18px 10px 14px;
    }

    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content .title {
        font-size: 15px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content {
        padding: 15px 8px 12px;
    }

    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content .title {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner,
    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .thumbnail img,
    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner .content .title,
    .index-product-carousel-section .carousel-index-product .swiper-slide .item-inner::after {
        transition: none !important;
    }
}