/*
 * FSD Chrome Layout Fix - Plugin Stylesheet
 * Fixes front page layout in Chrome:
 *   1. Featured Bundles forced into 3-column flex row
 *   2. Horizontal page overflow clipped
 */

/* ================================================================
   FIX 1: Featured Bundles – Force 3-column flex row layout
   In Chrome the WooCommerce product template UL renders each item
   at ~48% width (wrapping), instead of the intended 33.33%.
   ================================================================ */

ul.wc-block-product-template.columns-3,
ul.wc-block-product-template__responsive.columns-3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.5em !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

ul.wc-block-product-template.columns-3 > li,
ul.wc-block-product-template__responsive.columns-3 > li {
    flex: 0 0 calc(33.333% - 1.5em) !important;
    max-width: calc(33.333% - 1.5em) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ================================================================
   FIX 2: Stop horizontal page overflow
   The "Featured Bundles" diagonal gradient background extends
   beyond 100vw in Chrome, causing a horizontal scrollbar.
   ================================================================ */

.wp-site-blocks {
    overflow-x: clip !important;
}

.wp-block-group.alignfull[class*="gutenify-section"],
.gutenify-section-342c0770-27a2-11ee-9113-49ce8869de8c {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.wp-block-group.alignfull {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ================================================================
   FIX 3: WooCommerce product collection container width guard
   ================================================================ */
.wp-block-woocommerce-product-collection.is-layout-flow,
.wp-block-woocommerce-product-collection-is-layout-flow {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}