/*
 * AWARAHOON PRODUCT CARD EDGE FIX
 * Adds safe left/right space so rounded cards and shadows remain visible.
 */

/* Prevent the complete page from scrolling sideways */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Main WooCommerce product areas */
.woocommerce,
.woocommerce-page,
.woocommerce .products,
.woocommerce-page .products,
.products,
.wd-products,
.wd-products-element,
.ts-products,
.ts-product-wrapper,
.elementor-widget-woocommerce-products {
    box-sizing: border-box !important;
}

/* Safe horizontal gutter around normal product grids */
.woocommerce .products,
.woocommerce-page .products,
.products {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Keep every card away from the grid edge */
.woocommerce .products .product,
.woocommerce-page .products .product,
.products .product,
.products > section.product {
    min-width: 0 !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

/* Keep the complete rounded card visible */
.products .product .product-wrapper {
    width: calc(100% - 2px) !important;
    max-width: calc(100% - 2px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Common slider/carousel structures */
.owl-carousel,
.owl-stage-outer,
.slick-slider,
.slick-list,
.swiper,
.swiper-container,
.woocommerce .products-slider,
.wd-carousel-container,
.ts-product-wrapper {
    box-sizing: border-box !important;
}

/*
 * Keep slide viewport controlled, while giving each slide its own safe gutter.
 * This avoids showing cut-off cards at the far left and right.
 */
.owl-stage-outer,
.slick-list,
.swiper,
.swiper-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.owl-item,
.slick-slide,
.swiper-slide {
    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Homepage sections need slightly more side space */
body.home .woocommerce,
body.home .woocommerce-page,
body.home .wd-products-element,
body.home .ts-product-wrapper,
body.home .elementor-widget-woocommerce-products {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Ensure rounded border and shadow are not cut inside cards */
.products .product .product-wrapper {
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Desktop */
@media screen and (min-width: 1101px) {
    .woocommerce .products,
    .woocommerce-page .products,
    .products {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .owl-stage-outer,
    .slick-list,
    .swiper,
    .swiper-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .owl-item,
    .slick-slide,
    .swiper-slide {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .woocommerce .products,
    .woocommerce-page .products,
    .products {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .owl-item,
    .slick-slide,
    .swiper-slide {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    .woocommerce .products,
    .woocommerce-page .products,
    .products {
        padding-left: 8px !important;
        padding-right: 8px !important;
        column-gap: 10px !important;
    }

    .woocommerce .products .product,
    .woocommerce-page .products .product,
    .products .product,
    .products > section.product {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .products .product .product-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
    }

    .owl-stage-outer,
    .slick-list,
    .swiper,
    .swiper-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .owl-item,
    .slick-slide,
    .swiper-slide {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    body.home .woocommerce,
    body.home .woocommerce-page,
    body.home .wd-products-element,
    body.home .ts-product-wrapper,
    body.home .elementor-widget-woocommerce-products {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}