/*
Theme Name: Minimog Child
Theme URI: http://minimog.thememove.com/
Author: ThemeMove
Author URI: http://thememove.com/
Version: 1.0.0
Template: minimog
Text Domain:  minimog-child
Tags: editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

@media not (hover: hover) {
    /** show wishlist and quick view buttons on  touch screen devices **/
    .minimog-product:not(.style-list).group-style-01 .product-thumbnail .product-actions {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.page-header-inner {
    background-color: rgba(0, 0, 0, .5);
}

/* Fix Shop by Category section layout and carousel on mobile */
@media (max-width: 768px) {
    /* Force proper stacking for all sections */
    .elementor-section .elementor-container {
        flex-direction: column !important;
    }

    .elementor-section .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix widget wrapping to stack vertically */
    .elementor-widget-wrap {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Ensure heading and text are full width */
    .elementor-widget-heading,
    .elementor-widget-text-editor {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Fix the TM Carousel widget specifically */
    .elementor-widget-tm-carousel {
        width: 100% !important;
        margin-top: 15px !important;
    }

    /* Override any inline styles for carousel container */
    .tm-swiper-carousel,
    .tm-carousel,
    .elementor-widget-tm-carousel .swiper-container {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fix swiper wrapper to allow horizontal scroll */
    .elementor-widget-tm-carousel .swiper-wrapper,
    .tm-carousel .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }

    /* Category carousel slides - compact size */
    .elementor-widget-tm-carousel .swiper-slide {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 100px !important;
        margin-right: 8px !important;
        flex: 0 0 auto !important;
    }

    /* Category boxes styling */
    .elementor-widget-tm-carousel .minimog-box,
    .elementor-widget-tm-carousel .tm-box {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        background: #f5f5f5 !important;
    }

    /* Category images */
    .elementor-widget-tm-carousel .minimog-box__image,
    .elementor-widget-tm-carousel .minimog-box img,
    .elementor-widget-tm-carousel .tm-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Category titles - overlay style */
    .elementor-widget-tm-carousel .minimog-box__content,
    .elementor-widget-tm-carousel .minimog-box__title,
    .elementor-widget-tm-carousel .tm-box__content,
    .elementor-widget-tm-carousel .tm-box__title {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 4px !important;
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent) !important;
        color: white !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin: 0 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }

    /* Keep product carousels larger */
    .elementor-widget-tm-product-carousel .swiper-slide {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        height: auto !important;
    }

    /* Hide any pagination dots on mobile for category carousel */
    .elementor-widget-tm-carousel .swiper-pagination {
        display: none !important;
    }
}

/* Fix product image cropping in Best Sellers and product carousels */
.minimog-product .product-thumbnail img,
.woocommerce-loop-product__link img,
.product-loop-image img,
.tm-product-carousel .product-thumbnail img,
.elementor-widget-tm-product-carousel .product-thumbnail img {
    object-fit: contain !important;
    object-position: center center !important;
}

/* Alternative: If you want to keep cover but show heads */
/*
.minimog-product .product-thumbnail img,
.woocommerce-loop-product__link img {
    object-fit: cover !important;
    object-position: center top !important;
}
*/