/* ================================================= */ /* SURGICAL FIX — MAIN IMAGE + ARROWS ALIGNMENT ONLY */ /* ================================================= */ /* 1. Stop Squarespace from shifting slides around */ .product-gallery-slides-item { position: relative !important; transform: none !important; inset: auto !important; top: auto !important; left: auto !important; } /* 2. Fix inline object-fit override on main image */ .product-gallery-slides-item-image { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } /* 3. Ensure slides wrapper centers content */ .product-gallery-scroll, .product-gallery-slides { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; } /* 4. Anchor arrows relative to gallery, not page */ .product-gallery { position: relative !important; } /* 5. Vertically center arrows to image */ .product-gallery-carousel-control { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 20 !important; } /* Left arrow */ .product-gallery-prev { left: 12px !important; } /* Right arrow */ .product-gallery-next { right: 12px !important; } /* 6. Keep thumbnails visually aligned */ .product-gallery-thumbnails { margin-top: 16px !important; justify-content: center !important; } /* ============================================== */ /* FINAL FIX — RESTORE GALLERY STACKING PROPERLY */ /* ============================================== */ /* Force gallery to stack elements vertically */ .product-gallery-scroll { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } /* Slides area — full width, centered */ .product-gallery-slides { width: 100% !important; display: block !important; margin: 0 auto !important; } /* Individual slide */ .product-gallery-slides-item { width: 100% !important; margin: 0 auto !important; } /* Thumbnails MUST sit below slides */ .product-gallery-thumbnails { order: 2 !important; width: 100% !important; margin-top: 16px !important; display: flex !important; justify-content: center !important; flex-wrap: wrap !important; } /* Ensure slides stay above thumbnails */ .product-gallery-slides { order: 1 !important; }