/* =====================================================================
   Shop filter panel (sidebar on desktop, slide-in drawer on phones)
   ===================================================================== */
.filter-panel { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 6px 24px rgba(17, 17, 44, .05); overflow: hidden; position: sticky; top: 110px; margin-bottom: 30px; }
.filter-panel .filter-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.filter-panel .filter-head h2 { font-size: 18px; margin: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
.filter-panel .filter-head h2 i { color: var(--theme); font-size: 16px; }
.filter-clear { font-size: 13px; font-weight: 600; color: var(--theme); }
.filter-clear:hover { text-decoration: underline; color: var(--theme); }
.filter-close { background: var(--bg); border: 0; width: 34px; height: 34px; border-radius: 50%; color: var(--header); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 0; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); color: #c6493a; font-size: 13px; font-weight: 600; padding: 5px 10px 5px 12px; border-radius: 100px; }
.filter-chip i { font-size: 11px; opacity: .7; }
.filter-chip:hover { background: var(--theme); color: #fff; }

.filter-block { padding: 16px 20px; border-bottom: 1px solid var(--border); margin: 0; }
.filter-block > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--header); user-select: none; }
.filter-block > summary::-webkit-details-marker { display: none; }
.filter-block > summary::after { content: "\f107"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: 14px; color: var(--text); transition: transform .2s; }
.filter-block[open] > summary { margin-bottom: 12px; }
.filter-block[open] > summary::after { transform: rotate(180deg); }

.filter-search { position: relative; }
.filter-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text); font-size: 14px; }
.filter-search input { width: 100%; border: 1px solid var(--border); background: #fafafa; border-radius: 12px; padding: 11px 14px 11px 38px; font-size: 14px; outline: none; transition: border-color .2s, background .2s; }
.filter-search input:focus { border-color: var(--theme); background: #fff; }

.filter-cats, .filter-cats ul { list-style: none; margin: 0; padding: 0; }
.filter-cats li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; color: var(--header); font-size: 15px; font-weight: 500; transition: background .15s, color .15s; }
.filter-cats li a em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text); background: #f3f3f6; min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 100px; }
.filter-cats li a:hover { background: #fff6f5; color: #c6493a; }
.filter-cats li.active > a { background: var(--bg); color: #c6493a; font-weight: 700; }
.filter-cats li.active > a em { background: var(--theme); color: #fff; }
.filter-cats li.empty > a { color: #b5b5bd; }
.filter-cats ul { margin: 2px 0 6px 12px; padding-left: 10px; border-left: 2px solid #f0f0f3; }
.filter-cats ul li a { font-size: 14px; padding: 5px 10px; }

.filter-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.filter-select + .filter-label { margin-top: 12px; }
.filter-select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-radius: 12px; padding: 11px 38px 11px 14px; font-size: 14px; color: var(--header); background: #fafafa url("../img/chevron-down.svg") no-repeat right 14px center / 11px; outline: none; cursor: pointer; }
.filter-select:focus { border-color: var(--theme); background-color: #fff; }

.filter-price { display: flex; align-items: center; gap: 8px; }
.filter-price label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; background: #fafafa; margin: 0; }
.filter-price label:focus-within { border-color: var(--theme); background: #fff; }
.filter-price label span { color: var(--text); font-size: 14px; }
.filter-price input { border: 0; background: transparent; outline: none; width: 100%; min-width: 0; padding: 10px 0; font-size: 14px; -moz-appearance: textfield; }
.filter-price input::-webkit-outer-spin-button, .filter-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-price i { font-style: normal; font-size: 13px; color: var(--text); }
.filter-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.filter-presets a { font-size: 12px; font-weight: 600; color: var(--header); border: 1px solid var(--border); border-radius: 100px; padding: 5px 11px; transition: all .15s; }
.filter-presets a:hover, .filter-presets a.on { border-color: var(--theme); color: #c6493a; background: #fff6f5; }

.filter-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; margin: 0; cursor: pointer; font-size: 15px; color: var(--header); position: relative; }
.filter-switch input { position: absolute; opacity: 0; pointer-events: none; }
.filter-switch i { position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 100px; background: #dcdce3; transition: background .2s; }
.filter-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.filter-switch input:checked + i { background: var(--theme); }
.filter-switch input:checked + i::after { transform: translateX(18px); }
.filter-switch input:focus-visible + i { outline: 2px solid var(--theme); outline-offset: 2px; }

.filter-rating { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-rating label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--header); border: 1px solid var(--border); border-radius: 100px; padding: 6px 12px; margin: 0; cursor: pointer; transition: all .15s; position: relative; }
.filter-rating label i { color: #FFB800; font-size: 11px; }
.filter-rating label input { position: absolute; opacity: 0; pointer-events: none; }
.filter-rating label.on, .filter-rating label:hover { border-color: var(--theme); background: #fff6f5; color: #c6493a; }

.filter-actions { padding: 16px 20px 20px; background: #fff; }
.filter-actions .theme-btn { padding: 14px 20px; }
.filter-overlay { display: none; }
.filter-toggle-btn .count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 100px; background: var(--theme); color: #fff; font-size: 11px; margin-left: 4px; }

@media (min-width: 992px) {
  .filter-panel { max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: thin; }
  .filter-actions { position: sticky; bottom: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 991px) {
  .main-sidebar.filter-panel { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); max-height: none; z-index: 1060; border-radius: 0 18px 18px 0; margin: 0; overflow-y: auto; transform: translateX(-105%); transition: transform .3s ease; }
  .main-sidebar.filter-panel.open { transform: none; }
  .filter-panel .filter-actions { position: sticky; bottom: 0; margin-top: auto; border-top: 1px solid var(--border); }
  .filter-overlay.show { display: block; position: fixed; inset: 0; background: rgba(17, 17, 44, .45); z-index: 1055; }
  body.filters-open { overflow: hidden; }
}

/* The template colours some sidebar inputs white — keep panel text readable */
.filter-panel input, .filter-panel select { color: var(--header) !important; }
.filter-panel input::placeholder { color: #9a9aa6; }