/* --- All Products Page Specific Layout (Three-Column Grid) --- */ :root { --white: #ffffff; --border-color: #e9ecef; /* Variables pulled from style.css: --primary-green, --primary-orange, --dark-blue */ } .all-products-container { max-width: 1400px; /* FIX 1: Reduced margin at the top to close space below the main header */ margin: 100px auto 50px; padding: 0 20px; } .product-stats-grid { display: grid; /* FIX 2: Restructured Grid to two columns: Stats Sidebar | Main Content Column */ grid-template-columns: 260px 1fr; gap: 30px; /* We remove this fixed height. The main scroll will now be handled by the */ height: auto; } /* --- Shared Sidebar & Scrolling Styles --- */ /* The main content area will no longer scroll independently, so we modify its styles */ .all-products-content, .news-sidebar { background-color: var(--white); padding: 20px; border-radius: 12px; box-shadow: var(--shadow); /* Remove independent scrolling properties */ overflow-y: visible; height: auto; } /* Isolate the Stats Sidebar and make it sticky and independently scrollable */ .stats-sidebar { background-color: var(--white); padding: 20px; border-radius: 12px; box-shadow: var(--shadow); overflow-y: auto; /* Retain scroll for internal content */ height: calc(100vh - 120px); /* Fixed height for sticky behaviour */ position: sticky; top: 100px; /* Position below main header */ } /* The custom-scrollbar class is only needed for the sticky stats-sidebar now */ .custom-scrollbar::-webkit-scrollbar { width: 6px; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #d1d1d1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-track { background-color: transparent; } /* Group the Main Content and News Bar into a single layout column */ .main-content-group { display: grid; /* 1fr (Product Grid) | 300px (News Bar) */ grid-template-columns: 1fr 300px; gap: 30px; /*FIX 5: Crucial adjustment. Remove margin/padding that caused vertical misalignment. */ padding: 0; margin: 0; } /* Ensure sidebar headers stick to the top of their scroll container */ .sidebar-header h3 { color: var(--dark-blue); font-size: 1.4em; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color); position: sticky; top: -20px; background: var(--white); z-index: 10; } /* FIX 6: Reduced padding-top to close space, making the main content and news start flush with the stats sidebar */ .stats-sidebar, .all-products-content, .news-sidebar { padding-top: 20px; } /* --- Left Sidebar (Stats) Styles (Minimal changes from last version) --- */ .stats-tabs-nav { display: flex; flex-direction: column; margin-bottom: 25px; } .tab-button { background-color: var(--light-grey); border: none; padding: 12px; text-align: left; font-size: 0.95em; font-weight: 500; cursor: pointer; border-radius: 6px; margin-bottom: 5px; color: #555; transition: all 0.2s ease; } .tab-button.active { background-color: var(--primary-green); color: white; box-shadow: 0 3px 10px rgba(42, 157, 143, 0.3); } .tab-content { display: none; padding: 15px 0; } .tab-content.active { display: block; } .tab-content h4 { color: var(--primary-orange); margin-bottom: 15px; font-size: 1.1em; } .stat-product-card { display: flex; align-items: center; gap: 15px; background-color: var(--light-grey); padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .stat-product-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; } .stat-name { font-weight: 600; color: var(--dark-blue); margin-bottom: 5px; } .stat-value { font-size: 1.1em; color: var(--primary-green); margin-bottom: 5px; } /* --- Middle Content (Categorized Product Grid) --- */ .all-products-content { /* Styles are defined in the shared block above */ } .page-header { /* Ensures the header sticks to the top of the content island */ position: sticky; top: -20px; background: var(--white); z-index: 10; padding-top: 20px; padding-bottom: 15px; border-bottom: 2px solid var(--border-color); margin-bottom: 25px; display: flex; justify-content: space-between; align-items: flex-end; } .page-header h2 { margin: 0; font-size: 1.8em; } /* Category Grouping Header */ .category-product-group { margin-bottom: 40px; } .category-header { color: var(--dark-blue); font-size: 1.5em; font-weight: 700; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px dashed var(--border-color); } /* --- News & Updates (Now stacked below the Product Content) --- */ .news-sidebar { /* Styles are defined in the shared block above */ } .news-feed { display: flex; flex-direction: column; gap: 20px; } .news-item { background-color: var(--white); padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .news-brand { display: flex; align-items: center; margin-bottom: 10px; font-weight: 600; } .news-brand i { margin-right: 8px; font-size: 1.1em; } .news-image { width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; } .news-title { font-weight: 700; color: var(--dark-blue); margin-bottom: 5px; } .news-text { font-size: 0.9em; color: #555; margin-bottom: 10px; } .news-time { font-size: 0.8em; color: #999; } /* --- Responsive Adjustments (Mobile/Tablet) --- */ @media (max-width: 1200px) { .product-stats-grid { /* FIX: Stack all three columns on medium screens */ grid-template-columns: 1fr; } .stats-sidebar { height: auto; position: static; overflow-y: visible; } .main-content-group { /* When stacked, the product content and news are still stacked vertically */ grid-template-columns: 1fr; /* This line is now redundant but safe */ } } @media (max-width: 900px) { .product-stats-grid { grid-template-columns: 1fr; gap: 20px; } .main-content-group { grid-template-columns: 1fr; gap: 20px; } .stats-sidebar, .all-products-content, .news-sidebar { overflow-y: visible; height: auto; } .page-header, .sidebar-header h3 { position: static; padding-top: 0; } }