/* ========================================================================== AUTO-MEDIA — layout for products that only have one photo. Pairs with inc/areas/fix-auto-media.php, which puts `yb-am-single-image` (one photo) or `yb-am-no-image` (none) on of a product page, and `yb-am-gallery-single` on the gallery wrapper. Deliberately small. The finished PDP gallery is built by assets/js/areas/pdp-top.js (.yb-pdp-grid / .yb-pdp-grid--single) and framed by assets/css/areas/zy-product-images.css, which loads AFTER this file and must keep winning. This file only covers the two things that file cannot: 1. the empty thumbnail strip WooCommerce / WoodMart print when there is nothing to put in it, 2. the moment BEFORE pdp-top.js runs (and the no-JavaScript case), so a one-photo product still shows a correct 4:5 frame instead of a stretched image. The 4:5 ratio and the #F2F2F2 ground are read from the shared tokens, with literal fallbacks so this file is never dependent on load order. ========================================================================== */ /* ---------- 1. No thumbnails to show: do not reserve a strip -------------- */ .yb.yb-am-single-image .product-images .wd-gallery-thumb, .yb.yb-am-single-image .product-images .thumbnails, .yb.yb-am-single-image .product-images .flex-control-thumbs, .yb.yb-am-single-image .woocommerce-product-gallery .wd-gallery-thumb, .yb.yb-am-single-image .woocommerce-product-gallery .flex-control-nav, .yb.yb-am-no-image .product-images .wd-gallery-thumb, .yb.yb-am-no-image .product-images .thumbnails, .yb.yb-am-no-image .product-images .flex-control-thumbs { display: none !important; } /* WoodMart's gallery arrows and the "view gallery" zoom button have nothing to move to when there is one image. */ .yb.yb-am-single-image .woocommerce-product-gallery .wd-btn-arrow, .yb.yb-am-single-image .woocommerce-product-gallery .owl-nav, .yb.yb-am-single-image .woocommerce-product-gallery .wd-carousel-nav, .yb.yb-am-single-image .product-images .wd-show-product-gallery-wrap { display: none !important; } /* ---------- 2. One photo, before pdp-top.js / without JavaScript ---------- */ .yb.yb-am-single-image .woocommerce-product-gallery.yb-am-gallery-single, .yb.yb-am-single-image .woocommerce-product-gallery.yb-am-gallery-single .woocommerce-product-gallery__wrapper { width: 100% !important; max-width: 100%; margin: 0; } .yb.yb-am-single-image .woocommerce-product-gallery.yb-am-gallery-single .woocommerce-product-gallery__image { position: relative; display: block; width: 100%; height: auto; min-height: 0; overflow: hidden; background: var(--yb-img-bg, #F2F2F2); aspect-ratio: var(--yb-img-ratio, 4 / 5); } .yb.yb-am-single-image .woocommerce-product-gallery.yb-am-gallery-single .woocommerce-product-gallery__image img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; max-height: none; margin: 0; object-fit: contain; object-position: 50% 50%; background: transparent; mix-blend-mode: normal !important; transform: none !important; } /* ---------- 3. No photo at all: a quiet 4:5 placeholder ------------------ */ .yb.yb-am-no-image .woocommerce-product-gallery__image--placeholder { position: relative; display: block; width: 100%; overflow: hidden; background: var(--yb-img-bg, #F2F2F2); aspect-ratio: var(--yb-img-ratio, 4 / 5); } .yb.yb-am-no-image .woocommerce-product-gallery__image--placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; opacity: .45; } /* ---------- 4. Phones: the single frame stays 4:5, never taller ---------- */ @media (max-width: 767px) { .yb.yb-am-single-image .woocommerce-product-gallery.yb-am-gallery-single .woocommerce-product-gallery__image, .yb.yb-am-no-image .woocommerce-product-gallery__image--placeholder { aspect-ratio: var(--yb-img-ratio, 4 / 5); height: auto; } }