/************************************************************
 FV Native Filter — CSS complet (assets/css/fvnf.css)
 Objectif :
 - Pills + selects harmonisés (typo / hauteur / radius / align)
 - Desktop : 1 seule ligne de termes + dégradé droite + "Voir plus"
 - Mobile : 2 lignes max + "Voir plus" (sans perdre l’accès)
 - Mode épuré : attributs cachés, termes figés, reset caché
 - Dark mode cohérent
 - FIX: Mobile => "Toutes les marques" + "Tri" côte à côte
 - PATCH: Page Marque + mode Complet => état d’attente UX dans "Vos besoins"
************************************************************/

/* ================== Variables ================== */
:root{
  --fv:#2e7d4f;
  --txt:#2b2b2b;

  --ring:0 0 0 2px rgba(46,125,79,.22);
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --shadow-hover:0 10px 24px rgba(0,0,0,.10);

  /* Pills */
  --fv-pill-h:36px;
  --fv-pill-px:14px;
  --fv-pill-fz:14px;

  /* Selects */
  --fvnf-h:40px;
  --fvnf-r:12px;
  --fvnf-px:.95rem;
  --fvnf-b:1px;
  --fvnf-select-w:260px;

  /* Layout */
  --fvnf-gap:18px;

  /* Dégradés (doivent matcher le fond page) */
  --fvnf-fade-bg: rgba(249,246,239,1);
  --fvnf-fade-bg-0: rgba(249,246,239,0);

  /* Collapse */
  --fvnf-mobile-lines: 2; /* 2 lignes visibles sur mobile */
}

/* ================== Base wrap (mode "normal") ================== */
#fvnf-wrap.fvnf-wrap{
  display:grid;
  grid-template-columns: 1fr 16px 1fr;
  gap:var(--fvnf-gap);
  align-items:start;
  margin:18px 0 12px;
  padding-inline:clamp(8px, 2vw, 18px);
  color:var(--txt);
}

#fvnf-wrap .fvnf__col{
  min-width:0;
  display:flex;
  flex-direction:column;
}

#fvnf-wrap .fvnf__divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.04));
  position:relative;
}
#fvnf-wrap .fvnf__divider::after{
  content:"";
  display:block;
  width:1px;
  height:14px;
  background:inherit;
  margin:10px auto 0;
}

/* ================== Titres ================== */
#fvnf-wrap .fvnf__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:clamp(18px,2vw,21px);
  line-height:1.25;
  margin:0 0 12px;
  font-weight:500;
  letter-spacing:.1px;
}
#fvnf-wrap .fvnf__title-btn{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  color:inherit;
  cursor:pointer;
}
#fvnf-wrap .fvnf__title-btn:hover{ opacity:.9; }

/* ================== Pills d’attributs (mode normal) ================== */
#fvnf-wrap .fvnf__pills{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
}
#fvnf-wrap .fvnf__pills::-webkit-scrollbar{ height:8px; }
#fvnf-wrap .fvnf__pills::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:6px;
}

/* ================== Termes ================== */
#fvnf-wrap .fvnf__terms{ display:block; min-height:42px; }
#fvnf-wrap .fvnf-terms-group{ display:block; margin:6px 0 10px; }
/* Sécurités list (évite bullets + évite “collage” de texte) */
#fvnf-wrap .fvnf-terms-list{
  list-style:none;
  margin:0;
  padding:0;
}
#fvnf-wrap .fvnf-terms-group .fvnf-terms-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#fvnf-wrap .fvnf-terms-list li{
  list-style:none;
  margin:0;
  padding:0;
}

/* Base pills (normal) : vert plein */
#fvnf-wrap :is(.fvnf__pill, .fvnf__term){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--fv-pill-h);
  line-height:var(--fv-pill-h);
  padding:0 var(--fv-pill-px);
  box-sizing:border-box;
  border:1px solid var(--fv);
  border-radius:999px;
  background:var(--fv);
  color:#fff;
  font-size:var(--fv-pill-fz);
  font-weight:500;
  white-space:nowrap;
  box-shadow:var(--shadow);
  transition:background .12s ease, color .12s ease, box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
#fvnf-wrap :is(.fvnf__pill:hover, .fvnf__term:hover){
  background:#000;
  color:#fff;
  border-color:#000;
  box-shadow:var(--shadow-hover);
}
#fvnf-wrap :is(.fvnf__pill:focus, .fvnf__term:focus){
  outline:none;
  box-shadow:var(--ring);
}

/* Actif forcé noir */
.woocommerce :is(
  #fvnf-wrap .fvnf__pill.is-active,
  #fvnf-wrap .fvnf__term.is-checked,
  #fvnf-wrap .fvnf__pill[aria-pressed="true"],
  #fvnf-wrap .fvnf__term[aria-pressed="true"],
  #fvnf-wrap .fvnf-terms-list li.is-checked .fvnf__pill,
  #fvnf-wrap .fvnf-terms-list li.selected .fvnf__pill,
  #fvnf-wrap .fvnf-terms-list input[type="checkbox"]:checked + label,
  #fvnf-wrap .fvnf-terms-list input[type="radio"]:checked + label
){
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}

/* ================== Marques + Tri (selects natifs) ================== */
@media (min-width:481px){
  .woocommerce .woocommerce-ordering,
  #fvnf-wrap .woocommerce-ordering{
    gap:12px;
    display:flex;
    align-items:center;
    float:right;
  }
}

/* Selects natifs (Marques + Tri) — harmonisés Futur Vert */
#fvnf-brand-select.orderby,
.woocommerce .woocommerce-ordering select.orderby{
  width:var(--fvnf-select-w) !important;
  min-width:var(--fvnf-select-w) !important;
  max-width:var(--fvnf-select-w) !important;

  height:var(--fvnf-h) !important;
  line-height:var(--fvnf-h) !important;

  padding:0 var(--fvnf-px) !important;
  padding-right:2.35rem !important;

  border:var(--fvnf-b) solid rgba(46,125,79,.22) !important;
  border-radius:999px !important;

  background:rgba(255,255,255,.86) !important;
  color:var(--fv) !important;
  font-size:14px !important;
  font-weight:500 !important;
  font-family:inherit;

  box-sizing:border-box !important;
  -webkit-appearance:none !important;
  appearance:none !important;

  /* Chevron “FV” */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232e7d4f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:14px 14px !important;

  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

#fvnf-brand-select.orderby:hover,
.woocommerce .woocommerce-ordering select.orderby:hover{
  filter:brightness(.992);
}

#fvnf-brand-select.orderby:focus,
.woocommerce .woocommerce-ordering select.orderby:focus{
  outline:none;
  border-color:rgba(46,125,79,.42) !important;
  box-shadow:0 0 0 2px rgba(46,125,79,.12) !important;
}

/* Wrappers (Blocksy / Select2 / NiceSelect) */
.woocommerce .woocommerce-ordering :is(
  .ct-select,
  .orderby-select,
  .select2-container .select2-selection,
  .nice-select
){
  height:var(--fvnf-h) !important;
  display:flex !important;
  align-items:center !important;

  padding:0 var(--fvnf-px) !important;
  border:var(--fvnf-b) solid rgba(46,125,79,.22) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.86) !important;
  box-sizing:border-box !important;
}

/* Masquer chevrons/icônes parasites (mais on garde notre chevron via background-image du select) */
.woocommerce .woocommerce-ordering::before,
.woocommerce .woocommerce-ordering::after,
.woocommerce .woocommerce-ordering *::before,
.woocommerce .woocommerce-ordering *::after,
.ct-select__arrow,
.ct-select .ct-icon,
.orderby-select .ct-icon,
.select2-container .select2-selection__arrow,
.nice-select:after,
.woocommerce .woocommerce-ordering .ct-sort-icon,
.woocommerce .woocommerce-ordering svg.ct-sort-icon{
  display:none !important;
  content:'' !important;
}

/* ================== Séparateur sous la toolbar ================== */
.woocommerce ul.products{
  position:relative;
  margin-top:16px;
  transition:min-height .18s ease;
}
.woocommerce ul.products::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  border-top:1px solid rgba(0,0,0,.14);
}
.woocommerce .woocommerce-result-count{ display:none !important; }

/* ================== Notice "zéro résultat" ================== */
#fvnf-wrap .fvnf-notice{
  margin:12px 0 10px;
  padding:10px 12px;
  background:#f9f6ef;
  border:1px solid rgba(0,0,0,.12);
  border-left:3px solid var(--fv);
  border-radius:10px;
  font-size:14px;
  line-height:1.35;
}
@media (max-width:480px){
  #fvnf-wrap .fvnf-notice{
    font-size:13.5px;
    padding:9px 10px;
  }
}
#fvnf-wrap .fvnf-notice a{ text-decoration:underline; cursor:pointer; }

/* ==========================================================
   PAGE MARQUE + MODE COMPLET
   Hooks attendus sur #fvnf-wrap :
   - .fvnf--page-marque.fvnf--mode-full
   - .fvnf--page-brand.fvnf--mode-full
   Objectif :
   - ne cibler QUE les pages marque en mode complet
   - afficher un état d’attente dans "Vos besoins" tant qu’aucune gamme n’est ouverte
   ========================================================== */
#fvnf-wrap:is(.fvnf--page-marque, .fvnf--page-brand).fvnf--mode-full .fvnf__col{
  min-width:0;
}

#fvnf-wrap:is(.fvnf--page-marque, .fvnf--page-brand).fvnf--mode-full #fvnf-terms{
  position:relative;
  min-height:42px;
}

#fvnf-wrap:is(.fvnf--page-marque, .fvnf--page-brand).fvnf--mode-full #fvnf-terms:empty::before{
  content:"Choisissez une gamme pour afficher les besoins associés";
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border:1px dashed rgba(46,125,79,.24);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:rgba(43,43,43,.66);
  font-size:13.5px;
  line-height:1.25;
  box-sizing:border-box;
  white-space:normal;
  box-shadow:0 6px 18px rgba(0,0,0,.035);
}

@media (max-width:640px){
  #fvnf-wrap:is(.fvnf--page-marque, .fvnf--page-brand).fvnf--mode-full #fvnf-terms:empty::before{
    width:100%;
    min-height:auto;
    padding:10px 12px;
    border-radius:14px;
    font-size:13px;
  }
}

/* ==========================================================
   MODE ÉPURÉ — Termes figés + barre premium
   Classe attendue sur #fvnf-wrap : .fvnf--fixed-terms
   ========================================================== */

/* Neutraliser la grille 2 colonnes : une seule barre */
#fvnf-wrap.fvnf--fixed-terms{
  display:block;
  grid-template-columns:none;
  gap:0;
  margin:12px 0 10px;
  padding-inline:0;
}

/* Cacher attributs + titres (on garde uniquement les termes + selects) */
#fvnf-wrap.fvnf--fixed-terms .fvnf__divider{ display:none !important; }
#fvnf-wrap.fvnf--fixed-terms .fvnf__pills{ display:none !important; }
#fvnf-wrap.fvnf--fixed-terms .fvnf__title{ display:none !important; }

/* Reset inutile en mode épuré */
#fvnf-wrap.fvnf--fixed-terms :is(#fvnf-reset-global, .fvnf-reset){ display:none !important; }

/* Barre : grid (termes gauche / selects droite) */
#fvnf-wrap.fvnf--fixed-terms .fvnf__bar{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px 14px;

  padding:10px 0 12px;
  border:0;
  border-bottom:1px solid rgba(46,125,79,.18);
  background:transparent;
  box-shadow:none;
}

/* Zone termes */
#fvnf-wrap.fvnf--fixed-terms .fvnf__terms{
  position:relative;
  min-height:unset;
}

/* Termes : style outline (premium) */
#fvnf-wrap.fvnf--fixed-terms .fvnf-terms-group{ margin-bottom: 8px; }
#fvnf-wrap.fvnf--fixed-terms .fvnf-terms-list{
  display:flex;
  gap:10px;
}

/* Desktop/tablette : 1 ligne scrollable + dégradé à droite + "Voir plus" */
@media (min-width:641px){
  #fvnf-wrap.fvnf--fixed-terms .fvnf-terms-list.is-collapsed{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  #fvnf-wrap.fvnf--fixed-terms .fvnf-terms-list.is-collapsed::-webkit-scrollbar{ height:0; }

  /* Dégradé droite (toujours visible en collapsed) */
  #fvnf-wrap.fvnf--fixed-terms .fvnf__terms::after{
    content:"";
    position:absolute;
    top:-2px;
    right:0;
    height:calc(var(--fv-pill-h) + 6px);
    width:60px;
    pointer-events:none;
    background:linear-gradient(90deg, var(--fvnf-fade-bg-0), var(--fvnf-fade-bg));
  }

  /* Expanded : wrap + pas de fade */
  #fvnf-wrap.fvnf--fixed-terms .fvnf-terms-list.is-expanded{
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:0;
  }
  #fvnf-wrap.fvnf--fixed-terms .fvnf__terms.is-expanded::after{ display:none; }
}

/* Mobile : 2 lignes max + "Voir plus" (pas besoin de swipe) */
@media (max-width:640px){
  #fvnf-wrap.fvnf--fixed-terms .fvnf__bar{
    grid-template-columns:1fr;
    align-items:start;
  }

  #fvnf-wrap.fvnf--fixed-terms .fvnf-terms-list{
    flex-wrap:wrap;
    overflow:hidden;
  }

  #fvnf-wrap.fvnf--fixed-terms .fvnf-terms-list.is-collapsed{
    /* 2 lignes visibles */
    max-height:calc((var(--fv-pill-h) * var(--fvnf-mobile-lines)) + (10px * (var(--fvnf-mobile-lines) - 1)));
  }

  #fvnf-wrap.fvnf--fixed-terms .fvnf-terms-list.is-expanded{
    max-height:none;
  }

  /* Petit fade bas pour indiquer qu'il y a du contenu */
  #fvnf-wrap.fvnf--fixed-terms .fvnf__terms::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    height:18px;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(249,246,239,0), rgba(249,246,239,1));
  }
  #fvnf-wrap.fvnf--fixed-terms .fvnf__terms.is-expanded::after{ display:none; }
}

/* Pills outline (fixe termes) */
#fvnf-wrap.fvnf--fixed-terms .fvnf__term{
  background:rgba(255,255,255,.92) !important;
  color:var(--fv) !important;
  border-color:rgba(46,125,79,.28) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.045) !important;
  position:relative;
  z-index:1;
}
#fvnf-wrap.fvnf--fixed-terms .fvnf__term:hover{
  background:var(--fv) !important;
  color:#fff !important;
  border-color:var(--fv) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.08) !important;
  transform:none;
}
#fvnf-wrap.fvnf--fixed-terms .fvnf__term:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,255,133,.45), 0 0 0 1px rgba(0,0,0,.12);
}

/* "Voir plus / Voir moins" (si le JS l’injecte comme une pill) */
#fvnf-wrap.fvnf--fixed-terms .fvnf__term--more{
  background:transparent !important;
  color:rgba(0,0,0,.72) !important;
  border-color:rgba(0,0,0,.18) !important;
  box-shadow:none !important;
}
#fvnf-wrap.fvnf--fixed-terms .fvnf__term--more:hover{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}

/* Ordering : aligné, mêmes radius partout */
#fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering,
#fvnf-wrap.fvnf--fixed-terms .woocommerce-ordering{
  float:none !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:auto !important;
  flex:0 1 auto;
}

#fvnf-wrap.fvnf--fixed-terms #fvnf-brand-select.orderby,
#fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering select.orderby{
  width:clamp(210px, 18vw, 280px) !important;
  min-width:0 !important;
  max-width:none !important;
  border-radius:999px !important;
}

/* ================== FIX PRINCIPAL ==================
   Mobile (mode épuré) : Marques + Tri côte à côte
   =================================================== */
@media (max-width:640px){
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-rows: 36px !important;
    gap:10px !important;
    width:100% !important;
  }

  #fvnf-wrap.fvnf--fixed-terms #fvnf-brand-select.orderby{
    grid-column:1;
    grid-row:1;
    width:100% !important;
    height:36px !important;
    line-height:36px !important;
    font-size:13px !important;
  }

  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering select.orderby:not(#fvnf-brand-select){
    grid-column:2;
    grid-row:1;
    width:100% !important;
    height:36px !important;
    line-height:36px !important;
    font-size:13px !important;
  }
}

/* Très petit écran : repasse en 1 colonne si besoin */
@media (max-width:380px){
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering{
    grid-template-columns:1fr !important;
  }
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering select.orderby:not(#fvnf-brand-select){
    grid-column:1;
    grid-row:2;
  }
}

/* ================== Tablet (481–900px) mode normal ================== */
@media (min-width:481px) and (max-width:900px){
  #fvnf-wrap.fvnf-wrap{
    grid-template-columns:1fr;
    gap:14px;
  }
  #fvnf-wrap .fvnf__divider{ display:none; }

  .woocommerce .woocommerce-ordering{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-auto-rows:var(--fvnf-h);
    gap:12px !important;
    float:none !important;
    width:100% !important;
    align-items:center;
  }
  .woocommerce .woocommerce-ordering > *{ min-width:0; }
  #fvnf-brand-select.orderby{
    grid-column:1; grid-row:1;
    width:100% !important; min-width:0 !important; max-width:none !important;
    border-radius:999px !important;
  }
  .woocommerce .woocommerce-ordering select.orderby:not(#fvnf-brand-select),
  .woocommerce .woocommerce-ordering .orderby-select,
  .woocommerce .woocommerce-ordering .ct-select,
  .woocommerce .woocommerce-ordering .select2-container,
  .woocommerce .woocommerce-ordering .nice-select{
    grid-column:2; grid-row:1;
    width:100% !important; min-width:0 !important; max-width:none !important;
    border-radius:999px !important;
  }

  .woocommerce ul.products{ margin-top:14px; }
  .woocommerce ul.products::before{ top:-8px; }
}

/* ================== Mobile (≤480px) mode normal ================== */
@media (max-width:480px){
  #fvnf-wrap.fvnf-wrap{
    grid-template-columns:1fr;
    gap:14px;
  }
  #fvnf-wrap .fvnf__divider{ display:none; }

  #fvnf-wrap .fvnf__pills{
    overflow-x:visible;
    flex-wrap:wrap;
    row-gap:8px;
  }

  #fvnf-wrap :is(.fvnf__pill, .fvnf__term){
    font-size:12.5px;
    padding:0 .78rem;
    min-height:34px;
  }

  /* FIX (mode normal) : reset + marques + tri sur la même ligne si possible */
  .woocommerce .woocommerce-ordering{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-auto-rows:36px;
    gap:10px !important;
    float:none !important;
    width:100% !important;
    align-items:center;
  }
  .woocommerce .woocommerce-ordering > *{ min-width:0; }

  #fvnf-brand-select.orderby{
    grid-column:1; grid-row:1;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:36px !important;
    line-height:36px !important;
    padding:0 var(--fvnf-px) !important;
    border-radius:999px !important;
    font-size:13px !important;
  }

  .woocommerce .woocommerce-ordering select.orderby:not(#fvnf-brand-select),
  .woocommerce .woocommerce-ordering .orderby-select,
  .woocommerce .woocommerce-ordering .ct-select,
  .woocommerce .woocommerce-ordering .select2-container,
  .woocommerce .woocommerce-ordering .nice-select{
    grid-column:2;
    grid-row:1;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:36px !important;
    border-radius:999px !important;
  }

  /* Si écran ultra étroit : on repasse la 3e colonne en dessous */
  @media (max-width:390px){
    .woocommerce .woocommerce-ordering{
      grid-template-columns:1fr;
      grid-auto-rows:36px;
    }
    .woocommerce .woocommerce-ordering select.orderby:not(#fvnf-brand-select),
    .woocommerce .woocommerce-ordering .orderby-select,
    .woocommerce .woocommerce-ordering .ct-select,
    .woocommerce .woocommerce-ordering .select2-container,
    .woocommerce .woocommerce-ordering .nice-select{
      grid-column:1;
      grid-row:2;
    }
  }

  /* Pas de chevrons natifs */
  #fvnf-brand-select.orderby,
  .woocommerce .woocommerce-ordering select.orderby{
    -webkit-appearance:none !important;
    appearance:none !important;
  }
  .woocommerce .woocommerce-ordering select.orderby::-ms-expand{ display:none !important; }

  .woocommerce ul.products{ margin-top:14px; }
  .woocommerce ul.products::before{ top:-8px; }
}

/* ================== Dark mode ================== */
@media (prefers-color-scheme: dark){
  #fvnf-wrap{ color:#e9e9e9; }

  #fvnf-wrap.fvnf--fixed-terms .fvnf__bar{
    border-bottom-color:rgba(124,255,133,.22);
  }

  #fvnf-wrap.fvnf--fixed-terms .fvnf__term{
    background:rgba(255,255,255,.06) !important;
    color:#e9f7ee !important;
    border-color:rgba(124,255,133,.22) !important;
    box-shadow:0 10px 26px rgba(0,0,0,.28) !important;
  }
  #fvnf-wrap.fvnf--fixed-terms .fvnf__term:hover{
    background:rgba(46,125,79,.84) !important;
    color:#fff !important;
  }

  #fvnf-brand-select.orderby,
  .woocommerce .woocommerce-ordering select.orderby{
    background:rgba(255,255,255,.06) !important;
    color:#e9e9e9 !important;
    border-color:rgba(255,255,255,.14) !important;
  }
  #fvnf-brand-select.orderby:focus,
  .woocommerce .woocommerce-ordering select.orderby:focus{
    border-color:rgba(124,255,133,.35) !important;
    box-shadow:0 0 0 2px rgba(124,255,133,.14) !important;
  }

  #fvnf-wrap:is(.fvnf--page-marque, .fvnf--page-brand).fvnf--mode-full #fvnf-terms:empty::before{
    background:rgba(255,255,255,.05);
    color:rgba(233,233,233,.78);
    border-color:rgba(124,255,133,.22);
    box-shadow:0 10px 26px rgba(0,0,0,.22);
  }
}

/* ==========================================================
   FVNF — PATCH Mobile (fixed-terms)
   Objectif : "Toutes les marques" + "Tri par" côte à côte, propre
   ========================================================== */

@media (max-width: 640px){

  /* 2 colonnes : Tri un peu plus large que Marques */
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering{
    display:grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap:10px !important;
    width:100% !important;
    align-items:center !important;
  }

  /* selects compacts + ellipsis */
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering select.orderby{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:36px !important;
    line-height:36px !important;

    font-size:12.5px !important;
    font-weight:500 !important;
    letter-spacing:-.1px;

    padding-left:12px !important;
    padding-right:30px !important; /* place pour le chevron */
    border-radius:999px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    /* chevron un poil plus “serré” */
    background-position:right 10px center !important;
    background-size:13px 13px !important;
  }

  /* sécurise le cas Blocksy/ct-select qui force des largeurs */
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering,
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering > *{
    min-width:0 !important;
  }
}

/* Ultra étroit : on compacte encore */
@media (max-width: 420px){

  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering{
    gap:8px !important;
    grid-template-columns: minmax(0, .90fr) minmax(0, 1.10fr) !important;
  }

  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering select.orderby{
    font-size:12px !important;
    padding-left:10px !important;
    padding-right:28px !important;
    background-position:right 9px center !important;
  }
}

/* --------------------------------------------------------------------------
 * FIX (641–980px) — mode fixed-terms : empêcher les selects (marque + tri)
 * de partir hors-écran sur tablettes / petites résolutions.
 *
 * Objectif UX : garder les 2 contrôles visibles (pas de scroll horizontal),
 * avec un layout stable.
 * -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 980px){

  /* On empile : termes (ligne 1), contrôles (ligne 2) */
  #fvnf-wrap.fvnf--fixed-terms .fvnf__bar{
    grid-template-columns: 1fr;
    align-items: start;
  }

  /* Les contrôles passent en grille 2 colonnes pleine largeur */
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering,
  #fvnf-wrap.fvnf--fixed-terms .woocommerce-ordering{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    justify-content: unset !important;
  }

  /* Les selects prennent toute la largeur de leur colonne */
  #fvnf-wrap.fvnf--fixed-terms #fvnf-brand-select.orderby,
  #fvnf-wrap.fvnf--fixed-terms .woocommerce .woocommerce-ordering select.orderby,
  #fvnf-wrap.fvnf--fixed-terms .woocommerce-ordering select.orderby{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* UI toggles (admin settings) */
#fvnf-wrap.fvnf--no-titles .fvnf__title{display:none!important}
#fvnf-wrap.fvnf--no-reset :is(#fvnf-reset-global,.fvnf-reset){display:none!important}
#fvnf-wrap.fvnf--no-brand #fvnf-brand-select{display:none!important}