. So the grid rule in main.css (.woocommerce-account { display:grid; grid-template-columns:280px 1fr }) matches BOTH the and the inner

, turning the ENTIRE page (header, breadcrumbs, content, footer) into a 2-column grid. Resetting display on the body confines the grid to the inner wrapper. ============================================ */ body.woocommerce-account { display: block !important; } /* ============================================ MY ACCOUNT — .woocommerce WRAPPER RESET WooCommerce wraps account content in

. woocommerce-layout.css (loaded by the WC plugin regardless of woocommerce_enqueue_styles) applies max-width, float and clearfix rules to .woocommerce that shrink it away from full container width. These rules make it a neutral, full-width pass-through container so the .woocommerce-account grid (280px + 1fr) can use the full .container width without interference. woocommerce-layout.css also sets: .woocommerce-account .woocommerce-MyAccount-navigation { float:left; width:30% } .woocommerce-account .woocommerce-MyAccount-content { float:right; width:68% } These floats override our CSS grid. Reset them here. ============================================ */ .woocommerce-account .woocommerce { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; display: block !important; } .woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after { display: none !important; } /* Cancel the float-based layout from woocommerce-layout.css so our CSS grid (defined in main.css) takes full control. */ .woocommerce-account .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; } .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; } /* ============================================ BREADCRUMBS ============================================ */ .woocommerce-breadcrumb { padding: var(--spacing-sm) 0; font-size: var(--font-size-sm); color: var(--color-gray-500); margin-bottom: var(--spacing-md); } .woocommerce-breadcrumb a { color: var(--color-gray-500); text-decoration: none; transition: color 0.3s ease; } .woocommerce-breadcrumb a:hover { color: var(--color-primary); } .woocommerce-breadcrumb .breadcrumb-separator { margin: 0 var(--spacing-xs); color: var(--color-gray-400); } /* ============================================ PAGINATION ============================================ */ .woocommerce nav.woocommerce-pagination { margin-top: var(--spacing-xl); } .woocommerce nav.woocommerce-pagination ul { display: flex; gap: var(--spacing-xs); justify-content: center; list-style: none; padding: 0; } .woocommerce nav.woocommerce-pagination ul li { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); transition: all 0.3s ease; } .woocommerce nav.woocommerce-pagination ul li.active, .woocommerce nav.woocommerce-pagination ul li:hover { background: var(--gradient-primary); color: var(--color-white); border-color: transparent; } /* Pagination current page */ .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--gradient-primary); color: var(--color-white); border-color: transparent; } /* ============================================ RESPONSIVE — Products & Gallery ============================================ */ /* NOTE: .product-grid responsive rules are in main.css */ @media (max-width: 1024px) { .product-single { grid-template-columns: 1fr; gap: var(--spacing-xl); } .product-gallery__main { aspect-ratio: 4/3; } } @media (max-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } .product-single { gap: var(--spacing-lg); } .product-info__title { font-size: var(--font-size-2xl); } .product-info__price { font-size: var(--font-size-2xl); } .product-actions { flex-direction: column; } .product-actions .btn { width: 100%; } .product-tabs__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .product-tabs__tab { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); white-space: nowrap; } /* NOTE: .product-grid responsive rules are in main.css */ .product-card__body { padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); } .product-card__title { font-size: var(--font-size-sm); } .product-card__price { font-size: var(--font-size-lg); } .product-card__short-desc { display: none; } .product-card__add-to-cart { width: 34px; height: 34px; } .product-card__add-to-cart svg { width: 15px; height: 15px; } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } /* NOTE: .product-grid responsive rules are in main.css */ }