/* ============================================================================
   Smile · Filtros móvil v4 — Ruta A (markup propio .sf-*)
   ----------------------------------------------------------------------------
   Estrategia: el override del partial (facets.tpl) emite SOLO clases propias
   `.sf-*`. Ni el bundle nativo de PrestaShop (`#search_filters .facet .magnitude
   {position:absolute…}`) ni el legacy del theme (`.smile-filters .facet[...]`)
   matchean estas clases → CERO guerra de specificity, CERO !important.
   Se conservan los hooks funcionales para el AJAX de ps_facetedsearch:
     #search_filters (contenedor), input[type=checkbox], a.js-search-link.
   El contenedor <aside class="smile-filters"> se mantiene para no romper la
   posición del sidebar desktop; SOLO el interior cambia a `.sf-*`.
   ============================================================================ */

:root{
  --sf-bg:#FAF7F2; --sf-ink:#241F1D; --sf-ink2:#6B6360; --sf-ink3:#9A928B;
  --sf-line:#E3D8CC; --sf-burgundy:#6B2C2C; --sf-champ:#B8924F; --sf-champ-soft:#CDAE78;
  --sf-disp:"Playfair Display",Georgia,serif; --sf-body:"Inter",sans-serif;
}

/* =================== ESTILO DE FACETAS (común desktop + móvil) =================== */
/* Solo .sf-* — no choca con .facet / .magnitude / #search_filters .facet */
.sf-facet{ padding:18px 0; border-bottom:1px solid var(--sf-line); }
.sf-facet:last-child{ border-bottom:0; }
.sf-facet-title{
  margin:0 0 12px; font-family:var(--sf-body); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sf-champ);
}
.sf-list{ list-style:none; margin:0; padding:0; }
.sf-item{ margin:0; padding:0; }
.sf-opt{ display:flex; align-items:center; gap:10px; margin:0; cursor:pointer; position:relative; }
.sf-input{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.sf-name{ font-family:var(--sf-body); font-size:14px; color:var(--sf-ink); }
.sf-count{ margin-left:auto; font-family:var(--sf-body); font-size:12px; color:var(--sf-ink3); }

/* ---- genéricos: composición / características / disponibilidad ---- */
.sf-facet[data-key="composicion"] .sf-opt,
.sf-facet[data-key="caracteristicas"] .sf-opt,
.sf-facet[data-key="disponibilidad"] .sf-opt{ padding:8px 0; }
.sf-box{
  width:18px; height:18px; border:1px solid var(--sf-champ-soft); border-radius:5px;
  background:#fff; flex:0 0 auto; position:relative; display:inline-block;
}
.sf-box::after{
  content:""; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0;
}
.sf-opt:has(.sf-input:checked) .sf-box{ background:var(--sf-burgundy); border-color:var(--sf-burgundy); }
.sf-opt:has(.sf-input:checked) .sf-box::after{ opacity:1; }

/* ---- Talla: chips 44px ---- */
.sf-list--chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sf-list--chips .sf-opt{ }
.sf-chip{
  min-width:44px; height:44px; padding:0 14px; border:1px solid var(--sf-line);
  border-radius:10px; background:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sf-body); font-size:14px; color:var(--sf-ink); white-space:nowrap;
}
.sf-opt:has(.sf-input:checked) .sf-chip{ background:var(--sf-ink); border-color:var(--sf-ink); color:#fff; }

/* ---- Color: grid 2col + swatch + fallback champagne ---- */
.sf-color-search{ margin:0 0 14px; }
.sf-color-search input{
  width:100%; height:44px; border:1px solid var(--sf-line); border-radius:999px; background:#fff;
  padding:0 16px; font-family:var(--sf-body); font-size:13.5px; color:var(--sf-ink); outline:none;
}
.sf-color-search input:focus{ border-color:var(--sf-champ); }
.sf-list--colors{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.sf-list--colors .sf-opt{ min-width:0; }
.sf-swatch{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.12); box-sizing:border-box;
  /* --sw lo setea el partial cuando hay HEX; si no, fallback champagne */
  background:var(--sw, linear-gradient(135deg,#EADfca,#CDAE78));
}
.sf-list--colors .sf-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-list--colors .sf-count{ margin-left:6px; flex:0 0 auto; }
.sf-opt:has(.sf-input:checked) .sf-swatch{ box-shadow:0 0 0 2px var(--sf-bg),0 0 0 4px var(--sf-champ); }
.sf-color-more{
  margin-top:14px; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sf-body); font-size:13px; font-weight:500; color:var(--sf-burgundy);
}
.sf-color-more[hidden]{ display:none; }

/* ---- Precio: slider ---- */
.sf-slider{ padding:14px 4px 0; }
.sf-range{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:var(--sf-line); outline:none; margin:0;
}
.sf-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff;
  border:1.5px solid var(--sf-champ); box-shadow:0 3px 8px rgba(0,0,0,.15); cursor:pointer;
}
.sf-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:#fff; border:1.5px solid var(--sf-champ);
  box-shadow:0 3px 8px rgba(0,0,0,.15); cursor:pointer;
}
.sf-slider-labels{ display:flex; justify-content:space-between; margin-top:12px; font-size:13px; color:var(--sf-ink); }

/* =================== MÓVIL: comportamiento de bottom-sheet =================== */
@media (max-width:960px){
  /* el aside (sidebar desktop) pasa a sheet inferior en móvil */
  body aside.smile-filters{
    position:fixed; inset:auto 0 0 0; width:100%; max-width:100%; max-height:90vh; height:auto;
    margin:0; padding:0; background:var(--sf-bg); border:0; border-radius:20px 20px 0 0;
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.4); display:flex; flex-direction:column;
    transform:translateY(100%); transition:transform .32s cubic-bezier(.22,1,.36,1);
    z-index:1001; overflow:hidden;
  }
  body aside.smile-filters.is-open{ transform:translateY(0); }

  .sf-grab{ width:38px; height:4px; border-radius:999px; background:var(--sf-line); margin:8px auto 0; flex:0 0 auto; }
  .sf-head{
    display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
    padding:14px 18px 12px; border-bottom:1px solid var(--sf-line);
  }
  .sf-title{ font-family:var(--sf-disp); font-weight:500; font-size:21px; color:var(--sf-ink); line-height:1; }
  .sf-head-actions{ display:flex; align-items:center; gap:14px; }
  .sf-clearall{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--sf-body);
    font-size:13px; color:var(--sf-ink2); text-decoration:underline; text-underline-offset:2px; }
  .sf-close{ width:36px; height:36px; border-radius:50%; border:1px solid var(--sf-line); background:#fff;
    color:var(--sf-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto; }
  .sf-close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }

  .sf-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 18px 12px; }

  .sf-foot{
    flex:0 0 auto; display:flex; gap:10px; align-items:center; padding:14px 18px;
    padding-bottom:max(14px, env(safe-area-inset-bottom)); border-top:1px solid var(--sf-line); background:var(--sf-bg);
  }
  .sf-clear{ flex:0 0 auto; padding:14px 18px; border:1px solid var(--sf-line); border-radius:999px;
    background:#fff; color:var(--sf-ink); font-family:var(--sf-body); font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; }
  .sf-apply{ flex:1 1 auto; min-width:0; padding:14px; border:0; border-radius:999px; background:var(--sf-burgundy);
    color:#fff; font-family:var(--sf-body); font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* scrim + lock */
  .sf-scrim{ position:fixed; inset:0; background:rgba(36,31,29,.45); z-index:1000; opacity:0; visibility:hidden; transition:opacity .3s ease; }
  .sf-scrim.is-open{ opacity:1; visibility:visible; }
  body.mfilters-open{ overflow:hidden; touch-action:none; }
  body.mfilters-open .whatsapp-fab,
  body.mfilters-open .whatsapp-float,
  body.mfilters-open [class*="whatsapp"]{ display:none !important; }
}

/* En desktop (>960px) los .sf-grab/.sf-head/.sf-foot del sheet no aplican: ocúltalos */
@media (min-width:961px){
  .sf-grab, .sf-head, .sf-foot, .sf-scrim{ display:none; }
}