/* ========================================================================== Single product page — image gallery containment only. Loaded on is_product() from inc/assets.php. NOTHING here touches the add-to-cart form, variation selects, quantity, price, tabs or the WooCommerce templates. This file only stops the gallery from painting outside its own column. THE BUG THIS FIXES ------------------ The gallery is FlexSlider. FlexSlider's stylesheet positions its navigation list absolutely: .flex-control-nav { position: absolute; bottom: -40px; width: 100%; } That rule needs a positioned ancestor. When the nearest positioned ancestor is not the gallery (or the gallery has not been given position: relative before the slider initialises), the thumbnail list resolves against a far-away ancestor and the small thumbnails escape the product column — which is the "small product image poking out of the left edge" seen on staging, and one of the elements pushing a page-level horizontal scrollbar. The fix is structural: give the gallery a positioning context, put the thumbnail list back in normal flow as a grid, and clip anything a slide transition leaves outside the frame. Zoom and lightbox are unaffected: the zoom layer (img.zoomImg) is drawn inside .woocommerce-product-gallery__image and is meant to be clipped to it, and PhotoSwipe's lightbox is appended to , outside this subtree. ========================================================================== */ body.tds-theme.woocommerce div.product .woocommerce-product-gallery, body.tds-theme.woocommerce-page div.product .woocommerce-product-gallery { position: relative; max-width: 100%; min-width: 0; /* Clips a mid-transition slide; the visible frame is unchanged. */ overflow: hidden; } body.tds-theme.woocommerce div.product .woocommerce-product-gallery__wrapper, body.tds-theme.woocommerce-page div.product .woocommerce-product-gallery__wrapper { max-width: 100%; margin: 0; padding: 0; } body.tds-theme.woocommerce div.product .woocommerce-product-gallery__image img, body.tds-theme.woocommerce-page div.product .woocommerce-product-gallery__image img { max-width: 100%; height: auto; display: block; } /* --- Thumbnail strip ------------------------------------------------------ Back into normal flow. FlexSlider binds its click handlers to the

/ and does not depend on them being floated or absolutely positioned, so the thumbnails keep working as slide controls. ------------------------------------------------------------------------ */ body.tds-theme.woocommerce div.product .flex-control-nav, body.tds-theme.woocommerce div.product .flex-control-thumbs, body.tds-theme.woocommerce-page div.product .flex-control-nav, body.tds-theme.woocommerce-page div.product .flex-control-thumbs { position: static; bottom: auto; left: auto; right: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tds-space-2); width: 100%; max-width: 100%; box-sizing: border-box; margin: var(--tds-space-3) 0 0; padding: 0; list-style: none; overflow: visible; } body.tds-theme.woocommerce div.product .flex-control-thumbs li, body.tds-theme.woocommerce-page div.product .flex-control-thumbs li { float: none; width: auto; max-width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; } body.tds-theme.woocommerce div.product .flex-control-thumbs li img, body.tds-theme.woocommerce-page div.product .flex-control-thumbs li img { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--tds-radius-sm); background: var(--tds-card-image-bg); opacity: 0.6; cursor: pointer; transition: opacity 0.15s ease; } body.tds-theme.woocommerce div.product .flex-control-thumbs li img:hover, body.tds-theme.woocommerce div.product .flex-control-thumbs li img.flex-active, body.tds-theme.woocommerce-page div.product .flex-control-thumbs li img:hover, body.tds-theme.woocommerce-page div.product .flex-control-thumbs li img.flex-active { opacity: 1; } /* --- Column containment -------------------------------------------------- Storefront floats the gallery and the summary side by side. Cap both so a wide image can never widen the page. ------------------------------------------------------------------------ */ body.tds-theme.woocommerce div.product div.images, body.tds-theme.woocommerce div.product div.summary, body.tds-theme.woocommerce-page div.product div.images, body.tds-theme.woocommerce-page div.product div.summary { max-width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 767px) { body.tds-theme.woocommerce div.product .flex-control-thumbs, body.tds-theme.woocommerce-page div.product .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tds-space-1); } } /* --- Related / up-sell grid ---------------------------------------------- THE BUG THIS FIXES ------------------ product-card.css lays every ul.products out as repeat(var(--tds-cols-desktop), minmax(0, 1fr)) -- five equal tracks. That is right for the shop, where a row is always full, but WooCommerce prints the related block with however many products it found: with three, the cards filled tracks 1-3 and left two empty tracks worth of white space on the right, reading as "shoved to the left". The fix keeps the SAME card width as a full row and lets the row centre itself: the track size is stated explicitly (one fifth of the row minus its share of the gaps), auto-fit collapses the tracks no product occupies, and justify-content centres what is left. So five products look exactly as before, four and three centre, and no card is ever widened. The 0.5px shaved off each track absorbs sub-pixel rounding -- without it a row that computes to a hair over 100% fits only four tracks and a full row of five would wrap. ------------------------------------------------------------------------ */ body.tds-theme.woocommerce div.product .related.products ul.products, body.tds-theme.woocommerce div.product .up-sells ul.products, body.tds-theme.woocommerce-page div.product .related.products ul.products, body.tds-theme.woocommerce-page div.product .up-sells ul.products { --tds-rel-cols: var(--tds-cols-desktop); grid-template-columns: repeat( auto-fit, calc( (100% - (var(--tds-rel-cols) - 1) * var(--tds-card-gap)) / var(--tds-rel-cols) - 0.5px ) ); justify-content: center; } @media (max-width: 1399px) { body.tds-theme.woocommerce div.product .related.products ul.products, body.tds-theme.woocommerce div.product .up-sells ul.products, body.tds-theme.woocommerce-page div.product .related.products ul.products, body.tds-theme.woocommerce-page div.product .up-sells ul.products { --tds-rel-cols: var(--tds-cols-laptop); } } @media (max-width: 1023px) { body.tds-theme.woocommerce div.product .related.products ul.products, body.tds-theme.woocommerce div.product .up-sells ul.products, body.tds-theme.woocommerce-page div.product .related.products ul.products, body.tds-theme.woocommerce-page div.product .up-sells ul.products { --tds-rel-cols: var(--tds-cols-tablet); } } /* Phones keep two columns; the gap token changes there, so the track maths has to read the same value product-card.css uses. */ @media (max-width: 767px) { body.tds-theme.woocommerce div.product .related.products ul.products, body.tds-theme.woocommerce div.product .up-sells ul.products, body.tds-theme.woocommerce-page div.product .related.products ul.products, body.tds-theme.woocommerce-page div.product .up-sells ul.products { --tds-rel-cols: var(--tds-cols-mobile); --tds-card-gap: var(--tds-space-3); } } /* --- Previous / next product peek --------------------------------------- inc/single-product.php stops Storefront printing this nav at all, which is the actual fix: its links are position:fixed at left/right: -455px, so a 45px sliver of another product's thumbnail sat on both screen edges and no gallery containment could reach it. This rule is only a net for the case where a plugin or a Storefront update prints the same markup again. It is scoped to that one nav -- no page-level overflow is hidden anywhere in this theme. ------------------------------------------------------------------------ */ body.tds-theme .storefront-product-pagination { display: none; }