/* KOFC STOREUI DESKTOP LAYER 2026-07-27 (tag storeui) The Suha kit is mobile-only: its .container is hard-capped at 380-650px. This file makes the STORE pages (body.kofc-storeui-wide = shop/cart/checkout) genuinely wide at >=992px and gives ACCOUNT/misc pages (kofc-storeui-frame) a centered app frame. Below 992px NOTHING here applies - mobile stays pixel-faithful to the kit. Loads last in the storeui style chain. ASCII only. */ @media (min-width: 992px) { /* ----- Wide store pages: un-cap the kit containers ----- */ body.kofc-storeui-wide .container, body.kofc-storeui-wide .page-content-wrapper .container { max-width: 940px; } body.kofc-storeui-wide .header-area .container { max-width: 940px; } /* ----- App frame pages: unified with the wide container ladder (Jon 2026-07-28 ruling #2: 1140px+ on desktop; one container standard, two names). Below 992px the frame stays fluid with gutters. Only the frame container widens - checkout/account field widths are unchanged. */ body.kofc-storeui-frame .container, body.kofc-storeui-frame .page-content-wrapper .container, body.kofc-storeui-frame .header-area .container { max-width: 940px; } /* ITEM E (Jon 2026-07-29): event-schedule 114471 content renders in a qode grid row whose bounding CSS the cleanbase strip removes -> it ran full viewport on desktop while /member-profile/ caps at the frame ladder. Cap the calendar variant's content WRAPPER at the same ladder (940 here, 1040 from >=1200) so the two pages match. Chrome (header-area, tab bar) is outside .page-content-wrapper - unaffected. Below 992px nothing changes (kit-faithful mobile). */ body.kofc-storeui--calendar .page-content-wrapper { max-width: 940px; margin-left: auto; margin-right: auto; } /* Header/tab bar breathe a little on desktop */ body.kofc-storeui .header-area { height: 3.5rem; } body.kofc-storeui .page-content-wrapper { margin-top: 3.5rem; } body.kofc-storeui.admin-bar .header-area { top: 32px; } body.kofc-storeui.admin-bar .page-content-wrapper { margin-top: calc(3.5rem + 32px); } /* ----- Single product container: 2-col gallery + info; everything else (tabs, related, DTWPB blocks) spans full width below ----- */ body.kofc-storeui--product .kofc-product-wrap div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; align-items: start; padding: 1.5rem; } body.kofc-storeui--product .kofc-product-wrap div.product > .woocommerce-product-gallery, body.kofc-storeui--product .kofc-product-wrap div.product > .images { grid-column: 1; } body.kofc-storeui--product .kofc-product-wrap div.product > .summary { grid-column: 2; } body.kofc-storeui--product .kofc-product-wrap div.product > :not(.woocommerce-product-gallery):not(.images):not(.summary) { grid-column: 1 / -1; } /* sticky rails clear the fixed header AND the admin bar */ body.kofc-storeui.admin-bar .woocommerce .cart-collaterals, body.kofc-storeui.admin-bar .woocommerce form.checkout #order_review { top: calc(4.5rem + 32px); } /* ----- Shop grid: 3 columns ----- */ /* 2026-07-28 tweak (Jon desktop feedback): tighter gaps. gap 1rem->0.75rem, tile padding 1rem->0.85rem. Revert = restore the prior values. */ body.kofc-storeui .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } body.kofc-storeui .woocommerce ul.products li.product { padding: 0.85rem; } /* ----- Cart: 2-column (line items + sticky totals rail) ----- */ body.kofc-storeui--cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; } body.kofc-storeui--cart .woocommerce > .woocommerce-notices-wrapper, body.kofc-storeui--cart .woocommerce > .woocommerce-message, body.kofc-storeui--cart .woocommerce > .woocommerce-error, body.kofc-storeui--cart .woocommerce > .woocommerce-info { grid-column: 1 / -1; } body.kofc-storeui--cart .woocommerce form.woocommerce-cart-form { grid-column: 1; min-width: 0; } body.kofc-storeui--cart .woocommerce .cart-collaterals { grid-column: 2; position: sticky; top: 4.5rem; width: 100%; } body.kofc-storeui--cart .woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; } /* cleo v2 recommendation grids: the core re-homes them from cart_collaterals to woocommerce_after_cart on the cart variant, so they are DIRECT children of div.woocommerce - full-width rows below the items+totals columns. */ body.kofc-storeui--cart .woocommerce > .cleo-cart-cross-sells, body.kofc-storeui--cart .woocommerce > .cleo-cart-related-products { grid-column: 1 / -1; width: 100%; } /* any unplanned direct child spans full width rather than breaking the grid */ body.kofc-storeui--cart .woocommerce > :not(form.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; } /* ----- Checkout: 2-column (fields + sticky order review) ----- Row 1 is reserved for WC's AJAX validation NoticeGroup (checkout.js PREPENDS div.woocommerce-NoticeGroup-checkout inside form.checkout); row-gap 0 keeps the empty row free when there are no errors - vertical rhythm comes from element margins instead. */ body.kofc-storeui--checkout .woocommerce form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 2rem; align-items: start; } body.kofc-storeui--checkout .woocommerce form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1rem; } body.kofc-storeui--checkout .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 3 / span 2; min-width: 0; width: 100%; } body.kofc-storeui--checkout .woocommerce form.checkout #customer_details .col-1, body.kofc-storeui--checkout .woocommerce form.checkout #customer_details .col-2 { width: 100%; float: none; } body.kofc-storeui--checkout .woocommerce form.checkout #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; margin-bottom: 0.5rem; } body.kofc-storeui--checkout .woocommerce form.checkout #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 4.5rem; } body.kofc-storeui--checkout .woocommerce form.checkout #coupons_list { grid-column: 1; grid-row: 2; } /* plugin-injected form children never break the grid */ body.kofc-storeui--checkout .woocommerce form.checkout > :not(#customer_details):not(#order_review_heading):not(#order_review):not(.woocommerce-NoticeGroup):not(#coupons_list) { grid-column: 1 / -1; } /* two-up name/address rows inside billing */ body.kofc-storeui--checkout .woocommerce form .form-row-first, body.kofc-storeui--checkout .woocommerce form .form-row-last { width: 48.5%; float: left; } body.kofc-storeui--checkout .woocommerce form .form-row-last { float: right; } } /* CL2-A6 (2026-07-29): width split by page type. WIDE (shop/cart/checkout/ product) keeps the full ladder (1140/1320) - grids fill width and were not the complaint. FRAME (member/account/reading pages) caps at 1040px from >=1200 and never exceeds it above (single-column card stacks read best ~1000-1050; 1140 was the overcorrection). 940 @992 unchanged for both. */ @media (min-width: 1200px) { body.kofc-storeui-wide .container, body.kofc-storeui-wide .page-content-wrapper .container, body.kofc-storeui-wide .header-area .container { max-width: 1140px; } body.kofc-storeui-frame .container, body.kofc-storeui-frame .page-content-wrapper .container, body.kofc-storeui-frame .header-area .container { max-width: 1040px; } /* ITEM E: calendar content wrapper follows the frame ladder (see 992 block). */ body.kofc-storeui--calendar .page-content-wrapper { max-width: 1040px; } /* Shop grid: 4 columns */ body.kofc-storeui .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1400px) { body.kofc-storeui-wide .container, body.kofc-storeui-wide .page-content-wrapper .container, body.kofc-storeui-wide .header-area .container { max-width: 1320px; } }