/* ===================================================================
 * SEA Technology Filters
 * Stili dei soli filtri (categoria pillole, sidebar, accordion, chips).
 * Il rendering della griglia prodotti è demandato al Loop Grid di Elementor.
 *
 * Tutte le variabili sono in :root per facile customizzazione dal tema.
 *
 * Organizzazione: le regole desktop stanno nel blocco base (nessuna media
 * query), le varianti mobile in un unico `@media (max-width: 767.98px)`.
 * Niente coppia max-767/min-768: le larghezze frazionarie (zoom browser,
 * alcuni device) cadevano nel buco tra le due soglie.
 *
 * Layout mobile (< 768px, breakpoint "Mobile" di Elementor): la nav
 * categoria diventa un DROPDOWN ancorato al proprio trigger (non una
 * modale: vive dentro .sea-filters__cat-wrap in position:relative) e il
 * pannello Quick/Deep Filters diventa un bottom sheet. Stesso markup di
 * sempre, nessun duplicato. Vedi assets/js/sea-filters-mobile.js per
 * apertura/chiusura — qui solo presentazione, nessuna logica di filtro.
 * =================================================================== */

:root {
  --sea-color-primary: #34C5FF;
  --sea-color-text: #1E1E1E;
  --sea-color-muted: #6b7280;
  --sea-color-border: #e5e7eb;
  --sea-color-bg: #f7f8fa;
  /* Fondo delle pillole opzione non selezionate (griglia diametri). */
  --sea-color-fill: #f2f4f7;
  --sea-color-card: #fff;
  /* Token presi da Figma (mobile). Il primario e il fill vengono
     ridichiarati dentro la media query < 768px con i valori esatti del
     mockup: su desktop restano quelli storici e nulla cambia. */
  --sea-color-navy: #031c59;
  --sea-color-line: #eff3f6;
  --sea-color-check-border: rgba(0, 0, 0, .25);
  --sea-radius: 10px;
  --sea-radius-sm: 8px;
  --sea-radius-lg: 20px;
  --sea-radius-sheet: 24px;
  --sea-radius-pill: 999px;
  --sea-gap: 16px;
  --sea-gap-lg: 24px;
  --sea-font-sm: 14px;
  --sea-font-xs: 12px;
}

.sea-filters { font-family: inherit; color: var(--sea-color-text); }

/* ─────────────── Pillole categoria (orizzontali, desktop) ─────────────── */
.sea-filters__categories { margin-bottom: var(--sea-gap-lg); }
.sea-filters__pills {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sea-filters__pill {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--sea-color-border);
  border-radius: var(--sea-radius-pill);
  background: var(--sea-color-card);
  color: var(--sea-color-text);
  font-size: var(--sea-font-sm);
  text-decoration: none;
  transition: all .15s ease;
}
/* Tre stati, come da design:
     default      fondo bianco     + testo nero      (regola sopra)
     selezionato  fondo azzurro    + testo blu scuro
     hover        fondo blu scuro  + testo bianco
   L’hover sta DOPO .is-active perché deve prevalere anche sulla pill
   già selezionata. È chiuso in @media (hover: hover) così sul touch
   non resta “attaccato” dopo il tap.

   Il selettore porta davanti .sea-filters per una ragione precisa: il kit di
   Elementor dichiara .elementor-kit-6 a:hover{color:...}, che a parita' di
   peso vinceva su .sea-filters__pill:hover. Il risultato era il fondo blu
   scuro con il testo ancora scuro sopra, cioe' illeggibile. Con la classe
   contenitore davanti la regola pesa di piu' e il testo torna bianco.
   La stessa aggiunta e' replicata sull'hover dentro la media query mobile,
   per non ribaltare l'ordine fra le due. */
.sea-filters__pill.is-active {
  background: var(--sea-color-primary);
  border-color: var(--sea-color-primary);
  color: var(--sea-color-navy);
}
@media (hover: hover) {
  .sea-filters .sea-filters__pill:hover {
    background: var(--sea-color-navy);
    border-color: var(--sea-color-navy);
    color: #fff;
  }
}

/* ─────────────── Chip filtri attivi ───────────────
   Icona ⊗ PRIMA dell'etichetta, senza fondo (come da Figma). */
.sea-filters__active-chips {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-bottom: var(--sea-gap);
  align-items: center;
}
.sea-filters__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0;
  background: none;
  font-size: var(--sea-font-sm);
  color: var(--sea-color-text);
  text-decoration: none;
}
.sea-filters__chip:hover { color: var(--sea-color-primary); }
.sea-filters__chip-x {
  position: relative;
  display: block;
  width: 15px; height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.sea-filters__chip-x::before,
.sea-filters__chip-x::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 1.5px;
  background: currentColor;
}
.sea-filters__chip-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.sea-filters__chip-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.sea-filters__clear {
  font-size: var(--sea-font-xs);
  color: var(--sea-color-muted);
  text-decoration: underline;
}

/* ─────────────── Sidebar filtri ─────────────── */
.sea-filters__sidebar { display: flex; flex-direction: column; gap: var(--sea-gap-lg); }
.sea-filters__group { display: flex; flex-direction: column; gap: var(--sea-gap); }
.sea-filter { display: flex; flex-direction: column; }

/* Accordion (details/summary nativi) */
details.sea-filter {
  border-top: 1px solid var(--sea-color-border);
  padding-top: var(--sea-gap);
}
details.sea-filter > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}
details.sea-filter > summary::-webkit-details-marker { display: none; }
/* Titoli sezione uppercase come da Figma. Il tag resta nudo (h6) per non
   togliere al tema il controllo su family/colore: qui forziamo solo
   trasformazione, peso e dimensione. */
details.sea-filter > summary > h6 {
  margin: 0;
  font-size: var(--sea-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.3;
}
.sea-filters__categories h3 {
  font-size: var(--sea-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Chevron disegnato in CSS (nessuna glifo dipendente dal font). */
.sea-filter__chevron,
.sea-filters__cat-chevron {
  display: block;
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
details.sea-filter[open] > summary .sea-filter__chevron {
  transform: translateY(2px) rotate(225deg);
}
.sea-filter__chevron { color: var(--sea-color-muted); }

/* Su desktop i Quick Filters restano sempre aperti: il summary non è un
   comando, quindi niente cursore/hover né chevron. Il JS toglie anche il
   tabindex, altrimenti da tastiera si potrebbero comunque richiudere. */
.sea-filters__group--quick details.sea-filter > summary {
  pointer-events: none;
  cursor: default;
}
.sea-filters__group--quick details.sea-filter .sea-filter__chevron {
  display: none;
}

/* Opzioni (checkbox / radio come link) */
.sea-filter__options {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sea-filter__option {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 0;
  font-size: var(--sea-font-sm);
  color: var(--sea-color-text);
  text-decoration: none;
}
.sea-filter__option:hover { color: var(--sea-color-primary); }
.sea-filter__checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--sea-color-border);
  border-radius: 3px;
  flex-shrink: 0;
  position: relative;
}
.sea-filter--radio .sea-filter__checkbox { border-radius: 50%; }
.sea-filter__option.is-active .sea-filter__checkbox {
  background: var(--sea-color-primary);
  border-color: var(--sea-color-primary);
}
.sea-filter__option.is-active .sea-filter__checkbox::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sea-filter--radio .sea-filter__option.is-active .sea-filter__checkbox::after {
  width: 6px; height: 6px;
  left: 3px; top: 3px;
  background: #fff;
  border: none;
  border-radius: 50%;
  transform: none;
}

/* ─────────────── Opzioni a griglia (pillole) — es. Diametro ───────────────
   Griglia a 3 colonne fisse. Figma le disegna a flex-wrap con larghezza sul
   contenuto, ma con etichette di lunghezza diversa produceva righe
   irregolari: la griglia è una deviazione voluta dal mockup.
   Non selezionata = fondo grigio senza bordo. */
.sea-filter--grid .sea-filter__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sea-filter--grid .sea-filter__option {
  border: none;
  border-radius: var(--sea-radius-sm);
  background: var(--sea-color-fill);
  padding: 10px 8px;
  justify-content: center;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
.sea-filter--grid .sea-filter__option:hover {
  background: var(--sea-color-border);
  color: var(--sea-color-text);
}
.sea-filter--grid .sea-filter__option.is-active,
.sea-filter--grid .sea-filter__option.is-active:hover {
  background: var(--sea-color-primary);
  color: #fff;
}

/* ─────────────── Barra mobile (trigger "Categoria" / "Filtri") ───────────────
   Su desktop la barra e il suo wrapper sono `display: contents`: la nav
   categoria che vive dentro il wrapper torna così in flusso esattamente
   dov'era prima, e i due trigger restano nascosti. */
.sea-filters__mobile-bar,
.sea-filters__cat-wrap { display: contents; }

/* ─────────────── Nota sul prefisso `button.` ───────────────
   I tre comandi del plugin (cat-trigger, filters-trigger, panel-close) sono
   <button type="button">. Il reset di hello-elementor stila i bottoni con
   `[type=button], [type=submit], button { ... }`, e un selettore di attributo
   pesa quanto una classe: a parità di specificità (0,1,0) vince il foglio
   caricato dopo, che è quello del tema. Senza il prefisso il tema imponeva
   display:inline-block (i trigger restavano visibili su desktop e perdevano
   il flex su mobile), color/border #c36, border-radius 3px e width:auto.
   `button.<classe>` porta le regole a (0,1,1) e le rende immuni; per gli
   stati serve (0,2,1), perché il reset ha anche `[type=button]:hover`.
   Se un giorno questi comandi smettessero di essere <button>, il prefisso va
   aggiornato di conseguenza. */
button.sea-filters__cat-trigger,
button.sea-filters__filters-trigger { display: none; }

/* Icona "sliders" del trigger Filtri. */
.sea-filters__filters-icon {
  position: relative;
  display: block;
  width: 16px; height: 14px;
  flex-shrink: 0;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px;
  background-position: 0 4px, 0 10px;
  background-repeat: no-repeat;
}
.sea-filters__filters-icon::before,
.sea-filters__filters-icon::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--sea-color-card);
}
.sea-filters__filters-icon::before { left: 3px; top: 1px; }
.sea-filters__filters-icon::after { right: 3px; top: 7px; }

/* Icona ⊗ del bottone chiudi pannello. In Figma è un glifo da 16px dentro
   un pastello circolare di 32px (il fondo sta sul bottone, non qui). */
.sea-filters__close-icon {
  position: relative;
  display: block;
  width: 16px; height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.sea-filters__close-icon::before,
.sea-filters__close-icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 1.5px;
  background: currentColor;
}
.sea-filters__close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.sea-filters__close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Pannello filtri: su desktop i wrapper del bottom sheet sono trasparenti
   al layout, così la sidebar resta in flusso esattamente come prima. */
.sea-filters__panel,
.sea-filters__panel-sheet { display: contents; }
.sea-filters__panel-header,
.sea-filters__panel-grabber,
.sea-filters__backdrop { display: none; }

/* ═══════════════ Mobile (< 768px) ═══════════════ */
@media (max-width: 767.98px) {
  /* Palette del mockup mobile. Ridichiarata su :root e non su .sea-filters
     perché il bottom sheet viene spostato sotto <body> dal JS: da lì non
     erediterebbe più nulla dal wrapper del plugin. */
  :root {
    --sea-color-primary: #15bcff;
    --sea-color-fill: #eff3f6;
  }

  .sea-filters__mobile-bar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: var(--sea-gap);
  }
  /* Contesto di ancoraggio del dropdown Categoria. */
  .sea-filters__cat-wrap {
    display: block;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Prefisso `button.` obbligatorio: vedi la nota nel blocco base. */
  button.sea-filters__cat-trigger,
  button.sea-filters__filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sea-color-card);
    color: var(--sea-color-navy);
    font-size: var(--sea-font-sm);
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
  }
  /* Il reset del tema colora i bottoni in pieno all'hover/focus
     (`[type=button]:hover { background-color: #c36; color: #fff }`): serve
     una regola a specificità (0,2,1) per neutralizzarla. */
  button.sea-filters__cat-trigger:hover,
  button.sea-filters__cat-trigger:focus,
  button.sea-filters__filters-trigger:hover,
  button.sea-filters__filters-trigger:focus {
    background: var(--sea-color-card);
    color: var(--sea-color-navy);
  }
  /* "Categoria" occupa la larghezza residua, etichetta a sinistra e
     chevron spinto a destra (stile select). "Filtri" si dimensiona sul
     contenuto: il rapporto ~70/30 di Figma viene da qui, non da valori fissi.
     Il chip è una pill (radius 20px) col solo filo di bordo che lo stacca
     dal fondo bianco della pagina; "Filtri" ha invece bordo navy pieno. */
  button.sea-filters__cat-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 8px 16px;
    border: 1px solid var(--sea-color-line);
    border-radius: var(--sea-radius-lg);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  button.sea-filters__filters-trigger {
    flex: 0 0 auto;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--sea-color-navy);
    border-radius: var(--sea-radius-sm);
    font-weight: 600;
    white-space: nowrap;
  }
  .sea-filters__count { font-weight: 600; }

  /* Trigger aperto: chevron in su e angoli inferiori squadrati, così da
     saldarsi al dropdown sottostante — in Figma i due formano un unico
     blocco bianco con gli angoli tondi solo agli estremi. */
  button.sea-filters__cat-trigger[aria-expanded="true"] {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  button.sea-filters__cat-trigger[aria-expanded="true"] .sea-filters__cat-chevron {
    transform: translateY(2px) rotate(225deg);
  }

  /* Dropdown Categoria: ancorato al trigger (NON una modale), stesso
     <nav>/<ul> di sempre ristilizzato come checklist verticale. */
  .sea-filters__categories {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-top: -1px;
    margin-bottom: 0;
    z-index: 900;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sea-color-card);
    border: 1px solid var(--sea-color-line);
    border-top: none;
    border-radius: 0 0 var(--sea-radius-lg) var(--sea-radius-lg);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
    padding: 8px 0 16px;
  }
  .sea-filters__categories.is-open { display: block; }
  /* Il titolo è già nel trigger sopra: qui sarebbe un doppione. */
  .sea-filters__categories h3 { display: none; }

  /* Voci del dropdown: 16px con interlinea larga (~1.85) e testo indentato a
     45px, come da mockup. Il check resta quadrato anche se la tipologia è a
     selezione singola: scelta di design confermata. */
  .sea-filters__pills { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .sea-filters__pill {
    position: relative;
    justify-content: flex-start;
    width: 100%;
    padding: 5px 16px 5px 45px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.84;
  }
  .sea-filters .sea-filters__pill:hover { background: var(--sea-color-line); }
  .sea-filters__pill.is-active { background: transparent; color: var(--sea-color-text); }
  .sea-filters__pill::before {
    content: '';
    position: absolute; left: 18px; top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    border: 1px solid #464646;
    border-radius: 3px;
    background: var(--sea-color-card);
  }
  .sea-filters__pill.is-active::before {
    background: var(--sea-color-primary);
    border-color: var(--sea-color-primary);
  }
  .sea-filters__pill.is-active::after {
    content: '';
    position: absolute; left: 23px; top: 50%;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-65%) rotate(45deg);
  }

  /* Bottom sheet Filtri: stesso <aside>/chip attive di sempre, avvolti in
     .sea-filters__panel > .sea-filters__panel-sheet e sganciati dal flusso. */
  .sea-filters__panel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    /* Il delay tiene il pannello visibile per tutta la durata dello slide
       di uscita: senza, `visibility:hidden` scatta subito e la chiusura
       risulta istantanea mentre l'apertura è animata. */
    transition: visibility 0s linear .3s;
  }
  .sea-filters__panel.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .sea-filters__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .sea-filters__panel.is-open .sea-filters__backdrop { opacity: 1; }
  .sea-filters__panel-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--sea-color-card);
    border-radius: var(--sea-radius-sheet) var(--sea-radius-sheet) 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .3s ease;
  }
  .sea-filters__panel.is-open .sea-filters__panel-sheet { transform: translateY(0); }

  /* Maniglia: barretta 114x5 #9a9a9a centrata, 8px dal bordo (Figma 774-3220).
     Il padding attorno non e' decorativo: e' l'area che si puo' afferrare, e
     5px di altezza sarebbero un bersaglio impossibile da prendere col pollice.
     touch-action: none serve a impedire che lo scroll della pagina rubi il
     gesto verticale prima che lo veda il JS. */
  .sea-filters__panel-grabber {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 5px;
    height: 26px;
    flex: 0 0 auto;
    cursor: grab;
    touch-action: none;
  }
  .sea-filters__panel-grabber span {
    display: block;
    width: 114px;
    height: 5px;
    border-radius: 999px;
    background: #9a9a9a;
  }
  .sea-filters__panel-sheet.is-dragging {
    /* Durante il trascinamento la posizione la detta il dito, non la
       transizione: lasciarla attiva farebbe arrancare il pannello. */
    transition: none;
  }
  .sea-filters__panel-sheet.is-dragging .sea-filters__panel-grabber { cursor: grabbing; }

  .sea-filters__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--sea-color-line);
  }
  .sea-filters__panel-header h2 { margin: 0; font-size: 24px; font-weight: 700; }
  .sea-filters__panel-header-actions { display: flex; align-items: center; gap: 16px; }
  .sea-filters__panel-header .sea-filters__clear {
    font-size: var(--sea-font-sm);
    font-weight: 600;
    color: var(--sea-color-text);
    text-decoration: none;
  }
  /* Pastello circolare attorno alla ⊗, come da mockup. Anche qui serve il
     prefisso `button.`: senza, il reset del tema lo allargava con il proprio
     padding e width:auto, spingendo "Azzera tutto" fuori dall'header. */
  button.sea-filters__panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px; height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--sea-color-fill);
    padding: 0;
    color: var(--sea-color-text);
    cursor: pointer;
  }
  button.sea-filters__panel-close:hover,
  button.sea-filters__panel-close:focus {
    background: var(--sea-color-fill);
    color: var(--sea-color-text);
  }
  .sea-filters__panel-sheet .sea-filters__active-chips {
    gap: 13px 20px;
    padding: 20px 20px 0;
    margin-bottom: 0;
  }
  .sea-filters__active-chips .sea-filters__chip { font-size: 16px; }
  /* Evita di duplicare "Azzera tutto": c'è già nell'header del pannello.
     La seconda regola copre il caso layout="top" + layout="sidebar", dove le
     chip vivono fuori dal pannello — la classe la applica il JS solo se in
     pagina esiste davvero un pannello con il proprio "Azzera tutto". */
  .sea-filters__panel-sheet .sea-filters__active-chips .sea-filters__clear,
  .sea-filters__active-chips--has-sheet-clear .sea-filters__clear { display: none; }
  .sea-filters__panel-sheet .sea-filters__sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
  }

  /* Su mobile i Quick Filters sono accordion veri (il JS li richiude
     all'avvio): summary di nuovo interattivo e chevron visibile. */
  .sea-filters__group--quick details.sea-filter > summary {
    pointer-events: auto;
    cursor: pointer;
  }
  .sea-filters__group--quick details.sea-filter .sea-filter__chevron {
    display: block;
  }

  /* ── Accordion e opzioni, scala tipografica del mockup ──
     In Figma le sezioni aperte non hanno filetti: il separatore appartiene
     alle sole sezioni chiuse ed è sotto, non sopra. */
  .sea-filters__group { gap: var(--sea-gap-lg); }
  details.sea-filter {
    border-top: none;
    padding-top: 0;
  }
  details.sea-filter:not([open]) {
    border-bottom: 1px solid var(--sea-color-line);
  }
  details.sea-filter > summary { padding-bottom: var(--sea-gap); }
  details.sea-filter:not([open]) > summary { padding: var(--sea-gap) 0; }
  details.sea-filter > summary > h6 { font-size: 18px; }
  .sea-filter__chevron,
  .sea-filters__cat-chevron { width: 10px; height: 10px; }

  .sea-filter__options { gap: 12px; }
  .sea-filter__option {
    gap: 12px;
    padding: 0;
    font-size: 16px;
  }
  .sea-filter__checkbox {
    width: 20px; height: 20px;
    border: 1px solid var(--sea-color-check-border);
    border-radius: 4px;
  }
  .sea-filter__option.is-active .sea-filter__checkbox::after {
    left: 7px; top: 3px;
    width: 5px; height: 10px;
  }
  .sea-filter--radio .sea-filter__option.is-active .sea-filter__checkbox::after {
    width: 8px; height: 8px;
    left: 5px; top: 5px;
  }

  /* Pillole diametro: resta la griglia a 3 colonne (scelta di prodotto, più
     ordinata del wrap di Figma con etichette di lunghezza diversa), ma
     padding, peso e colori sono quelli del mockup — testo navy su primario,
     non bianco. */
  .sea-filter--grid .sea-filter__option {
    padding: 10px 16px;
    font-size: var(--sea-font-sm);
    font-weight: 600;
  }
  .sea-filter--grid .sea-filter__option.is-active,
  .sea-filter--grid .sea-filter__option.is-active:hover {
    background: var(--sea-color-primary);
    color: var(--sea-color-navy);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sea-filters__backdrop,
  .sea-filters__panel-sheet,
  .sea-filter__chevron,
  .sea-filters__cat-chevron {
    transition: none;
  }
}

/* Applicata su <html> da sea-filters-mobile.js mentre il bottom sheet è
   aperto. Su iOS il solo overflow:hidden non basta: lo script blocca anche
   il body in position:fixed e ne ripristina lo scroll alla chiusura. */
html.sea-filters-lock-scroll,
html.sea-filters-lock-scroll body {
  overflow: hidden;
}