/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* WooCommerce ships CSS that hides the product gallery (opacity:0) and a JS file
   that flips it back to 1 once FlexSlider/PhotoSwipe initialises. With heavy
   third-party JS on the page, that flip can take 4s+ — stalling LCP and leaving
   the gallery blank if any script is delayed. Force it visible up front. */
.woocommerce div.product div.images.woocommerce-product-gallery {
    opacity: 1 !important;
}

/* The product description accordion (#brxe-nhuujx) is set to "Expand item
   indexes: 0" in Bricks — but Bricks applies the .brx-open class via JS after
   page load instead of rendering it server-side. The first item's content
   (~2500px) snaps from display:none to display:block when JS runs, pushing
   the related-products section down and producing CLS ~0.3.
   Render the first item open from first paint. No !important, so the
   `.brx-open >` rule still wins on user toggle and click-to-close still works. */
#brxe-nhuujx > .brxe-block:first-child > .accordion-content-wrapper {
    display: block;
}

/* The Square/Afterpay placement widget (<square-placement> inside #brxe-qkbzvs)
   renders 0px tall on first paint — square-marketplace.js then injects the
   badge into its shadow DOM ~250ms later, expanding the wrapper to 70px and
   pushing the description + everything below it down. That's the residual
   ~0.24 CLS on #brxe-ktmsdp after the stock-status SSR fix.

   Reserve the 70px the widget will eventually occupy so the column is stable
   from first paint. Height matches data-size=md badge with the current Bricks
   block padding; revisit if the badge size or surrounding spacing changes. */
#brxe-qkbzvs {
    min-height: 70px;
}

/* Topbar brand stripe (CGD-Extended-Blaze.png 2001x171) renders ~164x14 in the
   header, but Bricks only sets max-width via a generated inline <style> block.
   Before that resolves the browser lays the image out at intrinsic aspect ratio
   against its 500px flex parent (~43px tall), then snaps to 14px once the rule
   applies — pushing the whole page down ~30px and producing CLS ~0.25 on
   product pages with tall right-column content. Lock both dimensions in
   render-blocking CSS so layout is stable from the first paint. The two
   media-query `display:none` rules Bricks generates for tablet/mobile still
   apply since `display` doesn't conflict with `width`/`height`. */
#brxe-jzpdfh {
    width: 164px;
    height: 14px;
}