/* Kaffe-Rep WCSpots Popup Fix 1.0.0
 * WCSpots originalfiler lämnas orörda.
 */

/* Desktop: när JS återställer popoverHeight ska innehållet fylla just den höjden. */
@media (min-width: 782px) {
    .react-tiny-popover-container .popover-content.layout2,
    .react-tiny-popover-container .popover-content.layout4 {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .react-tiny-popover-container .popover-content.layout2 .wcspots-product,
    .react-tiny-popover-container .popover-content.layout4 .wcspots-product {
        min-height: 0 !important;
        height: 100% !important;
    }

    .react-tiny-popover-container .popover-content.layout2 .product-featured-image,
    .react-tiny-popover-container .popover-content.layout4 .product-featured-image {
        min-height: 0 !important;
        height: 100% !important;
    }

    .react-tiny-popover-container .popover-content.layout2 .product-featured-image img,
    .react-tiny-popover-container .popover-content.layout4 .product-featured-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

/* Mobil: WCSpots staplar layout 2/4. Då ska ingen fast desktop-höjd följa med. */
@media (max-width: 781px) {
    .react-tiny-popover-container {
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
    }

    .react-tiny-popover-container .popover-content.layout2,
    .react-tiny-popover-container .popover-content.layout4,
    .react-tiny-popover-container .popover-content.layout2 .wcspots-product,
    .react-tiny-popover-container .popover-content.layout4 .wcspots-product {
        height: auto !important;
        min-height: 0 !important;
    }

    .react-tiny-popover-container .popover-content.layout2 .product-featured-image,
    .react-tiny-popover-container .popover-content.layout4 .product-featured-image {
        flex-basis: auto !important;
        width: 100% !important;
        height: 150px !important;
        min-height: 0 !important;
        justify-content: center !important;
    }

    .react-tiny-popover-container .popover-content.layout2 .product-featured-image img,
    .react-tiny-popover-container .popover-content.layout4 .product-featured-image img {
        width: auto !important;
        max-width: 100% !important;
        height: 150px !important;
        object-fit: contain !important;
    }
}