/* ==========================================================================
 * Mangwao Storefront Child — v1.2.37 (PDP remaining gaps + lightbox arrows)
 * Loads last (dependency: mangwao-135). Every rule below re-uses the exact
 * selector from mangwao-1.2.30.css / mangwao-1.2.33.css (the stylesheets
 * that actually render the PDP and the lightbox), so load order + equal
 * specificity guarantee the override. Nothing here touches content, font
 * sizes (except the lightbox arrow glyph, which is the fix itself),
 * colours of page content, the card, the header, the footer, or the
 * newsletter.
 *
 * Why: user screenshots (2026-10-25 21:37, desktop PDP, live 1.2.34)
 * circled three empty gaps in the buy-box and the barely-visible
 * lightbox prev/next arrows. NOTE: the screenshots are 1.2.34, so the
 * gaps 1.2.35 already tightened (breadcrumb, short-desc 22->16, Why box
 * 18->14, tabs, related) are NOT touched again here — only what remains
 * after 1.2.35. Pixel savings are CSS-value arithmetic, not a screen
 * measurement.
 * ========================================================================== */

/* --- Gap 1: stars/"(0 reviews)" line -> price --------------------------- */
/* Cause: .mg-pdp-rating margin-bottom 14px (1.2.30 line 82). The summary
   order is vendor line, title, rating, price — no element sits between
   rating and price, so this margin IS the gap. Was 14px -> 8px.
   Saves 6px. Title, stars and price sizes untouched. */
.mg-pdp-rating{margin:0 0 8px}

/* --- Gap 2: short description -> Add to cart row ------------------------ */
/* Cause: the short-description div margin-bottom (22px in 1.2.30 line 95,
   already 16px after 1.2.35) plus, when wpautop wraps the excerpt, the
   inner <p>'s own bottom margin stacking under it. Div 16px -> 10px,
   and a wrapped inner paragraph's last <p> loses its bottom margin so
   the div's margin alone sets the gap. Saves 6px (+ the inner <p>
   margin when present). Text size/line-height untouched. */
.single-product div.product .woocommerce-product-details__short-description{margin:0 0 10px}
.single-product div.product .woocommerce-product-details__short-description p:last-child{margin-bottom:0}

/* --- Gap 3: Add to cart row -> "Why You'll Love It" box ----------------- */
/* Cause: cart form margin-bottom 14px (1.2.30 line 102) + Why box
   margin-top 14px (after 1.2.35; was 18px in 1.2.30 line 128) = 28px of
   air. The wishlist button lives INSIDE the form, so nothing else sits
   between. Form 14px -> 8px, Why box 14px -> 10px (its padding stays
   14px 16px from 1.2.35). Saves 10px. */
.single-product form.cart{margin-bottom:8px}
.mg-love{margin:10px 0}

/* --- Lightbox prev/next arrows: clearly visible ------------------------ */
/* Was (1.2.33 line 18): 40px white glyph in a 52px circle with only 15%
   white background — nearly invisible against the dark overlay and
   against light image areas, which is exactly what screenshot 2 shows.
   Now: fully opaque white 48px glyph in a 60px dark semi-opaque circle
   (rgba(0,0,0,.55)), flex-centred so the glyph sits dead-centre. The
   circle reads on dark overlay AND on light images. The Close (x)
   button is NOT touched — it already reads clearly. */
#mgLightbox .mg-lb-prev,#mgLightbox .mg-lb-next{background:rgba(0,0,0,.55);color:#fff;opacity:1;font-size:48px;width:60px;height:60px;display:flex;align-items:center;justify-content:center}