/* ============================================================================
   Smile · Filtros sidebar/sheet — Acordeón + Top N + Buscador + Scroll
   ----------------------------------------------------------------------------
   Handoff: design_handoff_smile_filtros_desktop (20260602-filtdesk)
   Aplica las 4 técnicas al MISMO partial (.sf-facet) en desktop (sidebar)
   y móvil (bottom-sheet). Reutiliza los tokens y patrones de
   filters-sheet-v4.css. Se cargan AMBOS CSS: v4 (base sheet móvil) + este
   (acordeón / vermás / search / scroll / chips arriba del sidebar).
   ============================================================================ */

/* =================== BASE COMÚN (desktop + móvil) =================== */

/* Cabecera de la faceta — clicable */
.sf-fhead{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none;
  padding:14px 2px;
  font-variant-numeric: tabular-nums;
}
.sf-fhead:focus-visible{ outline:2px solid var(--sf-champ); outline-offset:2px; border-radius:6px; }
.sf-fhead-label{ display:inline-flex; align-items:center; gap:8px; }
.sf-fhead .sf-facet-title{
  margin:0; font-family:var(--sf-body); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sf-champ);
}
.sf-fhead .sf-fcount{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--sf-burgundy); color:#fff;
  font-family:var(--sf-body); font-size:10px; font-weight:600;
  font-variant-numeric: tabular-nums;
}
.sf-fhead .sf-chev{
  margin-left:auto; color:var(--sf-ink3);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  display:inline-flex; align-items:center;
}
.sf-facet.sf-collapsed .sf-chev{ transform:rotate(-90deg); }

/* Cuerpo plegable */
.sf-fbody{ overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1); }
.sf-facet.sf-collapsed .sf-fbody{ max-height:0 !important; }
.sf-fbody-inner{ padding:2px 2px 18px; }

/* Override: cuando el partial ya está envuelto en sf-fhead/sf-fbody, no doblar padding */
.sf-facet{ padding:0; }
.sf-facet .sf-facet-title{ margin:0; }

/* ---- Buscador genérico dentro de faceta (reusa .sf-color-search) ---- */
.sf-fsearch{ position:relative; margin:0 0 12px; }
.sf-fsearch input{
  width:100%; height:40px; border:1px solid var(--sf-line); border-radius:999px;
  background:#fff; padding:0 16px; font-family:var(--sf-body); font-size:13px;
  color:var(--sf-ink); outline:none;
}
.sf-fsearch input:focus{ border-color:var(--sf-champ); }

/* ---- Top N + Ver más ---- */
.sf-list .sf-item.sf-over{ display:none; }
.sf-facet.sf-expanded .sf-list .sf-item.sf-over{ display:list-item; }
.sf-list--colors .sf-item.sf-over{ display:none; }
.sf-facet.sf-expanded .sf-list--colors .sf-item.sf-over{ display:flex; }

.sf-vermas{
  margin-top:14px; background:none; border:0; padding:6px 0; cursor:pointer;
  font-family:var(--sf-body); font-size:13px; font-weight:500;
  color:var(--sf-burgundy);
  display:inline-flex; align-items:center; gap:6px;
  font-variant-numeric: tabular-nums;
}
.sf-vermas svg{ width:13px; height:13px; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.sf-facet.sf-expanded .sf-vermas svg{ transform:rotate(180deg); }
.sf-vermas:hover{ color:var(--sf-burgundy); text-decoration:underline; text-underline-offset:3px; }

/* ---- Búsqueda en vivo: ocultar ítems no coincidentes ---- */
.sf-list .sf-item.sf-hidden-by-search{ display:none !important; }
.sf-list--colors .sf-item.sf-hidden-by-search{ display:none !important; }

/* ---- Scroll acotado tras expansión ---- */
.sf-facet.sf-expanded .sf-list,
.sf-list.sf-scroll{
  max-height:400px; overflow-y:auto; padding-right:6px;
}
.sf-facet.sf-expanded .sf-list::-webkit-scrollbar,
.sf-list.sf-scroll::-webkit-scrollbar{ width:4px; }
.sf-facet.sf-expanded .sf-list::-webkit-scrollbar-thumb,
.sf-list.sf-scroll::-webkit-scrollbar-thumb{ background:var(--sf-line); border-radius:3px; }

/* Color list bound to a smaller scroll cap (more compact in 2-col grid) */
.sf-facet[data-key="color"] .sf-list--colors{
  max-height:268px; overflow-y:auto; padding-right:6px;
}
.sf-facet[data-key="color"] .sf-list--colors::-webkit-scrollbar{ width:4px; }
.sf-facet[data-key="color"] .sf-list--colors::-webkit-scrollbar-thumb{ background:var(--sf-line); border-radius:3px; }

/* Talla (chips) no aplica overflow ni scroll */
.sf-facet[data-key="talla"] .sf-list--chips{ overflow:visible; max-height:none; }

/* =================== CHIPS DE FILTROS ACTIVOS (arriba del sidebar) =================== */
/* Activos en desktop: arriba del primer .sf-facet. Reusa #js-active-search-filters */
@media (min-width:961px){
  #js-active-search-filters.active_filters{ margin-bottom:8px; padding:0; }
  #js-active-search-filters .active-filter-title{ display:none; }
  #js-active-search-filters ul{
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:7px;
  }
  #js-active-search-filters li.filter-block{
    margin:0; padding:0; list-style:none;
  }
  /* sf-active-remove ya tiene su pill burgundy en smile-v2-tokens.css.
     Aquí sólo aseguramos buen layout y nada que rompa esa pieza. */
  #js-active-search-filters .sf-active-remove{
    display:inline-flex; align-items:center; gap:6px;
    font-variant-numeric: tabular-nums;
  }
}

/* En móvil los chips activos ya viven en la sticky bar (.mfilters-bar);
   ocultar la sección dentro del aside para no duplicar. */
@media (max-width:960px){
  body aside.smile-filters #js-active-search-filters{ display:none; }
}

/* =================== DESKTOP-ONLY (≥961px) =================== */
@media (min-width:961px){
  /* En desktop, las facetas viven dentro de aside.smile-filters; permitimos
     que la cabecera respire un poco más. */
  body aside.smile-filters .sf-facet{ border-bottom:1px solid var(--sf-line); }
  body aside.smile-filters .sf-facet:last-child{ border-bottom:0; }
  body aside.smile-filters .sf-fhead{ padding:18px 2px; }
  /* La grid de colores en desktop usa 2 col fijas (igual que móvil) */
  body aside.smile-filters .sf-list--colors{ grid-template-columns:1fr 1fr; }
}

/* =================== MÓVIL (≤960px) =================== */
@media (max-width:960px){
  /* Cabecera más compacta para sheet */
  body aside.smile-filters .sf-fhead{ padding:17px 2px; }
}

/* Compatibilidad: el legacy `.sf-hidden` (v4 partial pre-acordeón) se mapea a sf-over */
.sf-list .sf-item.sf-hidden{ display:none; }
.sf-facet.sf-expanded .sf-list .sf-item.sf-hidden{ display:list-item; }
.sf-list--colors .sf-item.sf-hidden{ display:none; }
.sf-facet.sf-expanded .sf-list--colors .sf-item.sf-hidden{ display:flex; }

/* === Fix: color row no debe wrappear, nombre con ellipsis + count nowrap === */
.sf-facet[data-key="color"] .sf-opt,
body aside.smile-filters .sf-facet[data-key="color"] .sf-opt {
  flex-wrap: nowrap;
  min-width: 0;
  align-items: center;
}
.sf-facet[data-key="color"] .sf-link,
body aside.smile-filters .sf-facet[data-key="color"] .sf-link {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.sf-facet[data-key="color"] .sf-link .sf-name,
body aside.smile-filters .sf-facet[data-key="color"] .sf-link .sf-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sf-facet[data-key="color"] .sf-link .sf-count,
body aside.smile-filters .sf-facet[data-key="color"] .sf-link .sf-count {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* === Fix: padding vertical para anillo champagne + contención de grid colors === */
.sf-facet[data-key="color"] .sf-list--colors,
body aside.smile-filters .sf-facet[data-key="color"] .sf-list--colors {
  gap: 14px 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: hidden;
}
.sf-facet[data-key="color"] .sf-list--colors .sf-item,
body aside.smile-filters .sf-facet[data-key="color"] .sf-list--colors .sf-item {
  min-width: 0;
}
.sf-facet[data-key="color"] .sf-list--colors .sf-opt,
body aside.smile-filters .sf-facet[data-key="color"] .sf-list--colors .sf-opt {
  padding: 4px 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* === Fix: dejar room para el anillo champagne del swatch seleccionado === */
.sf-facet[data-key="color"] .sf-list--colors,
body aside.smile-filters .sf-facet[data-key="color"] .sf-list--colors {
  overflow: visible;
  padding: 8px 6px;
}
/* Contención horizontal para que nombres largos no expandan la grid: límite por columna */
.sf-facet[data-key="color"] .sf-list--colors .sf-item,
body aside.smile-filters .sf-facet[data-key="color"] .sf-list--colors .sf-item {
  min-width: 0;
  overflow: hidden;
}

/* === Quitar overflow:hidden del item para que el anillo champagne renderice completo === */
.sf-facet[data-key="color"] .sf-list--colors .sf-item,
body aside.smile-filters .sf-facet[data-key="color"] .sf-list--colors .sf-item {
  overflow: visible;
}

/* === Color list: sin max-height (compatibility con overflow:visible para anillo) === */
.sf-facet[data-key="color"] .sf-list--colors,
body aside.smile-filters .sf-facet[data-key="color"] .sf-list--colors {
  max-height: none;
  overflow: visible;
}