/** * Single product page. * * Two column summary (gallery left, details right), collapsible spec and * brochure panels, then full width Related Products and FAQ sections. */ :root { --rise-green: #145a3d; --rise-green-accent: #2da56e; --rise-green-dark: #0f3d2e; --rise-ink: #1a1a1a; --rise-muted: #6a7a70; --rise-line: #e3dbd1; --rise-cream: #fbf7ef; } /* ---------- Product gallery ---------- */ /* * NOTE: nothing here is scoped to a body class. header.php prints a bare * with no body_class(), so `body.single-product` never matches. This * stylesheet is only enqueued on single product pages, so the element * selectors are already specific enough. * * The theme sets width/height/margin on `.product img` with !important, so the * gallery image needs the same weight to fill its column. */ /* * Every main image sits in the same 4:3 frame, so products with portrait and * landscape photos still line up with the details column. `contain` means * nothing is ever cropped — the photo is letterboxed inside the frame instead. */ div.product .woocommerce-product-gallery__image, div.product .woocommerce-product-gallery__image > a { display: block; aspect-ratio: 4 / 3; line-height: 0; } /* style.css paints the slide `#dddd` with an 8px radius; with the card padding * gone that grey would show around the photo, so it is cleared. */ div.product .woocommerce-product-gallery__image { background: transparent; border-radius: 12px; } /* * min-height is reset because style.css sets `min-height: 300px !important` on * `.product_img12 .woocommerce-product-gallery__image img`, which would override * the frame height above. */ div.product .woocommerce-product-gallery__image img { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; border-radius: 12px; object-fit: contain !important; max-height: 100% !important; } /* * Hover zoom is turned off in PHP (see rise_single_product_setup). This is only * a safety net: if another plugin re-enables it, jQuery Zoom appends a * `.zoomImg` sized to the image's natural pixels with inline * `max-width/max-height: none`, which would break out of the frame above. The * rule above cannot catch it because the plugin sets those inline. */ div.product .woocommerce-product-gallery img.zoomImg { display: none !important; } /* * The gallery element also carries `.product_img12`, whose inline rule in * header.php wraps it in a 30px grey card. That inline