.catalog-filter {
  position: relative;
  overflow: hidden;
  padding: 1.35rem;
  border: 1px solid var(--ref-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(239, 50, 58, .09), transparent 30%),
    linear-gradient(145deg, #fff, var(--ref-soft));
  box-shadow: 0 18px 55px rgba(27, 35, 51, .07);
}
.catalog-filter::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.4rem; bottom: 1.4rem; width: 3px; border-radius: 10px; background: var(--ref-red); }
.catalog-filter-heading, .catalog-filter-primary, .catalog-filter-secondary, .catalog-results-heading { display: flex; align-items: center; }
.catalog-filter-heading { justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.catalog-filter-kicker { display: block; margin-bottom: .2rem; color: var(--ref-red); font-size: .74rem; font-weight: 800; }
.catalog-filter-heading h2 { margin: 0; font-size: 1.08rem; font-weight: 800; }
.filter-reset { display: inline-flex; align-items: center; gap: .4rem; color: var(--ref-muted); font-size: .78rem; text-decoration: none; }
.filter-reset span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--ref-red); }
.catalog-filter-primary { display: grid; grid-template-columns: minmax(260px, 1.5fr) minmax(180px, .8fr) minmax(190px, .8fr); gap: .8rem; }
.filter-field > span, .price-range-title { display: block; margin-bottom: .38rem; color: #505667; font-size: .72rem; font-weight: 700; }
.filter-field > span i { margin-inline-end: .35rem; color: var(--ref-red); }
.filter-field .form-control, .filter-field .form-select, .price-range .form-control { min-height: 45px; border-color: #e3e6eb; border-radius: 10px; background-color: rgba(255,255,255,.9); }
.catalog-filter-secondary { align-items: end; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #dfe2e8; }
.availability-filter { flex: 1 1 auto; min-width: 0; margin: 0; }
.availability-filter legend { float: none; width: auto; margin: 0 0 .38rem; color: #505667; font-size: .72rem; font-weight: 700; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-chips label { cursor: pointer; }
.filter-chips input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chips span { display: inline-flex; align-items: center; gap: .35rem; min-height: 41px; padding: .55rem .8rem; border: 1px solid #e1e4e9; border-radius: 10px; color: #555b68; background: #fff; font-size: .76rem; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.filter-chips span:hover { transform: translateY(-1px); border-color: #f3a4a8; }
.filter-chips input:checked + span { border-color: rgba(239,50,58,.28); color: var(--ref-red); background: rgba(239,50,58,.08); box-shadow: inset 0 0 0 1px rgba(239,50,58,.07); }
.price-range { flex: 0 0 310px; }
.price-range-title small { color: var(--ref-red); }
.price-range > div { display: flex; align-items: center; gap: .45rem; }
.price-range label { position: relative; flex: 1; }
.price-range label span { position: absolute; inset-inline-start: .65rem; top: 50%; z-index: 1; color: var(--ref-muted); font-size: .68rem; transform: translateY(-50%); }
.price-range .form-control { padding-inline-start: 2.2rem; }
.price-range > div > i { color: #a3a8b3; }
.filter-submit { min-height: 45px; padding-inline: 1.25rem; white-space: nowrap; border-radius: 10px; }
.filter-submit i { margin-inline-end: .35rem; }
.catalog-results-heading { justify-content: space-between; gap: 1rem; margin: 1.5rem 0 .8rem; }
.catalog-results-heading > div { display: flex; align-items: baseline; gap: .4rem; }
.catalog-results-heading strong { color: var(--ref-red); font-size: 1.35rem; }
.catalog-results-heading span, .catalog-results-heading small { color: var(--ref-muted); font-size: .78rem; }
.catalog-grid { margin-top: 0; }
.catalog-empty { padding: 4rem 1rem; border: 1px dashed #d9dde5; border-radius: 18px; text-align: center; background: #fbfcfe; }
.catalog-empty > span { display: grid; width: 68px; height: 68px; margin: 0 auto 1rem; place-items: center; border-radius: 20px; color: var(--ref-red); background: rgba(239,50,58,.08); font-size: 1.55rem; }
.catalog-empty h2 { font-size: 1.15rem; font-weight: 800; }
.catalog-empty p { color: var(--ref-muted); }
.product-card .project-card-media { height: 210px; }
.product-card .project-card-media img, .product-showcase > img { padding: 0; object-fit: cover; background: #e9edf0; }
.product-card .product-status { border: 1px solid rgba(255,255,255,.6); }
.product-card .product-status.available { background: #198754; }
.product-card .product-status.inquiry { background: #e66b18; }
.product-card .product-status.unavailable { background: #5c6270; }
.product-price { display: flex; align-items: baseline; gap: .4rem; min-height: 42px; margin-top: auto; padding: .9rem 0; color: var(--ref-red); }
.product-price strong { font-size: 1.2rem; }
.product-price span { color: var(--ref-muted); font-size: .75rem; }
.product-detail-price { display: flex; align-items: baseline; gap: .5rem; margin: 1.5rem 0; color: var(--ref-red); }
.product-detail-price strong { font-size: 2rem; font-weight: 800; }
.quantity-input { max-width: 90px; }
.cart-total { display: flex; justify-content: space-between; margin-top: 1rem; padding: 1.2rem; border-radius: 10px; color: #fff; background: #242529; }
.products-home { border-top: 0 !important; }
@media (max-width: 991.98px) {
  .catalog-filter-primary { grid-template-columns: 1fr 1fr; }
  .filter-search { grid-column: 1 / -1; }
  .catalog-filter-secondary { flex-wrap: wrap; }
  .availability-filter { flex-basis: 100%; }
  .price-range { flex: 1 1 310px; }
}
@media (max-width: 575.98px) {
  .catalog-filter { padding: 1rem; border-radius: 14px; }
  .catalog-filter-heading { align-items: flex-start; }
  .catalog-filter-heading h2 { font-size: .95rem; }
  .catalog-filter-primary { grid-template-columns: 1fr; }
  .filter-search { grid-column: auto; }
  .catalog-filter-secondary { align-items: stretch; }
  .filter-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-chips span { justify-content: center; width: 100%; }
  .price-range { flex-basis: 100%; }
  .filter-submit { width: 100%; }
  .catalog-results-heading { align-items: flex-start; }
  .catalog-results-heading small { max-width: 55%; text-align: end; }
}