/* =============================================================
   SAFA PERFUMES — shop & category page styles
   Loaded only from shop.php / category.php (header.php owns <head>,
   so the link tag is emitted at the top of the page body).
   ============================================================= */

/* Filter panel */
.filters form{margin:0}
.filters__foot{display:flex;gap:10px;padding:16px 18px;align-items:center}
.filters__foot .btn{flex:1}
.filters-close{display:none}

.filter-price{display:flex;gap:8px;align-items:center}
.filter-price input{
  width:100%;min-width:0;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-sm);padding:9px 11px;outline:none;font-size:.93rem;
}
.filter-price input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(173,136,80,.14)}
.filter-price span{color:var(--ink-3);font-size:.85rem;flex:0 0 auto}
.filter-note{font-size:.78rem;color:var(--ink-3);margin:8px 0 0}
.filter-count{margin-left:auto;font-size:.78rem;color:var(--ink-3)}

/* Off-canvas backdrop for the mobile filter drawer */
.filters-backdrop{
  position:fixed;inset:0;background:rgba(22,18,15,.5);z-index:150;
  opacity:0;transition:opacity .3s ease;
}
.filters-backdrop.is-open{opacity:1}

/* Toolbar */
.toolbar__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Chips */
.chip__remove{display:inline-flex;align-items:center;opacity:.75}
.chip__remove:hover{opacity:1}

/* Category hero media */
.page-hero__media{
  display:block;width:170px;margin:0 auto 20px;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line-2);background:var(--surface-2);
}
.page-hero__media img{width:100%;aspect-ratio:1;object-fit:cover}
.page-hero .breadcrumbs{margin-top:10px}
.page-hero__text{max-width:640px;margin:0 auto 12px;color:var(--ink-2)}

@media (max-width:1024px){
  .filters-close{display:inline-flex}
}