/* Barra filtri della pagina campagna.
   Le classi dei chip colore (.hfb-colors, .hfb-color-chip) sono del tema e non
   sono scopate agli archivi prodotto, quindi si riusano; il resto sta qui
   perche' nello shop i bottoni aprono un drawer, mentre qui i pannelli si
   aprono sotto la barra. */

.hy-prive-fb { position: relative; margin: 0 0 24px; }
.hy-prive-fb__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hy-prive-fb__trigger {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
    border: 1px solid rgba(0,0,0,.25); background: #fff; color: #000;
    font-size: 14px; line-height: 1; cursor: pointer;
}
.hy-prive-fb__trigger:hover, .hy-prive-fb__trigger.is-open { border-color: #000; }
.hy-prive-fb__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #000; color: #fff; font-size: 11px;
}
.hy-prive-fb__caret {
    width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg); margin-top: -3px;
}
.hy-prive-fb__sort { margin-left: auto; }
.hy-prive-fb__sort select { padding: 9px 12px; border: 1px solid rgba(0,0,0,.25); background: #fff; font-size: 14px; }

/* Drawer dei filtri: entra da destra sopra la pagina, come quello dello shop. */
.hy-prive-drawer { position: fixed; inset: 0; z-index: 9999; }
.hy-prive-drawer__shadow {
    position: absolute; inset: 0; background: rgba(0,0,0,.4);
    opacity: 0; transition: opacity .3s ease;
}
.hy-prive-drawer.is-open .hy-prive-drawer__shadow { opacity: 1; }
.hy-prive-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw;
    display: flex; flex-direction: column; background: #fff;
    transform: translateX(100%); transition: transform .3s ease;
}
.hy-prive-drawer.is-open .hy-prive-drawer__panel { transform: none; }
.hy-prive-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid rgba(0,0,0,.12);
}
.hy-prive-drawer__title { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.hy-prive-drawer__close {
    padding: 0; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #000;
}
.hy-prive-drawer__foot { padding: 16px 24px; border-top: 1px solid rgba(0,0,0,.12); }
.hy-prive-drawer__apply { width: 100%; }
/* Con il drawer aperto la pagina sotto non scorre. */
body.hy-prive-drawer-open { overflow: hidden; }

/* Sezioni ad accordion dentro il drawer. */
.hy-prive-fb__panels { flex: 1; overflow-y: auto; padding: 0 24px; }
.hy-prive-fb__panel { border-bottom: 1px solid rgba(0,0,0,.08); }
.hy-prive-fb__panel-title {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 18px 0; border: 0; background: none; color: #000;
    font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-align: left; cursor: pointer;
}
.hy-prive-fb__panel-title::after {
    content: '+'; font-size: 18px; line-height: 1;
}
.hy-prive-fb__panel.is-open .hy-prive-fb__panel-title::after { content: '\2212'; }
/* Il contenuto della sezione sta sotto il titolo e compare solo da aperta:
   si nascondono i figli e non la sezione, che deve restare cliccabile. */
.hy-prive-fb__panel > *:not(.hy-prive-fb__panel-title) { display: none; }
.hy-prive-fb__panel.is-open > * { display: block; }
.hy-prive-fb__panel.is-open > .hy-prive-fb__panel-title { display: flex; }
.hy-prive-fb__panel.is-open > .hy-prive-fb__colors { display: flex; }
.hy-prive-fb__panel.is-open > .hy-prive-fb__price { display: flex; }
.hy-prive-fb__list { list-style: none; margin: 0 0 18px; padding: 0; }
.hy-prive-fb__list-item { margin: 0; padding: 3px 0; }
.hy-prive-fb__list-item label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0; }
.hy-prive-fb__n { color: #777; font-size: 12px; margin-left: auto; }

.hy-prive-fb__colors { min-width: 340px; }
/* Il chip e' cliccabile dalla sua label: la checkbox resta nel DOM (la leggono i
   selettori dei filtri) ma fuori dal flusso visivo. */
.hy-prive-fb__color-input { position: absolute; opacity: 0; width: 0; height: 0; }
.hy-prive-fb__colors .hfb-color-chip { cursor: pointer; margin: 0; }

.hy-prive-fb__price { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hy-prive-fb__price input { width: 80px; padding: 8px; border: 1px solid rgba(0,0,0,.2); text-align: center; }
.hy-prive-fb__slider { margin: 0 4px 16px; }
.hy-prive-fb__apply { width: 100%; }

.hy-prive-fb__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hy-prive-fb__chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid rgba(0,0,0,.2); background: #f5f5f5; font-size: 13px; cursor: pointer;
}
.hy-prive-fb__chip--clear { background: none; text-decoration: underline; border-color: transparent; }
.hy-prive-fb__chip-x { font-size: 15px; line-height: 1; }

.hy-prive__intro { margin: 8px 0 0; }
/* Messaggio di campagna chiusa: e' l'unico contenuto della pagina, quindi sta
   al centro e non appiccicato al bordo sinistro come fosse un paragrafo. */
.hy-prive__chiusa {
    max-width: 640px;
    margin: 0 auto;
    padding: 80px 24px;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 767.98px) {
    .hy-prive-fb__sort { margin-left: 0; width: 100%; }
    .hy-prive-fb__sort select { width: 100%; }
    .hy-prive-drawer__panel { width: 100%; max-width: none; }
}