/* Custom styles for main product grid */
@media (max-width: 600px) {
    #ProductGridContainer .fullscreen-container {
        padding: 0 0.75rem !important;
    }

    .products-grid>.container {
        padding: 0 0.75rem !important;
    }

    #product-grid,
    #products-grid {
        row-gap: 0.5rem !important;

        .card-information {
            padding: 0.25rem 0 0 0 !important;
        }

        .card-title_info {
            flex-direction: column;
            gap: 0 !important;
        }

        .card__title {
            font-size: 1.25rem !important;
        }

        .price-item {
            font-size: 1.25rem !important;
            color: var(--color-secondary-text) !important;
        }

        .color-swatch {
            padding: 0 !important;
            margin: 0 !important;
        }

        .product-parameters {
            margin: 0 !important;
            opacity: 1 !important;
        }

        .price__regular {
            margin-top: -7px !important;
        }

        .color-count {
            color: var(--color-secondary-text) !important;
            margin-left: 6px !important;
        }

        .product-form__controls {
            display: flex !important;
            align-items: start !important;
            justify-content: start !important;
            margin-top: -7px !important;
        }

        .product-form__controls-group {
            transform: scale(0.7) !important;
            transform-origin: left center !important;
            margin-right: auto !important;
            padding-left: 2px !important;
        }
    }
}

/* Ensure main product page shows all swatches regardless of desktop/mobile */
.main-product-page .desktop-hidden-swatch {
    display: inline-block !important;
}

.main-product-page .desktop-color-count {
    display: none !important;
}

.main-product-page .mobile-color-count {
    display: inline !important;
}

/* Hide color count specifically in main product page variant picker */
.main-product-page .product-form__input--radios .color-count,
.main-product-page .product-form__input--dropdown .color-count {
    display: none !important;
}

/* Override mobile behavior for main product page - show all swatches */
@media screen and (max-width: 1200px) {

    .main-product-page .product-form__controls-group input,
    .main-product-page .product-form__controls-group label {
        display: inline-block !important;
    }

    .main-product-page .desktop-hidden-swatch {
        display: inline-block !important;
    }
}

/* Ensure color swatches are always visible on touch devices */
@media (hover: none) and (pointer: coarse) {
    .product-parameters {
        opacity: 1 !important;
    }

    .card-wrapper .product-parameters {
        opacity: 1 !important;
    }

    #product-grid,
    #products-grid .product-parameters {
        opacity: 1 !important;
    }
}

/* Hide blocks marked as duplicate mobile order on mobile only to prevent UI overlap */
@media screen and (max-width: 749px) {
    #products-grid.mobile-index-enabled:not(.collection-product-list--2-mobile) [data-mobile-order-duplicate="true"] {
        display: none !important;
    }
}

/* Ensure video thumbnails behave like images in the products grid */
#products-grid .grid-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 2 / 3 !important;
    /* object-fit is set inline from Liquid to honor block setting */
}

/* Desktop mega image: span 2 columns and 2 rows */
@media screen and (min-width: 990px) {
    #products-grid .collection-product-card--desktop-span-2x2,
    #product-grid .collection-product-card--desktop-span-2x2 {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }

    /* Bildet skal vaere noyaktig like hoyt som de fire produktene ved siden av.
       Temaet setter align-self:flex-start paa alle kort, saa flisa maa strekkes,
       og bildet legges absolutt slik at det ikke paavirker radhoydene.
       Utelatt i 1- og 2-kolonners visning, der flisa dekker hele bredden og ingen
       produkter staar ved siden til aa gi radene hoyde. */
    #product-grid:not(.cols-1):not(.cols-2) .collection-product-card--desktop-span-2x2 {
        align-self: stretch !important;
        position: relative !important;
        overflow: hidden !important;
    }

    #product-grid:not(.cols-1):not(.cols-2) .collection-product-card--desktop-span-2x2 > a {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
    }

    #product-grid:not(.cols-1):not(.cols-2) .collection-product-card--desktop-span-2x2 img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
    }
}