/* =====================================================================
   FILTRI DEL CATALOGO (shop.php e search.php dei marchi, search.php):
   titolo, sottocategorie e barra "Altre categorie / Ordina per".
   Attivo solo da 992px. Mobile invariato.
   ===================================================================== */
@media (min-width: 992px) {
  section.shop.category.filters {
    --sf-ink: #1a1a1a;
    --sf-line: #d5d9de;
    background: #f4f5f6; padding: 48px 0 0; margin-bottom: 0; border-bottom: 1px solid #e3e6e9;
  }
  section.shop.category.filters.pt-0 { padding-top: 0; }
  .filters .header-section h1 { margin: 0 0 20px; font-size: 2rem; font-weight: 500; line-height: 1.2; }

  /* ---------- sottocategorie ---------- */
  .filters .filter { overflow: visible; margin: 0 0 28px; padding: 0; }
  .filters .filter .scroll { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: auto; margin: 0; padding: 0; }
  .filters .filter .badge {
    margin: 0; padding: 9px 18px; border: 1px solid var(--sf-line); font-size: .9rem; line-height: 1.2;
    cursor: pointer; user-select: none; transition: border-color .2s ease-out, background-color .2s ease-out, color .2s ease-out;
  }
  .filters .filter .badge:hover { border-color: var(--sf-ink); }
  .filters .filter .badge.badge_sel { border-color: #333; }

  /* ---------- barra: due menu compatti al posto delle due metà a tutta larghezza ---------- */
  .filters > .nav-tabs {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    max-width: 936px; margin: 0 auto; padding: 0 0 16px; border: 0;   /* stessa larghezza della griglia dei prodotti */
  }
  .filters.pt-0 > .nav-tabs { padding-top: 16px; }
  .filters .nav-item.dropdown { position: relative; width: auto; background: none !important; border: 0 !important; text-align: left; }
  .filters .nav-item.dropdown.order { margin-left: auto; }
  .filters .nav-item.dropdown.category:not(:has(a)) { display: none; }
  .filters .nav-link.dropdown-toggle {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 230px;
    padding: 10px 16px; background: #fff; border: 1px solid var(--sf-line) !important; border-radius: 6px;
    color: var(--sf-ink) !important; font-size: .85rem; letter-spacing: .06em; line-height: 1.2;
    cursor: pointer; transition: border-color .2s ease-out;
  }
  .filters .nav-link.dropdown-toggle:hover,
  .filters .nav-link.dropdown-toggle.show { border-color: var(--sf-ink) !important; }
  .filters .nav-link.dropdown-toggle::after {
    content: ""; display: block; flex: none; width: 7px; height: 7px; margin: -3px 2px 0 auto;
    border: solid var(--sf-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s ease-out;
  }
  .filters .nav-link.dropdown-toggle.show::after { margin-top: 3px; transform: rotate(-135deg); }
  .filters .nav-link .sort { width: 16px; margin: 0; padding: 0; }

  .filters .nav-tabs .dropdown-menu {
    inset: 100% auto auto 0 !important; transform: none !important;   /* agganciato al suo pulsante */
    width: auto; min-width: 100%; max-height: 60vh; overflow-y: auto; margin-top: 6px !important; padding: 6px !important;
    background: #fff; border: 1px solid var(--sf-line); border-radius: 6px; box-shadow: 0 12px 28px rgba(20, 30, 40, .12); text-align: left;
  }
  .filters .nav-item.dropdown.order .dropdown-menu { inset: 100% 0 auto auto !important; }
  .filters .nav-tabs .dropdown-menu li { padding: 0; border: 0; }
  .filters .nav-tabs .dropdown-menu li a {
    padding: 9px 12px; border-radius: 4px; color: var(--sf-ink); font-size: .85rem; letter-spacing: .04em; white-space: nowrap; cursor: pointer;
  }
  .filters .nav-tabs .dropdown-menu li a:hover,
  .filters .nav-tabs .dropdown-menu li a:focus { background: #f0f2f4; color: var(--sf-ink); }
}
@media (min-width: 1200px) { .filters > .nav-tabs { max-width: 1116px; } .filters .header-section { max-width: 1140px; } }
@media (min-width: 1400px) { .filters > .nav-tabs { max-width: 1296px; } .filters .header-section { max-width: 1320px; } }