/* =====================================================
   SMARTON - OPTIMIZED MOBILE SLIDER & HEADER
   Mobile only. Desktop and tablet remain unchanged.
   ===================================================== */

@media screen and (max-width: 767px) {

    /* ==========================================
       1. TP SLIDER HEIGHT
       ========================================== */

    main .tp-slider-height,
    .tp-slider-height {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    .tp-slider-height .swiper,
    .tp-slider-height .swiper-wrapper,
    .tp-slider-height .swiper-slide {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* ==========================================
       2. SLIDER CONTENT
       ========================================== */

    .tp-slider-height .tp-slider-content {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px 4px !important;
    }

    /* ==========================================
       3. SLIDER TITLE
       ========================================== */

    .tp-slider-height .tp-slider-title {
        font-size: clamp(21px, 5.5vw, 25px) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.35px !important;
        margin: 5px 0 7px !important;
    }

    /* ==========================================
       4. PRICE & DESCRIPTION
       ========================================== */

    .tp-slider-height .tp-slider-content p,
    .tp-slider-height .tp-slider-content span {
        font-size: clamp(12px, 3.25vw, 14px) !important;
        line-height: 1.16 !important;
        margin-top: 3px !important;
        margin-bottom: 6px !important;
    }

    /* ==========================================
       5. SHOP NOW BUTTON
       ========================================== */

    .tp-slider-height .tp-slider-btn,
    .tp-slider-height .tp-slider-content a {
        font-size: 12px !important;
        line-height: 1.1 !important;
        padding: 9px 16px !important;
        min-height: 0 !important;
        margin-top: 7px !important;
        margin-bottom: 0 !important;
    }

    /* ==========================================
       6. PRODUCT IMAGE
       ========================================== */

    .tp-slider-height img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 76% !important;
        max-height: 145px !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        margin: -12px auto 0 !important;
    }

    /* Background product images */
    .tp-slider-height [style*="background-image"] {
        background-size: auto 68% !important;
        background-position: center bottom !important;
        background-repeat: no-repeat !important;
    }

    /* ==========================================
       7. COMPACT MOBILE HEADER
       ========================================== */

    #header-sticky.tp-header-bottom-2,
    #header-sticky.tp-header-sticky {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #header-sticky > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #header-sticky .row.align-items-center {
        min-height: 0 !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        align-items: center !important;
    }

    /* Logo container */
    #header-sticky .tp-header-logo,
    #header-sticky .header-logo,
    #header-sticky .logo {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* Logo image */
    #header-sticky .tp-header-logo img,
    #header-sticky .header-logo img,
    #header-sticky .logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: 52px !important;
        object-fit: contain !important;
    }

    /* Header action icons */
    #header-sticky .tp-header-action,
    #header-sticky .tp-header-action-item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}