/**
 * Product listing layout — products page & homepage (.sf-product-listing).
 * Card image height follows each image's aspect ratio; CSS vars set max height (desktop / mobile).
 */

/* Products page grid */
.sf-product-listing.sf-products-page .products-grid,
.sf-product-listing:not(.sf-homepage-listing) .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--product-card-grid-min, 280px), 1fr));
}

/* Homepage product grids (flash sale, most searched, latest) */
.sf-product-listing.sf-homepage-listing .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--product-card-grid-min, 280px), 1fr));
}

.sf-product-listing .product-image {
    height: auto;
    min-height: 0;
    background: #fff;
    padding: 0;
    margin: 0;
    line-height: 0;
    overflow: hidden;
    display: block;
}

.sf-product-listing .product-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--product-card-image-height, 220px);
    margin: 0;
    vertical-align: bottom;
    object-fit: contain;
    object-position: center top;
}

.sf-product-listing .product-card {
    scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px));
    scroll-margin-bottom: 24px;
}

.sf-product-listing .product-card.product-card--highlighted {
    outline: 2px solid var(--primary, #1f6f94);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 31, 111, 148), 0.22);
    transition: box-shadow 0.25s ease, outline-color 0.25s ease;
}

.sf-product-listing .product-info {
    padding: 8px 12px 12px;
}

.sf-product-listing .product-info h3 {
    margin-top: 0;
    margin-bottom: 6px;
    min-height: 0;
}

.sf-product-listing.product-modal--detail .modal-main-image,
.sf-product-listing .product-modal--detail .modal-main-image {
    height: auto;
    min-height: 0;
    max-height: var(--product-modal-image-height, 300px);
}

.sf-product-listing.product-modal--detail .modal-main-image img,
.sf-product-listing .product-modal--detail .modal-main-image img {
    width: 100%;
    height: auto;
    max-height: var(--product-modal-image-height, 300px);
    object-fit: contain;
    object-position: center;
}

.sf-product-listing.product-modal--detail .modal-content,
.sf-product-listing .product-modal--detail .modal-content {
    max-width: min(100%, 900px);
}

/* Homepage carousel (column flow) */
.sf-product-listing.products-section .products-grid,
.sf-product-listing .products-carousel .products-grid {
    grid-auto-columns: calc((100% - 54px) / 4);
}

@media (max-width: 992px) {
    .sf-product-listing.sf-products-page .products-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
    }

    .sf-product-listing:not(.sf-homepage-listing) .products-grid,
    .sf-product-listing.sf-homepage-listing .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--product-card-grid-min-tablet, 238px), 1fr));
    }

    .sf-product-listing.products-section .products-grid,
    .sf-product-listing .products-carousel .products-grid {
        grid-auto-columns: calc((100% - 36px) / 3);
    }

    .sf-product-listing.product-modal--detail .modal-main-image,
    .sf-product-listing .product-modal--detail .modal-main-image,
    .sf-product-listing.product-modal--detail .modal-main-image img,
    .sf-product-listing .product-modal--detail .modal-main-image img {
        max-height: var(--product-modal-image-height-tablet, 260px);
    }
}

@media (max-width: 768px) {
    .sf-product-listing.sf-products-page .products-grid,
    .sf-product-listing:not(.sf-homepage-listing) .products-grid,
    .sf-product-listing.sf-homepage-listing .products-grid {
        /* Single column within header/footer content width (avoid 300px min wider than viewport gutter) */
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
    }

    .sf-product-listing.sf-products-page .product-card {
        width: 100%;
        max-width: 100%;
    }

    .sf-product-listing .product-image img {
        max-height: var(--product-card-image-mobile-height, 240px);
    }

    .sf-product-listing .product-info {
        padding: 6px 10px 10px;
    }

    .sf-product-listing.products-section .products-grid,
    .sf-product-listing .products-carousel .products-grid {
        grid-auto-columns: calc(100% - 16px);
        gap: 14px;
    }

    .sf-product-listing.product-modal--detail .modal-main-image,
    .sf-product-listing .product-modal--detail .modal-main-image,
    .sf-product-listing.product-modal--detail .modal-main-image img,
    .sf-product-listing .product-modal--detail .modal-main-image img {
        max-height: var(--product-modal-image-height-mobile, 260px);
    }

    .sf-product-listing.product-modal--detail .modal-content,
    .sf-product-listing .product-modal--detail .modal-content {
        max-width: min(100%, 460px);
    }
}

@media (max-width: 576px) {
    .sf-product-listing.sf-products-page .products-grid,
    .sf-product-listing:not(.sf-homepage-listing) .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .sf-product-listing.products-section .products-grid,
    .sf-product-listing .products-carousel .products-grid {
        grid-auto-columns: 100%;
    }
}