/**
 * Baskets Section - Dedicated Responsive Styles
 * Loaded after style.css and responsive-layout-fixes.css
 * Provides fluid typography, adaptive cards, and single-card carousel on mobile.
 */

/* ============================================
   BASKETS SECTION - FLUID RESPONSIVE SYSTEM
   ============================================ */

.section-baskets {
    padding: clamp(40px, 6vw, 80px) clamp(12px, 2vw, 20px);
    max-width: 100%;
    overflow-x: hidden;
}

.baskets-container {
    max-width: 1525px;
    margin: 0 auto;
    padding: 0 20px;
}

.baskets-header {
    margin-bottom: clamp(32px, 4vw, 60px);
}

.baskets-title {
    font-size: clamp(24px, 3.5vw, 42px);
    margin-bottom: clamp(8px, 1vw, 12px);
}

.baskets-subtitle {
    font-size: clamp(14px, 1.4vw, 18px);
    margin-top: clamp(12px, 1.5vw, 20px);
}

/* ============================================
   BASKET CARDS
   ============================================ */

.basket-card {
    border-radius: clamp(12px, 1.2vw, 16px);
    max-width: 100%;
}

.basket-image {
    aspect-ratio: 16 / 10;
    max-height: clamp(200px, 22vw, 380px);
}

.basket-content {
    padding: clamp(16px, 2vw, 30px) clamp(14px, 1.8vw, 24px);
}

.basket-title {
    font-size: clamp(16px, 1.8vw, 24px);
    min-height: auto;
    margin-bottom: clamp(8px, 1vw, 12px);
}

.basket-desc {
    font-size: clamp(13px, 1.1vw, 15px);
    margin-bottom: clamp(14px, 1.5vw, 24px);
    min-height: auto;
}

.basket-list {
    margin-bottom: clamp(14px, 1.5vw, 24px);
}

.basket-list li {
    font-size: clamp(12px, 1vw, 14px);
    margin-bottom: clamp(8px, 0.8vw, 12px);
}

.basket-divider {
    margin-bottom: clamp(16px, 1.5vw, 24px);
}

.price-row-top {
    margin-bottom: 4px;
}

.price-label,
.price-mrp {
    font-size: clamp(10px, 0.9vw, 11px);
}

.price-row-bottom {
    margin-bottom: clamp(16px, 1.5vw, 24px);
}

.price-new {
    font-size: clamp(20px, 2.2vw, 28px);
}

.price-shipping {
    font-size: clamp(9px, 0.8vw, 10px);
}

.btn-basket {
    padding: clamp(12px, 1.2vw, 14px);
    font-size: clamp(13px, 1.1vw, 15px);
}

/* ============================================
   BASKETS CAROUSEL - DESKTOP 3-CARD LAYOUT
   ============================================ */

.baskets-carousel {
    padding: 0 clamp(16px, 2vw, 30px) !important;
}

.baskets-carousel .slick-list {
    margin: 0 clamp(-10px, -1.2vw, -15px) !important;
}

.baskets-carousel .carousel-box {
    padding: clamp(8px, 1vw, 10px) clamp(6px, 1vw, 15px)
        clamp(14px, 1.5vw, 20px) !important;
}

.baskets-carousel .slick-prev,
.baskets-carousel .slick-next {
    width: clamp(36px, 3.5vw, 44px);
    height: clamp(36px, 3.5vw, 44px);
}

.baskets-carousel .slick-prev {
    left: clamp(-6px, -0.8vw, -10px);
}

.baskets-carousel .slick-next {
    right: clamp(-6px, -0.8vw, -10px);
}

.baskets-carousel .slick-prev:before,
.baskets-carousel .slick-next:before {
    font-size: clamp(16px, 1.8vw, 20px);
}

/* ============================================
   LARGE DESKTOP (>= 1201px) - 3 cards visible
   ============================================ */
@media (min-width: 1201px) {
    .baskets-container {
        max-width: 1525px;
    }

    .basket-card {
        max-width: 100%;
    }
}

/* ============================================
   LAPTOP / SMALL DESKTOP (<= 1200px) - 3 cards
   ============================================ */
@media (max-width: 1200px) {
    .baskets-container {
        max-width: 1200px;
    }

    .basket-image {
        max-height: 320px;
    }

    .basket-card {
        max-width: 560px;
    }
}

/* ============================================
   TABLET (<= 992px) - 2 cards visible
   ============================================ */
@media (max-width: 992px) {
    .baskets-carousel {
        padding: 0 20px !important;
    }

    .baskets-carousel .slick-list {
        margin: 0 -10px !important;
    }

    .baskets-carousel .carousel-box {
        padding: 8px 10px 18px !important;
    }

    .baskets-carousel .slick-prev {
        left: -6px;
    }

    .baskets-carousel .slick-next {
        right: -6px;
    }

    .basket-title {
        font-size: 19px;
    }

    .basket-image {
        max-height: 280px;
    }
}

/* ============================================
   MOBILE (<= 768px) - 1 card visible
   ============================================ */
@media (max-width: 768px) {
    .section-baskets {
        padding: 44px 16px;
    }

    .baskets-title {
        font-size: 28px;
    }

    .baskets-subtitle {
        font-size: 15px;
        margin-top: 12px;
    }

    .baskets-carousel {
        padding: 0 10px !important;
    }

    .baskets-carousel .slick-list {
        margin: 0 -8px !important;
    }

    .baskets-carousel .carousel-box {
        padding: 8px 8px 16px !important;
    }

    .basket-image {
        max-height: 240px;
    }

    .basket-card {
        max-width: 480px;
        margin: 0 auto;
    }

    .basket-content {
        padding: 18px 16px;
    }

    .basket-title {
        font-size: 17px;
    }

    .basket-desc {
        font-size: 13px;
    }

    .basket-list li {
        font-size: 12px;
    }

    .price-new {
        font-size: 22px;
    }

    .btn-basket {
        padding: 12px;
        font-size: 14px;
    }
}

/* ============================================
   SMALL MOBILE - SINGLE CARD CAROUSEL (<= 576px)
   ============================================ */
@media (max-width: 576px) {
    .section-baskets {
        padding: 36px 12px;
    }

    .baskets-title {
        font-size: 22px;
    }

    .baskets-subtitle {
        font-size: 13px;
    }

    .baskets-carousel {
        padding: 0 8px !important;
    }

    .baskets-carousel .slick-list {
        margin: 0 -6px !important;
        overflow: hidden;
    }

    .baskets-carousel .carousel-box {
        padding: 6px 6px 14px !important;
    }

    .baskets-carousel .slick-prev,
    .baskets-carousel .slick-next {
        width: 32px;
        height: 32px;
    }

    .baskets-carousel .slick-prev {
        left: -4px;
    }

    .baskets-carousel .slick-next {
        right: -4px;
    }

    .baskets-carousel .slick-prev:before,
    .baskets-carousel .slick-next:before {
        font-size: 14px;
    }

    .basket-card {
        max-width: 320px;
        margin: 0 auto;
        border-radius: 14px;
    }

    .basket-image {
        max-height: 200px;
    }

    .basket-content {
        padding: 14px 12px;
    }

    .basket-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .basket-desc {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .basket-list {
        margin-bottom: 12px;
    }

    .basket-list li {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .price-new {
        font-size: 20px;
    }

    .price-shipping {
        font-size: 9px;
    }

    .btn-basket {
        padding: 10px;
        font-size: 13px;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (<= 375px)
   ============================================ */
@media (max-width: 375px) {
    .baskets-title {
        font-size: 20px;
    }

    .basket-card {
        max-width: 280px;
    }

    .basket-image {
        max-height: 170px;
    }

    .basket-content {
        padding: 12px 10px;
    }

    .basket-title {
        font-size: 14px;
    }

    .basket-desc {
        font-size: 11px;
    }

    .price-new {
        font-size: 18px;
    }

    .btn-basket {
        font-size: 12px;
    }
}