/* Barre de filtres unifiée — utilisée sur product-catalog et
   collection-detail. Design : barre compacte + popover flottant qui
   ne pousse pas la liste + chips de filtres actifs.

   Variables — reprises depuis les feuilles existantes ou fallback :
   --accent, --accent-deep, --line, --card, --ink, --ink-soft,
   --ink-faint. */

:root {
    --ff-accent: var(--accent, #667eea);
    --ff-accent-deep: var(--accent-deep, #5a4be2);
    --ff-line: var(--line, #e2e8f0);
    --ff-card: var(--card, #ffffff);
    --ff-ink: var(--ink, #2d3748);
    --ff-ink-soft: var(--ink-soft, #4a5568);
    --ff-ink-faint: var(--ink-faint, #a0aec0);
    --ff-input-bg: #f7f6f2;
}

/* ── Barre unique ── */
.ff-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--ff-card);
    border: 1px solid var(--ff-line);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(33, 31, 51, 0.04);
    margin-bottom: 12px;
}

.ff-search {
    position: relative;
    flex: 1;
    min-width: 0;
}
.ff-search-ic {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ff-ink-faint);
    pointer-events: none;
    display: flex;
}
.ff-search input {
    width: 100%;
    height: 46px;
    padding: 0 38px 0 42px;
    font: inherit;
    font-size: 15px;
    color: var(--ff-ink);
    background: var(--ff-card);
    border: 1px solid var(--ff-line);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ff-search input::placeholder { color: var(--ff-ink-faint); }
.ff-search input:focus {
    border-color: var(--ff-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ff-accent) 15%, transparent);
}
.ff-search input::-webkit-search-cancel-button { display: none; }
.ff-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #efedf6;
    color: var(--ff-ink-soft);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ff-search-clear:hover { background: #e4e1f0; }

.ff-filters-wrap { position: relative; }

.ff-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ff-ink);
    background: var(--ff-card);
    border: 1px solid var(--ff-line);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.ff-btn:hover { border-color: var(--ff-accent); color: var(--ff-accent); }
.ff-btn.on {
    color: var(--ff-accent-deep);
    background: color-mix(in oklab, var(--ff-accent) 9%, white);
    border-color: color-mix(in oklab, var(--ff-accent) 32%, white);
}
.ff-count {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ff-accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* [hidden] par défaut → display:none, mais notre display:inline-flex l'écrase. */
.ff-count[hidden] { display: none; }

.ff-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--ff-line);
    background: var(--ff-card);
    color: var(--ff-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
    padding: 0;
}
.ff-icon:hover { border-color: var(--ff-accent); color: var(--ff-accent); }

.ff-view {
    display: inline-flex;
    background: var(--ff-card);
    border: 1px solid var(--ff-line);
    border-radius: 12px;
    padding: 4px;
    gap: 3px;
    height: 46px;
    flex-shrink: 0;
}
.ff-view button {
    width: 40px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--ff-ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ff-view button:hover { color: var(--ff-ink); }
.ff-view button.on,
.ff-view button.is-on {
    background: color-mix(in oklab, var(--ff-accent) 12%, white);
    color: var(--ff-accent-deep);
}

/* ── Popover flottant ── */
.ff-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 760px;
    max-width: 92vw;
    background: var(--ff-card);
    border: 1px solid var(--ff-line);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(33, 31, 51, 0.08), 0 20px 48px rgba(33, 31, 51, 0.16);
    padding: 16px;
    animation: ff-pop 0.16s ease;
}
.ff-pop[hidden] { display: none; }
@keyframes ff-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Grille 2 colonnes desktop. Chaque .ff-pop-col est une colonne
   indépendante qui contient plusieurs .ff-pop-row empilés. Ainsi la
   colonne 1 (Catégorie + État) reste bien à gauche même si la colonne 2
   (Filtres spécifiques) est vide.
   La ligne « Filtres sauvegardés » (span-all) et le pied prennent
   toute la largeur. */
.ff-pop-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    align-items: start;
}
.ff-pop-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ff-pop-col:empty { display: none; }
.ff-pop-row {
    display: flex;
    gap: 12px;
    padding: 12px 4px;
    min-width: 0;
}
/* Séparateur entre les lignes empilées d'une même colonne */
.ff-pop-col .ff-pop-row + .ff-pop-row { border-top: 1px solid var(--ff-line); }
.ff-pop-row.span-all { grid-column: 1 / -1; border-top: 1px solid var(--ff-line); }
.ff-pop-row.is-empty { display: none; }
.ff-pop-ic {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 20px;
}
.ff-pop-ic.cat { color: oklch(0.55 0.14 60); background: oklch(0.95 0.045 60); }
.ff-pop-ic.etat { color: oklch(0.6 0.15 75); background: oklch(0.95 0.05 75); }
.ff-pop-ic.spec { color: oklch(0.55 0.17 350); background: oklch(0.95 0.04 350); }
.ff-pop-ic.sf { color: oklch(0.55 0.15 260); background: oklch(0.95 0.04 260); }

.ff-pop-fields {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
}
.ff-pop-fields.two { grid-template-columns: 1fr 1fr; }
.ff-pop-fields label,
.ff-pop-fields .ff-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.ff-pop-fields label.span2,
.ff-pop-fields .ff-label.span2 { grid-column: 1 / -1; }
.ff-pop-fields label > span,
.ff-pop-fields .ff-label > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--ff-ink-soft);
}

.ff-select { position: relative; }
.ff-select select,
.ff-pop-fields select {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ff-ink);
    background: var(--ff-input-bg);
    border: 1px solid var(--ff-line);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ff-select select:hover,
.ff-pop-fields select:hover { background-color: #f2f0ea; }
.ff-select select:focus,
.ff-pop-fields select:focus {
    border-color: var(--ff-accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ff-accent) 15%, transparent);
}

.ff-input,
.ff-pop-fields input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ff-ink);
    background: var(--ff-input-bg);
    border: 1px solid var(--ff-line);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.ff-input::placeholder,
.ff-pop-fields input[type="text"]::placeholder {
    color: var(--ff-ink-faint);
}
.ff-input:focus,
.ff-pop-fields input[type="text"]:focus {
    border-color: var(--ff-accent);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ff-accent) 15%, transparent);
}

/* Cascade catégorie : les selects s'empilent avec un petit espace */
.ff-pop-fields .ff-cascade {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Variante compacte du ff-btn pour les actions des filtres sauvegardés
   à l'intérieur du popover. */
.ff-btn.ff-btn-slim {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
}
.ff-btn.ff-btn-slim[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.ff-btn.ff-btn-slim[disabled]:hover {
    border-color: var(--ff-line);
    color: var(--ff-ink);
}

/* Ligne « Filtres sauvegardés » dans le popover : boutons compacts
   alignés, form d'input, et menu déroulant qui se replie sous la ligne. */
.sf-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sf-arrow-anchor { position: relative; }
.ff-pop-fields .sf-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.ff-pop-fields .sf-form input[type="text"] {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    color: var(--ff-ink);
    background: var(--ff-input-bg);
    border: 1px solid var(--ff-line);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ff-pop-fields .sf-form input[type="text"]:focus {
    border-color: var(--ff-accent);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ff-accent) 15%, transparent);
}
.ff-pop-fields .sf-form .sf-confirm,
.ff-pop-fields .sf-form .sf-cancel {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--ff-line);
    background: var(--ff-card);
    color: var(--ff-ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, color 0.15s;
}
.ff-pop-fields .sf-form .sf-confirm:hover { border-color: var(--ff-accent); color: var(--ff-accent); }
.ff-pop-fields .sf-form .sf-cancel:hover { border-color: #e53e3e; color: #e53e3e; }
/* Menu « Mes filtres » : overlay positionné dans le popover, ne
   pousse pas le contenu. Ancré sous le bouton « Mes filtres ». */
.ff-pop-fields .sf-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px));
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--ff-line);
    border-radius: 10px;
    background: var(--ff-card);
    box-shadow: 0 10px 30px rgba(33, 31, 51, 0.14);
    padding: 4px;
    z-index: 40;
}
.ff-pop-fields .sf-menu:empty { display: none; }

.sf-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ff-ink);
    transition: background 0.12s;
}
.sf-menu-item:hover { background: color-mix(in oklab, var(--ff-accent) 8%, white); }
.sf-menu-item .sf-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-menu-item .sf-menu-del {
    border: none;
    background: transparent;
    color: var(--ff-ink-faint);
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.sf-menu-item .sf-menu-del:hover { color: #e53e3e; background: rgba(229, 62, 62, 0.08); }
.sf-menu-empty {
    padding: 10px;
    text-align: center;
    color: var(--ff-ink-faint);
    font-size: 13px;
}

.ff-pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--ff-line);
}
.ff-link {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ff-ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.ff-link:hover:not(:disabled) { color: var(--ff-accent); }
.ff-link:disabled { opacity: 0.4; cursor: default; }
.ff-apply {
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--ff-accent);
    border: 1px solid var(--ff-accent);
    border-radius: 10px;
    padding: 9px 18px;
    cursor: pointer;
    box-shadow: 0 5px 14px color-mix(in oklab, var(--ff-accent) 28%, transparent);
    transition: filter 0.15s;
}
.ff-apply:hover { filter: brightness(1.07); }

/* ── Chips de filtres actifs ── */
.ff-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ff-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ff-accent-deep);
    background: color-mix(in oklab, var(--ff-accent) 10%, white);
    border: 1px solid color-mix(in oklab, var(--ff-accent) 22%, white);
    border-radius: 999px;
    padding: 5px 8px 5px 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.ff-chip:hover { background: color-mix(in oklab, var(--ff-accent) 16%, white); }
.ff-chip-x { display: flex; color: var(--ff-accent); opacity: 0.7; }
.ff-chip-clear {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ff-ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 4px;
}
.ff-chip-clear:hover { color: var(--ff-accent); }

/* Responsive */
@media (max-width: 860px) {
    .ff-bar { flex-wrap: wrap; padding: 10px; }
    .ff-search { flex-basis: 100%; order: -1; }
    /* Toggle grid/liste poussé à droite de la barre (le bouton
       « Filtres » est à gauche, le toggle occupe l'autre extrémité). */
    .ff-view { margin-left: auto; }
    /* Popover en pleine largeur du parent .ff-bar plutôt que du
       bouton .ff-filters-wrap : on sort le position:absolute vers
       la barre elle-même (.ff-bar en position:relative, cf. règle
       de base). Le popover s'étale sous toute la barre. */
    .ff-filters-wrap { position: static; }
    .ff-pop {
        top: calc(100% + 6px);
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
    .ff-pop-body { grid-template-columns: 1fr; gap: 0; }
    /* En 1 colonne : une bordure entre chaque ligne, sauf la toute
       première (première ligne de la première colonne). */
    .ff-pop-body .ff-pop-col + .ff-pop-col .ff-pop-row:first-child {
        border-top: 1px solid var(--ff-line);
    }
}