/* ========================================================================== Forsyths — Intrinsic Product Imagery: front-office presentation polish. Loads after theme.css (registerStylesheet priority) so these rules win without editing the designer's theme.css / custom.css. Pairs with the de-bordered (aspect-true) image files the module produces: once the white padding is gone, images keep their real shape, and this stylesheet makes that shape look intentional instead of loose. ========================================================================== */ /* 1. Page backdrop — DELIBERATELY LEAVE the theme's grey bg.webp texture alone. It's a theme-mandated element a colleague added; do NOT retire it. theme.css paints the tile on #wrapper/#header, so the body rule below is a harmless no-op (#wrapper covers body) — it does NOT remove the texture. Earlier this section tried to clear bg.webp on #wrapper/#header; that wiped the texture and was reverted. Don't "fix" the no-op into removing it again. */ body { background: #f7f7f8 !important; } /* -------------------------------------------------------------------------- 2. Product page cover — premium, intentional framing -------------------------------------------------------------------------- */ /* Cap the RENDERED long side (~350px) so tall covers don't dominate the page or force endless mobile scrolling. min(100%, 350px) also stops overflow on narrow screens. No rounded corners — book/score covers have their own edges. */ .images-container { text-align: center !important; } .product-cover { display: inline-block !important; margin-bottom: 1rem !important; } .product-cover img { width: auto !important; height: auto !important; max-width: min(100%, 350px) !important; /* Cap by viewport height so the cover scales to the screen and leaves room for the title/price/features. dvh accounts for mobile browser chrome; the vh line is a fallback for older engines. ~350px ceiling on desktop. */ max-height: min(350px, 38vh) !important; max-height: min(350px, 38dvh) !important; background: transparent !important; box-shadow: 0 4px 16px rgba(20, 20, 30, .12) !important; } /* Mobile gallery: hide the thumbnail strip so the NUMBER of images never shifts the title/price down the page. Multi-image products instead get swipe + a small row of dots overlaid on the cover (added by the module JS), so a 1-image and an 8-image product have the same footprint. Desktop is left exactly as the theme had it — there the strip sits in the image column beside the info, so it never pushes anything down. */ .fif-dots { display: none; } /* Dots are real