/* TEMPORARY DISABLE SIDEBAR */
.catalog-sidebar{
  display: none !important;
}

.catalog-layout{
  display: block !important;
}



/* =========================================================
   Sidebar Layout (ENABLED now)
   - Works with existing styles.css
   - Fixes product-group max-width/padding inside grid
   - Adjusts product grid columns when sidebar is present
   ========================================================= */

/* Layout wrapper: sidebar + main */
.catalog-layout{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  /* Match your existing .product-group horizontal padding */
  padding: 0 20px;

  display: block; /* mobile default */
}

@media (min-width: 1024px){
  .catalog-layout{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
  }
}

/* Sidebar */
.catalog-sidebar{
  display: block;
}

@media (min-width: 1024px){
  .catalog-sidebar{
    position: sticky;
    top: 18px;
  }
}

/* Main content wrapper */
.catalog-main{
  min-width: 0;
}

/* =========================================================
   IMPORTANT OVERRIDES:
   Prevent nested max-width/margins from styles.css product-group
   ========================================================= */
.catalog-main .product-group{
  max-width: none;         /* cancel 1200px */
  margin: 18px 0 0 0;      /* cancel auto-centering */
  padding: 0;              /* cancel inner 20px padding */
}

/* =========================================================
   Grid columns tuning when sidebar is present:
   Use fewer columns because main area is narrower.
   ========================================================= */

/* Mobile remains 1 column via styles.css */

/* When sidebar layout becomes 2-column (>=1024px),
   keep product grid comfortable */
@media (min-width: 1024px){
  .catalog-main .products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px){
  .catalog-main .products{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px){
  .catalog-main .products{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================
   Sidebar card styling (basic; you will refine to match SVG)
   ========================================================= */
.sidebar-card{
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 18px;
}

.sidebar-head{ margin-bottom: 10px; }

.sidebar-title{
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 14px;
  margin: 0;
}

.sidebar-subtitle{
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

.sidebar-section{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.sidebar-section-title{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
  color: #222;
}

.sidebar-check{
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  color: #333;
}

.sidebar-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sidebar-input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fafafa;
}

.sidebar-actions{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.sidebar-btn{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: #4C0080;
  color: #fff;
  font-weight: 700;
  margin-top: 8px;
  cursor: not-allowed;
  opacity: .85;
}

.sidebar-btn.ghost{
  background: #eee;
  color: #222;
}