/* Banner */
.banner-slider {
  position: relative;
  width: 100vw; /* full width of viewport */
  max-width: 100%; /* prevent overflow */
  aspect-ratio: 1920/600;
  overflow: hidden;
  background: #f5f5f5;
}
.banner-slide { 
  position: absolute; 
  inset: 0; 
  background-size: cover; 
  background-position: center; 
  opacity: 0; 
  transition: opacity 1s ease; 
}
.banner-slide.active { opacity: 1; }

/* Layout */
.products-gallery-wrapper { 
  width:100vw;
  max-width: 100%; 
  margin: 24px auto; 
  padding: 0 16px; 
}
.pg-inner { 
  display: flex; 
  gap: 24px; 
  align-items: flex-start; 
}

/* Sidebar */
.pg-sidebar { 
  position: sticky; 
  top: 80px; 
  left: 0; 
  background: #f9f9f9; 
  border-right: 1px solid #ddd; 
  width: 240px; 
  min-height: auto; 
  padding: 16px; 
  box-sizing: border-box; 
  transition: all .25s; 
  z-index: 10; 
  flex-shrink: 0; /* prevents sidebar from shrinking */
}
.pg-sidebar-header { display:flex; justify-content:space-between; align-items:center; }
.pg-toggle-btn { background:none; border:0; cursor:pointer; font-size:1.2rem }
.pg-cat-list { list-style:none; padding:0; margin:12px 0 0; }
.pg-cat-list li { margin-bottom:10px; }
.pg-cat-link { color:#333; text-decoration:none; display:block; padding:6px 8px; border-radius:6px; }
.pg-cat-link.active, .pg-cat-link:hover { background:#eaf6ff; color:#003e66; }

/* Folded state */
.pg-sidebar.folded { width:60px; padding:12px 8px; overflow:hidden; }
.pg-sidebar.folded h4, .pg-sidebar.folded .pg-cat-list { display:none; }

/* Products grid */
.pg-products { flex:1 1 auto; }
.pg-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
.pg-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.06); transition:transform .18s; }
.pg-card:hover { transform:translateY(-6px); }
.pg-thumb img { width:100%; height:180px; object-fit:cover; display:block; }
.pg-info { padding:12px; }
.pg-title { margin:0 0 8px; font-size:1.05rem; }
.pg-desc { color:#444; font-size:.95rem; line-height:1.6; }

/* Pagination */
.pg-pagination { margin-top:18px; text-align:center; }
.pg-pagination ul { display:inline-flex; gap:8px; list-style:none; padding:0; margin:0; }
.pg-pagination li a, .pg-pagination li span { padding:8px 12px; border-radius:6px; background:#f3f7fb; color:#036; text-decoration:none; }
.pg-pagination .current { background:#036; color:#fff; }

/* Responsive */
@media (max-width:1024px) {
  .pg-inner { flex-direction: column; }
  .pg-sidebar { width:100%; position:relative; top:0; border-right:none; border-bottom:1px solid #ddd; }
  .pg-sidebar.folded { width:100%; }
}

@media (max-width:768px) {
  .pg-grid { grid-template-columns: 1fr; }
  .banner-slider { aspect-ratio: 16/9; }
}