/* Shop Base Styles */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}

@media (max-width: 991px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
}

h2.body-title {
    font-size: 28px !important;   /* change size */
    color: #333333 !important;    /* change color */
    font-weight: bold !important; /* optional */
    text-align: center;/* keep center if needed */
}

#product-section h2.body-title {
    font-size: 30px;
    color: #ff6600;
}


.filter-sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 20px;
  height: fit-content;
}

.filter-section + .filter-section {
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 15px;
}

.filter-title {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #333;
  margin-bottom: 10px;
}

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 15px 20px;
  margin-bottom: 20px;
}

#product-data.grid-view .col-item {
  width: 100%;
}

@media (min-width: 576px) {
  #product-data.grid-view .col-item {
    width: 50%;
  }
}

@media (min-width: 768px) {
  #product-data.grid-view .col-item {
    width: 33.333%;
  }
}

@media (min-width: 992px) {
  #product-data.grid-view .col-item {
    width: 25%;
  }
}

@media (min-width: 1200px) {
  #product-data.grid-view .col-item {
    width: 20%;
  }
}

#product-data.list-view .col-item {
  width: 100%;
}

#product-data {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#loading-indicator .spinner-border {
  width: 2rem;
  height: 2rem;
}

#no-results {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}


  /* Layout */
  .shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
  @media (max-width: 991px){ .shop-layout { grid-template-columns: 1fr; } }
  
  /* Sidebar */
  .filter-sidebar {
    position: sticky; top: 120px; align-self: start;
    background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.06);
    padding: 20px;
    height: fit-content;
  }
  .filter-section + .filter-section { border-top: 1px solid #eee; margin-top: 15px; padding-top: 15px; }
  .filter-title { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #333; margin-bottom: 10px; }
  .chip { display:inline-block; padding:6px 12px; border:1px solid #e9ecef; border-radius: 20px; font-size: 12px; margin: 4px 6px 0 0; cursor: pointer; user-select:none; transition: all 0.2s; }
  .chip:hover { background-color: #f8f9fa; }
  .chip.active { background:#0d6efd; color:#fff; border-color:#0d6efd; }
  
  /* Top bar */
  .results-bar {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:15px 20px; margin-bottom:20px;
  }
  
  /* Grid & list */
  #product-data.grid-view .col-item { width:100%; }
  @media (min-width: 576px){ #product-data.grid-view .col-item{ width:80%; } }
  @media (min-width: 768px){ #product-data.grid-view .col-item{ width:33.333%; } }
  @media (min-width: 992px){ #product-data.grid-view .col-item{ width:25%; } }
  @media (min-width: 1200px){ #product-data.grid-view .col-item{ width:20%; } }
  
  #product-data.list-view .col-item{ width:100%; }
  #product-data { display:flex; flex-wrap:wrap; gap:20px; }
  
  /* Card */
  .p-card {
    background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 10px 30px rgba(0,0,0,.08); transition:all 0.3s ease;
    height:100%;
  }
  .p-card:hover { transform: translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,.15); }
  .p-media { position:relative; aspect-ratio: 1; background:#f8f9fa; overflow:hidden; }
  .p-media img { width:100%; height:100%; object-fit:cover; display:block; transition: opacity 0.3s ease; }
  .p-media img.hover { position:absolute; inset:0; opacity:0; }
  .p-card:hover .p-media img.hover { opacity:1; }
  .p-body { padding:15px; display:flex; flex-direction:column; flex-grow:1; }
  .p-name { font-size:14px; font-weight:600; line-height:1.4; min-height:40px; margin-bottom:8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .p-meta { font-size:12px; color:#6c757d; margin-bottom:10px; }
  .p-price { font-size:18px; font-weight:700; margin-bottom:15px; color:#0d6efd; }
  .p-actions { display:flex; gap:8px; margin-top:auto; }
  .btn-soft { border-radius:8px; border:1px solid #e9ecef; background:#fff; padding:8px 12px; font-size:12px; transition: all 0.2s; }
  .btn-soft:hover { background:#f8f9fa; border-color:#dee2e6; }
  .btn-primary { border-radius:8px; padding:8px 12px; font-size:12px; }
  .badge-cat { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.7); color:#fff; padding:4px 8px; border-radius:12px; font-size:11px; z-index:1; }
  
  /* List view tweaks */
  #product-data.list-view .p-card{ flex-direction:row; }
  #product-data.list-view .p-media{ width:400px; flex:0 0 200px; aspect-ratio:auto; height: 200px; }
  #product-data.list-view .p-body{ padding:20px; flex:1; }
  
  /* Loading */
  #loading-indicator .spinner-border{ width: 2rem; height: 2rem; }
  
  /* Form controls */
  .form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .form-control:focus, .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  
  /* Buttons */
  .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
  }
  
  .btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
  }
  
  .btn-light {
    background-color: #f8f9fa;
    border-color: #dee2e6;
  }
  
  .btn-light:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
  }
  
  /* No results */
  #no-results {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
  }