/* 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 {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
    }
}