/* ================================================================= 1. GLOBAL: Prevent horizontal overflow on ALL pages ================================================================= */ html { overflow-x: hidden; } body { overflow-x: hidden; max-width: 100vw; } #app, #main, .main { overflow-x: hidden; max-width: 100%; } /* Force width containment on main layout containers. Tailwind max-w-7xl (80rem) and max-w-2xl (42rem) only set a ceiling, but without width:100% the container can expand beyond the viewport if content is wider. */ .main > .mx-auto { width: 100%; box-sizing: border-box; } /* ================================================================= 2. GLOBAL: Neutralize body.flex on mobile/tablet The Tailwind 'flex' class on makes it display:flex with default flex-direction:row. We force column on non-desktop. ================================================================= */ @media (max-width: 1023px) { body.flex { flex-direction: column !important; } } /* ================================================================= 3. PDP: WooCommerce Product Gallery overrides WooCommerce sets opacity:0 and expects FlexSlider JS to reveal. Since we use a custom Tailwind gallery, force full visibility. ================================================================= */ .woocommerce-product-gallery { opacity: 1 !important; transition: none !important; width: 100% !important; float: none !important; max-width: 100% !important; } .woocommerce-product-gallery .flex { max-width: 100%; } /* ================================================================= 3b. PDP: Gallery thumbnail scrollbar - always visible macOS hides overlay scrollbars by default. Force visible scrollbar on the thumbnail strip for drag-scrolling. ================================================================= */ .woocommerce-product-gallery .whitespace-nowrap { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; } .woocommerce-product-gallery .whitespace-nowrap::-webkit-scrollbar { display: block; height: 6px; width: 6px; } .woocommerce-product-gallery .whitespace-nowrap::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 3px; } .woocommerce-product-gallery .whitespace-nowrap::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; } .woocommerce-product-gallery .whitespace-nowrap::-webkit-scrollbar-thumb:hover { background: #64748b; } /* ================================================================= 4. PDP: Image containment External images (CDN) may have intrinsic widths > viewport. ================================================================= */ #main-product-image, #main-image img, .gallery-thumbnail-img { max-width: 100% !important; } /* Desktop: product image should be large */ @media (min-width: 1024px) { #main-product-image { height: 35rem !important; width: auto !important; max-width: none !important; object-fit: contain; } #main-image { max-width: none; overflow: visible; } } /* Mobile: product image height auto */ @media (max-width: 1023px) { #main-product-image, #main-image img { height: auto !important; } #main-image { max-width: 100%; overflow: hidden; } } /* ================================================================= 4b. GLOBAL: Mobile menu categories full-height fix The

has h-full (100% of parent header which is only 64px). Despite position:fixed, the percentage height inherits from the containing block. We force 100vh and add overflow-y:auto so all categories are visible and scrollable. z-index 49 keeps the menu BELOW the header (z-50) and store bar (z-100) so the burger button remains clickable to close. padding-top offsets category list below the header area. ================================================================= */ #mobile-menu { height: calc(100vh - 120px) !important; top: 120px !important; overflow-y: auto !important; z-index: 49 !important; } /* ================================================================= 5. PDP: NUCLEAR MOBILE LAYOUT FIX (below lg: breakpoint) This is the critical section. On screens < 1024px (where Tailwind's lg: prefix is inactive), we force #single-product into a vertical stack and explicitly reset ALL grid/float/position properties on every child and descendant that could cause horizontal shift. ================================================================= */ @media (max-width: 1023px) { /* --- 5-pre. PDP container chain containment --- On mobile, force EVERY element between .main and #single-product to obey viewport width. DOM chain: .main > .mx-auto.max-w-7xl > .bg-white > .pb-16 > .mx-auto.max-w-2xl > #single-product Without this, intermediate divs expand to child intrinsic width (672px from max-w-2xl). */ .main > .mx-auto > *, .main > .mx-auto > * > *, .main > .mx-auto > * > * > * { max-width: 100% !important; overflow-x: hidden; } /* Override Tailwind max-w-2xl (42rem/672px) on mobile so the PDP content wrapper shrinks to viewport width */ .mx-auto.max-w-2xl { max-width: 100% !important; } /* --- 5a. Force #single-product to vertical flex stack --- */ #single-product { display: flex !important; flex-direction: column !important; overflow-x: hidden !important; max-width: 100% !important; /* Kill any residual grid properties */ grid-template-columns: none !important; grid-auto-rows: unset !important; gap: 0 !important; } /* --- 5b. Reset ALL direct children of #single-product --- Template has 4 children: 1. Product info (lg:col-start-8) 2. Gallery (lg:col-start-1, lg:row-start-1) 3. Mobile price (lg:hidden) 4. Product form (lg:col-span-5) Each must become a full-width block element. */ #single-product>div { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; clear: both !important; /* Explicitly nuke ALL grid positioning */ grid-column: auto !important; grid-column-start: auto !important; grid-column-end: auto !important; grid-row: auto !important; grid-row-start: auto !important; grid-row-end: auto !important; /* Reset order to DOM order */ order: unset !important; /* Prevent any transform/position shift */ transform: none !important; position: static !important; left: auto !important; right: auto !important; } /* --- 5c. Thumbnail strip containment --- */ .woocommerce-product-gallery .flex.flex-col-reverse { overflow: hidden; max-width: 100%; } /* --- 5d. CTA buttons full width --- */ #buy-online-button, #buy-in-store-button, .single_add_to_cart_button { max-width: 100% !important; white-space: normal !important; } /* --- 5e. Kill any WooCommerce product layout CSS --- WooCommerce targets .woocommerce div.product div.images and .woocommerce div.product div.summary with float+48% width. Even though our template doesn't use these classes, we add defensive rules in case of DOM injection by plugins. */ .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary { float: none !important; width: 100% !important; max-width: 100% !important; } } /* ================================================================= 6. GLOBAL: Text overflow prevention ================================================================= */ h1, h2, h3, h4, h5, h6, .product-price, .stock-status-container, .woocommerce-tabs span, .wc-block-checkout__shipping-method-option-title { word-wrap: break-word; overflow-wrap: break-word; } /* ================================================================= 7. GLOBAL: Nested padding fix The app layout wrapper (app.blade.php) provides px-4 padding. The PDP template (single-product.blade.php) adds another px-4 via div.mx-auto.max-w-2xl.px-4, nested 2 divs deep. We use a descendant selector (not direct-child >) to match regardless of intermediate wrapper divs. ================================================================= */ @media (max-width: 639px) { .main .mx-auto.max-w-2xl.px-4 { padding-left: 0; padding-right: 0; } } /* ================================================================= 8. PDP: WooCommerce tabs overflow ================================================================= */ .woocommerce-tabs { max-width: 100%; overflow-x: hidden; } .woocommerce-tabs .flex.items-center { word-break: break-word; } /* ================================================================= 9. GLOBAL: Admin bar + sticky header offset WordPress injects margin-top on for the admin bar. Sticky elements with top:0 overlap it. We offset them. WP uses 46px on mobile (<783px) and 32px on desktop (>=783px). ================================================================= */ @media (max-width: 782px) { .admin-bar .sticky.top-0 { top: 46px !important; } } @media (min-width: 783px) { .admin-bar .sticky.top-0 { top: 32px !important; } } /* ============================================================ LIGHTBOX: Fullscreen product image viewer with gallery nav ============================================================ */ #product-lightbox-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } #product-lightbox-overlay.lightbox-open { opacity: 1; pointer-events: auto; } #product-lightbox-overlay img { max-height: 90vh; max-width: 90vw; object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-drag: none; } .lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 2.5rem; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lightbox-btn:hover { background: rgba(255,255,255,0.3); } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 1.8rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lightbox-close:hover { background: rgba(255,255,255,0.3); } .lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.875rem; font-family: system-ui, sans-serif; } /* Cursor zoom-in on main product image */ #main-product-image { cursor: zoom-in; }