/* Product media additions follow the approved ivory palette and 32px radius. */
.catalog-enabled .demo-thumbnails{max-height:490px;overflow-y:auto;scrollbar-width:thin;padding:2px}
.catalog-enabled .demo-dots{flex-wrap:wrap;max-height:64px;overflow:auto}
.catalog-enabled .demo-lightbox:has(.catalog-photo[data-role="nutrition"]){width:min(960px,calc(100% - 24px))}
.catalog-enabled .demo-lightbox-photo:has(.catalog-photo[data-role="nutrition"]){max-width:870px}
.catalog-enabled .demo-lightbox-photo .catalog-photo[data-role="nutrition"]{max-height:none;height:auto;object-fit:contain}
.al-shop.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{max-height:490px;overflow-y:auto;scrollbar-width:thin}
@media(max-width:767px){.catalog-enabled .demo-thumbnails{max-height:90px;overflow-y:hidden;overflow-x:auto}}

@media(min-width:768px){.catalog-enabled .demo-thumbnails{width:76px;box-sizing:border-box;overflow-x:hidden;padding:2px;scrollbar-width:thin}}

.demo-gallery-count{font-size:12px;line-height:1.5;color:var(--al-muted,#59636d);font-variant-numeric:tabular-nums}

/* Match the five-column desktop catalog in the preview and WooCommerce archives. */
@media(min-width:1051px){
 .al-shop.post-type-archive-product ul.products,.al-shop.tax-product_cat ul.products,.al-shop.tax-product_tag ul.products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
 .al-shop.post-type-archive-product ul.products::before,.al-shop.post-type-archive-product ul.products::after,.al-shop.tax-product_cat ul.products::before,.al-shop.tax-product_cat ul.products::after,.al-shop.tax-product_tag ul.products::before,.al-shop.tax-product_tag ul.products::after{display:none}
 .al-shop.post-type-archive-product ul.products li.product,.al-shop.tax-product_cat ul.products li.product,.al-shop.tax-product_tag ul.products li.product{float:none;clear:none;width:auto;min-width:0;margin:0}
 .al-tax-goal-archive .al-tax-goal-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Product galleries always use white behind the image, including unused space. */
body.al-shop :is(.demo-main-wrap,.demo-main-image,.demo-thumb,.demo-lightbox,.demo-lightbox-photo){background:#fff}
body.al-shop.woocommerce div.product .woocommerce-product-gallery,
body.al-shop.woocommerce div.product .woocommerce-product-gallery :is(.flex-viewport,.woocommerce-product-gallery__wrapper,.woocommerce-product-gallery__image,.woocommerce-product-gallery__image>a,.woocommerce-product-gallery__image img,.flex-control-thumbs li){background:#fff}
body.al-shop .al-gallery-zoom{background:#fff}
