/* ====================================================================
   TheShopCart — Shop / Search Results Page styles
   Path: public/assets/css/shop.css
   Pairs with: views/pages/shop.php
   Loaded by: views/layout/header.php (after category.css / subcategory.css)

   Layout mirrors a familiar e-commerce shop pattern:
     - centered breadcrumb + H1
     - filter sidebar (left) with stacked cards
     - results bar + product grid (right)

   Visual language: same as the rest of the site.
     - Sharp corners (no border-radius)
     - #e4e6eb borders
     - #7a0f0f burgundy accent for active states
     - Filter card pattern echoes subcategory.css (slight duplication
       acknowledged — share via _filters.css in a future refactor).
   ==================================================================== */

/* --------------------------------------------------
   CENTERED HEADER BAND
-------------------------------------------------- */

.tsc-shop-header {
  text-align: center;
  margin: 0.5rem 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e4e6eb;
}

.tsc-shop-header__crumb {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.tsc-shop-header__crumb a {
  color: #6b7280;
  text-decoration: none;
}

.tsc-shop-header__crumb a:hover {
  color: #7a0f0f;
  text-decoration: underline;
}

.tsc-shop-header__title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111827;
}

/* --------------------------------------------------
   FILTER SIDEBAR
   Stacked cards with a consistent header / body pattern.
-------------------------------------------------- */

.tsc-shop-filters {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Filter card (same visual as subcategory.css's .tsc-filter-card;
   defined here too so shop.css works even if subcategory.css isn't loaded). */
.tsc-filter-card {
  border: 1px solid #e4e6eb;
  background: #f4f5f7;
}

.tsc-filter-card__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #e4e6eb;
  background: #ffffff;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tsc-filter-card__h .bi {
  font-size: 0.7rem;
  color: #6b7280;
}

.tsc-filter-card__b {
  padding: 0.75rem 0.85rem;
  font-size: 0.88rem;
  color: #1f2937;
}

/* Text-style list (used by Shop By Categories, Highlight, Price Filter,
   Average rating). Each row is a link with optional trailing count.
   The active row reads in burgundy. */
.tsc-filter-link-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.tsc-filter-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
  color: #4b5563;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tsc-filter-link-list a:hover,
.tsc-filter-link-list a.is-active {
  color: #7a0f0f;
}

.tsc-filter-link-list a .count {
  color: #9ca3af;
  font-size: 0.78rem;
  font-weight: 400;
}

.tsc-filter-link-list a.is-active .count {
  color: #7a0f0f;
}

.tsc-filter-link-list::-webkit-scrollbar {
  width: 6px;
}
.tsc-filter-link-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.tsc-filter-link-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Star ratings filter — small gold stars + count */
.tsc-filter-rating-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
  color: #4b5563;
  font-size: 0.85rem;
  text-decoration: none;
}

.tsc-filter-rating-list a:hover {
  color: #7a0f0f;
}

.tsc-filter-rating-list .stars {
  color: #fbbf24;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  line-height: 1;
}

.tsc-filter-rating-list .count {
  color: #9ca3af;
  font-size: 0.78rem;
}

/* --------------------------------------------------
   RESULTS BAR
   "Showing X–Y of Z results" + sort dropdown.
-------------------------------------------------- */

.tsc-shop-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.65rem 0.85rem;
  background: #f4f5f7;
  border: 1px solid #e4e6eb;
  font-size: 0.85rem;
}

.tsc-shop-results__count {
  color: #1f2937;
}

.tsc-shop-results__count strong {
  color: #111827;
  font-weight: 700;
}

.tsc-shop-results__sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tsc-shop-results__sort label {
  color: #6b7280;
  margin: 0;
}

.tsc-shop-results__select {
  padding: 0.35rem 0.55rem;
  border: 1px solid #e4e6eb;
  background: #ffffff;
  font-size: 0.85rem;
  color: #1f2937;
  border-radius: 0;
}

.tsc-shop-results__select:focus {
  outline: none;
  border-color: #7a0f0f;
  box-shadow: 0 0 0 2px rgba(122, 15, 15, 0.12);
}

/* --------------------------------------------------
   EMPTY STATE
   Shown when search returns nothing OR catalog is empty.
-------------------------------------------------- */

.tsc-shop-empty {
  background: #ffffff;
  border: 1px dashed #d1d5db;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #6b7280;
}

.tsc-shop-empty i {
  display: block;
  font-size: 2rem;
  color: #9ca3af;
  margin-bottom: 0.65rem;
}

.tsc-shop-empty strong {
  display: block;
  color: #111827;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.tsc-shop-empty a {
  color: #7a0f0f;
  text-decoration: none;
  font-weight: 600;
}

.tsc-shop-empty a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------
   MOBILE — filter sidebar collapses behind a button
-------------------------------------------------- */

.tsc-shop-filter-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid #e4e6eb;
  background: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  color: #111827;
  border-radius: 0;
}

.tsc-shop-filter-toggle i {
  color: #7a0f0f;
}

.tsc-shop-filter-toggle:hover {
  background: #f9fafb;
}

@media (max-width: 991.98px) {
  .tsc-shop-filters {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 992px) {
  .tsc-shop-filter-toggle {
    display: none;
  }
  /* Keep sidebar visible on lg+ regardless of Bootstrap .collapse state */
  .tsc-shop-filters.collapse:not(.show) {
    display: flex !important;
  }
}