/*
 * Rediseño (2026-08-28): sin tarjetas, fondo blanco real, separadores finos
 * en vez de cajas — validado primero en un Artifact interactivo (mockup
 * "Rediseño Filtro PLP II") antes de portarlo acá. Paleta propia del
 * módulo (variables --fbg-* abajo) — YA NO comparte el lenguaje visual
 * con gino_pricefilter/views/css/pricefilter.css. El bloque .gpf-slider-*
 * de acá abajo sigue siendo la misma ESTRUCTURA/data-attributes que ese
 * módulo (mismo JS lee data-gpf-*), pero el pintado (colores, grosores) ya
 * diverge a propósito — si hay que tocar el slider de precio en los dos
 * módulos a la vez, hacerlo por separado en cada CSS.
 *
 * Tipografía: SIN font-family propia a propósito (corregido 2026-08-28 —
 * la primera pasada del rediseño importaba Fraunces + IBM Plex Sans por
 * Google Fonts, ajeno a la identidad real del sitio, que usa Inter
 * — --bs-body-font-family en theme.css). Todo acá hereda el font-family
 * del theme; los tamaños de esta hoja son deliberadamente chicos
 * (11-13px), en línea con el resto de los filtros/UI del sitio.
 */

:root {
  --fbg-paper: #ffffff;
  --fbg-ink: #161514;
  --fbg-ink-soft: #55514a;
  --fbg-muted: #8f8b82;
  --fbg-faint: #b8b3a8;
  --fbg-hairline: #e7e4de;
  --fbg-hairline-strong: #cfcabf;
  --fbg-wash: #f7f5f2;
  --fbg-fill: #161514;
  --fbg-fill-contrast: #ffffff;
}

.fbg-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  /* Mismo motivo que el padding de .fbg-filter-body-inner: en desktop,
     .fbg-filtergino-desktop tiene overflow-x:hidden (para el sticky) sin
     padding propio — sin este margen, el outline de foco por teclado del
     primer/último chip quedaba cortado. En mobile esto no aplica (el
     offcanvas no clipea overflow-x) y el override de abajo lo pisa a 0
     a propósito, alineado con el padding de .fbg-mobile-body. */
  padding: 0 6px;
}

.fbg-active-filters:empty {
  display: none;
  margin: 0;
}

#js-active-search-filters[hidden] {
  display: none !important;
}

/* El slot del theme junto a "Ordenar por" no es el nuestro: los chips
   viven en el sidebar. Se oculta aunque el AJAX vuelva a inyectarlo. */
body#category #js-active-search-filters,
#js-product-list-top #js-active-search-filters,
#js-product-list-top .fbg-active-filters {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.fbg-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--fbg-hairline-strong);
  border-radius: 2px;
  background: none;
  font-size: 12.5px;
  color: var(--fbg-ink);
  font-variant-numeric: tabular-nums;
}

.fbg-active-chip a,
.fbg-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  font-weight: 400;
  font-size: 13px;
  color: var(--fbg-muted);
  text-decoration: none;
  line-height: 1;
}

.fbg-active-chip a:hover,
.fbg-chip-remove:hover {
  color: var(--fbg-ink);
}

.fbg-chip-remove {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.fbg-reset-all {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fbg-muted);
  text-decoration: underline;
  text-decoration-color: var(--fbg-hairline-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.fbg-reset-all:hover {
  color: var(--fbg-ink);
  text-decoration-color: var(--fbg-ink);
}

/* Defensivo: si el theme resetea `outline` en los <a> globalmente (caso
   común), estos dos siguen mostrando foco de teclado igual. */
.fbg-active-chip a:focus-visible,
.fbg-chip-remove:focus-visible,
.fbg-reset-all:focus-visible {
  outline: 2px solid var(--fbg-ink);
  outline-offset: 2px;
}

/* ── Acordeón por tipo de filtro — sin tarjetas, solo hairlines ── */
.fbg-filtergino-desktop .fbg-filter:first-of-type {
  border-top: 1px solid var(--fbg-hairline);
}

.fbg-filter {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--fbg-hairline);
  border-radius: 0;
  background: none;
}

.fbg-filter-toggle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 6px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.fbg-filter-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fbg-ink);
}

.fbg-filter-count {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fbg-muted);
  margin-left: 5px;
}

.fbg-filter-chevron {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-bottom: 2px;
  border-right: 1px solid var(--fbg-ink-soft);
  border-bottom: 1px solid var(--fbg-ink-soft);
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.fbg-filter-toggle[aria-expanded='false'] .fbg-filter-chevron {
  transform: rotate(-45deg);
}

.fbg-filter-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition:
    grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

.fbg-filter-body-inner {
  overflow: hidden;
  min-height: 0;
  /* 6px a los costados (no solo abajo): mismo motivo que el margen del
     slider más abajo — este overflow:hidden (necesario para la animación
     de colapso) recorta cualquier cosa que sobresalga de su propio
     contenido, y varias cosas sobresalen un poco: el anillo de .fbg-swatch
     (inset:-5px) y el outline de foco de checkbox/chip/swatch (2px +
     offset). Sin este margen, quedaban cortados los que caen justo en el
     borde izquierdo/derecho — mismo bug que el del slider, encontrado acá
     al auditar el resto del acordeón por el mismo motivo. */
  padding: 0 6px 16px;
}

/* Cerrado desde el primer paint (clase en el HTML). display:none no
   anima: 0fr + overflow hidden sí. Sin JS, el noscript del hook
   fuerza 1fr para que los forms sigan visibles. */
.fbg-filter-body.gpf-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.fbg-filter-body.gpf-collapsed .fbg-filter-body-inner {
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fbg-filter-body,
  .fbg-filter-chevron,
  .fbg-feature-arrow {
    transition: none;
  }

  .fbg-feature-skeleton-row {
    animation: none;
    opacity: 0.6;
  }
}

.fbg-submit {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border: none;
  border-radius: 2px;
  background: var(--fbg-fill);
  color: var(--fbg-fill-contrast);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.fbg-submit:hover {
  background: var(--fbg-ink-soft);
}

/* ── Checkbox / radio custom: el input real sigue siendo el de siempre
   (name="...[]", data-fbg-option — initCheckGroup en JS no cambió), solo
   se le agrega al lado un <span> que CSS pinta encima vía selector de
   hermano (input:checked ~ .fbg-checkbox). Nunca duplica el estado: si
   algo desincroniza la clase que manda el servidor, esto sigue leyendo el
   checkbox real, en vivo. Compartido por Marca/Género (.fbg-check-row) y
   por el picker de Características (.fbg-feature-value-row/-match, ver
   más abajo) — por eso el selector de estado no depende de la fila que lo
   envuelve, solo de "un <label> con un input adentro". ── */
label:hover .fbg-checkbox,
label:hover .fbg-radio {
  border-color: var(--fbg-ink-soft);
}

label:focus-within .fbg-checkbox,
label:focus-within .fbg-radio {
  outline: 2px solid var(--fbg-ink);
  outline-offset: 2px;
}

.fbg-checkbox {
  position: relative;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.3px solid var(--fbg-hairline-strong);
  border-radius: 3px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

input:checked ~ .fbg-checkbox {
  background: var(--fbg-fill);
  border-color: var(--fbg-fill);
}

.fbg-checkbox svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  color: var(--fbg-fill-contrast);
  opacity: 0;
}

input:checked ~ .fbg-checkbox svg {
  opacity: 1;
}

.fbg-radio {
  position: relative;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.3px solid var(--fbg-hairline-strong);
  border-radius: 50%;
  transition: border-color 0.12s ease;
}

input:checked ~ .fbg-radio {
  border-color: var(--fbg-fill);
}

.fbg-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--fbg-fill);
  transform: scale(0);
  transition: transform 0.12s ease;
}

input:checked ~ .fbg-radio::after {
  transform: scale(1);
}

/* ── Marca / Género / Ordenar: lista con checkbox o radio custom ── */
.fbg-check-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 1px;
  font-size: 13px;
  color: var(--fbg-ink-soft);
  cursor: pointer;
}

.fbg-check-row:hover {
  color: var(--fbg-ink);
}

.fbg-check-row:has(input:checked) {
  color: var(--fbg-ink);
  font-weight: 500;
}

.fbg-check-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* ── Talla: chips finos (mismo criterio que "39 40 41 42" en las
   tarjetas de producto de np_prodtallas, ahora con el trazo fino y el
   monocromo del rediseño en vez de un borde grueso con sombra) ── */
.fbg-chip-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.fbg-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--fbg-hairline-strong);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fbg-ink-soft);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.fbg-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.fbg-chip:hover {
  border-color: var(--fbg-ink-soft);
  color: var(--fbg-ink);
}

/**
 * `.fbg-chip--active` (calculada por el servidor en cada render) Y
 * `:has(input:checked)` (calculada por el navegador, siempre en vivo)
 * al mismo tiempo — a propósito, no es redundante. Bug real encontrado
 * en producción: el checkbox real vive oculto acá, así que la marca
 * visual dependía SOLO de la clase que manda el servidor; si esa
 * respuesta se demora, se pisa, o el swap del DOM no llega a tiempo,
 * la marca visual queda desincronizada del checkbox real (que sigue
 * correcto — por eso el filtro seguía aplicando bien, solo la marca
 * visual se perdía). `:has(input:checked)` no puede desincronizarse
 * nunca, porque lee el estado real del checkbox directo, no una clase
 * que viajó por una respuesta de red.
 */
.fbg-chip--active,
.fbg-chip:has(input:checked) {
  background: var(--fbg-fill);
  border-color: var(--fbg-fill);
  color: var(--fbg-fill-contrast);
}

/* El checkbox real vive oculto (opacity:0) dentro del label — sin esto,
   un usuario navegando con teclado no ve cuál chip tiene el foco. */
.fbg-chip:focus-within {
  outline: 2px solid var(--fbg-ink);
  outline-offset: 2px;
}

/* ── Color: swatches circulares, anillo al pasar/marcar en vez de un
   borde grueso alrededor del color real (que lo desvirtuaba) ── */
.fbg-swatch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 4px;
}

.fbg-swatch {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}

.fbg-swatch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.fbg-swatch-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.fbg-swatch::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.fbg-swatch:hover::after {
  border-color: var(--fbg-hairline-strong);
}

/* Mismo motivo que .fbg-chip--active de arriba — :has(input:checked)
   no puede desincronizarse nunca del checkbox real. */
.fbg-swatch--active::after,
.fbg-swatch:has(input:checked)::after {
  border-color: var(--fbg-ink);
}

.fbg-swatch:focus-within::after {
  outline: 2px solid var(--fbg-ink);
  outline-offset: 1px;
}

/* ── Características: selector de dos pasos (buscar característica →
   buscar valor). El HTML real (checkboxes name="feature[ID][]") vive
   oculto en .fbg-feature-raw — es la fuente de verdad y el fallback sin
   JS (ver <noscript> en FbgFilterGinoProvider::renderFeatureAccordion).
   Con JS activo, fbgfiltergino.js arma sobre esos mismos checkboxes la
   UI que sí se ve acá abajo (checkbox custom incluido, .fbg-checkbox
   arriba). ── */
.fbg-feature-raw {
  display: none;
  border: 0;
  padding: 0;
  margin: 0;
}

.fbg-feature-search {
  margin-bottom: 6px;
}

.fbg-feature-search-input {
  width: 100%;
  padding: 8px 2px;
  border: none;
  border-bottom: 1px solid var(--fbg-hairline-strong);
  background: none;
  font-size: 13px;
  color: var(--fbg-ink);
  box-sizing: border-box;
  border-radius: 0;
}

.fbg-feature-search-input::placeholder {
  color: var(--fbg-faint);
}

.fbg-feature-search-input:focus {
  outline: none;
  border-bottom-color: var(--fbg-ink);
}

.fbg-feature-subhead {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fbg-muted);
  padding: 11px 1px 5px;
}

.fbg-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fbg-feature-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 10px 1px;
  border: none;
  border-top: 1px solid var(--fbg-hairline);
  background: none;
  font-size: 13px;
  color: var(--fbg-ink-soft);
  text-align: left;
  cursor: pointer;
}

.fbg-feature-list li:first-child .fbg-feature-item {
  border-top: none;
}

.fbg-feature-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--fbg-muted);
}

.fbg-feature-arrow {
  color: var(--fbg-faint);
  font-size: 13px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.fbg-feature-item:hover {
  color: var(--fbg-ink);
}

.fbg-feature-item:hover .fbg-feature-arrow {
  transform: translateX(2px);
  color: var(--fbg-ink);
}

.fbg-feature-empty,
.fbg-feature-nojs {
  padding: 9px 1px;
  font-size: 13px;
  color: var(--fbg-faint);
}

/* Barras pulsantes mientras se espera el AJAX del catálogo (ver
   SKELETON_HTML en FbgFilterGinoProvider.php / fbgfiltergino.js) — un
   "Cargando…" en texto plano se sentía pobre para un ecommerce. */
.fbg-feature-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 1px;
}

.fbg-feature-skeleton-row {
  display: block;
  height: 11px;
  border-radius: 2px;
  background: var(--fbg-hairline);
  animation: fbg-feature-pulse 1.1s ease-in-out infinite;
}

.fbg-feature-skeleton-row:nth-child(1) {
  width: 62%;
}
.fbg-feature-skeleton-row:nth-child(2) {
  width: 78%;
  animation-delay: 0.08s;
}
.fbg-feature-skeleton-row:nth-child(3) {
  width: 45%;
  animation-delay: 0.16s;
}
.fbg-feature-skeleton-row:nth-child(4) {
  width: 70%;
  animation-delay: 0.24s;
}

@keyframes fbg-feature-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.fbg-feature-more {
  display: block;
  width: 100%;
  padding: 10px 1px 2px;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fbg-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--fbg-hairline-strong);
  text-underline-offset: 3px;
  text-align: left;
  cursor: pointer;
}

.fbg-feature-more:hover {
  color: var(--fbg-ink);
  text-decoration-color: var(--fbg-ink);
}

.fbg-feature-value-match,
.fbg-feature-value-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 1px;
  border-top: 1px solid var(--fbg-hairline);
  font-size: 13px;
  color: var(--fbg-ink-soft);
  cursor: pointer;
}

.fbg-feature-list li:first-child .fbg-feature-value-match,
.fbg-feature-list li:first-child .fbg-feature-value-row {
  border-top: none;
}

.fbg-feature-value-match:hover,
.fbg-feature-value-row:hover {
  color: var(--fbg-ink);
}

.fbg-feature-value-match input,
.fbg-feature-value-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.fbg-feature-value-match strong {
  font-weight: 500;
  color: inherit;
}

.fbg-feature-value-parent {
  margin-left: 4px;
  font-size: 12.5px;
  color: var(--fbg-muted);
}

.fbg-feature-value-head {
  display: flex;
  align-items: center;
  padding: 2px 0 10px;
}

.fbg-feature-back {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border: none;
  background: none;
  font-size: 12.5px;
  color: var(--fbg-muted);
  cursor: pointer;
}

.fbg-feature-back:hover {
  color: var(--fbg-ink);
}

.fbg-feature-value-title {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 14px;
  color: var(--fbg-ink);
}

/* Sin JS: el <noscript> de renderFeatureAccordion() vuelve a mostrar
   .fbg-feature-raw y esconde la UI de arriba — los checkboxes reales
   (con sus <label> de texto) quedan como una lista plana normal, sin el
   checkbox custom (no hace falta la teatralidad del SVG acá). */
.fbg-feature-raw label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--fbg-ink-soft);
  cursor: pointer;
}

/* ══════════════════ Slider de precio ══════════════════
   Misma estructura/data-attributes que gino_pricefilter/views/css/
   pricefilter.css (ver nota al principio del archivo), pintado propio:
   línea de 1px en vez de barra gruesa, handle chico sin sombra, tooltip
   sin globo — todo alineado a --fbg-*. */
.gpf-slider {
  position: relative;
  height: 24px;
  /* El handle sale unos px a cada lado; sin esto el sticky
     overflow-y:auto también muestra scroll horizontal. 12px (no 8px):
     el acordeón necesita overflow:hidden en .fbg-filter-body-inner para
     la animación de colapso — sin margen de sobra ahí, el borde del
     handle quedaba pegado/cortado justo en 0% y 100%. */
  margin: 14px 12px 22px;
}

.gpf-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--fbg-hairline-strong);
}

.gpf-slider-range {
  position: absolute;
  top: 50%;
  height: 1px;
  background: var(--fbg-ink);
}

.gpf-slider-handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: var(--fbg-paper);
  border: 1.4px solid var(--fbg-ink);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  transition: transform 0.12s ease;
}

.gpf-slider-handle:hover {
  transform: scale(1.15);
}

.gpf-slider-handle.is-dragging {
  cursor: grabbing;
  transform: scale(1.25);
}

.gpf-slider-handle:focus-visible {
  outline: 2px solid var(--fbg-ink);
  outline-offset: 3px;
}

/* Fondo propio (antes era texto suelto, sin nada detrás — se pisaba con
   cualquier cosa que hubiera debajo, ej. el precio tachado de una oferta)
   + anclado al borde que NO toca el handle, no centrado: el número crece
   HACIA ADENTRO del track en vez de hacia afuera, así nunca se corta
   contra el overflow:hidden del acordeón cuando el handle está pegado a
   un extremo (el caso justo donde antes se veía peor). */
.gpf-slider-tooltip {
  position: absolute;
  bottom: 100%;
  margin-bottom: 9px;
  padding: 3px 7px;
  border: 1px solid var(--fbg-hairline-strong);
  border-radius: 3px;
  background: var(--fbg-paper);
  box-shadow: 0 2px 6px rgba(22, 21, 20, 0.12);
  color: var(--fbg-ink);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gpf-slider-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 6px;
  height: 6px;
  background: var(--fbg-paper);
  border-right: 1px solid var(--fbg-hairline-strong);
  border-bottom: 1px solid var(--fbg-hairline-strong);
  transform: rotate(45deg) translateY(-4px);
}

[data-gpf-handle='min'] .gpf-slider-tooltip {
  left: 0;
}
[data-gpf-handle='min'] .gpf-slider-tooltip::after {
  left: 7px;
}
[data-gpf-handle='max'] .gpf-slider-tooltip {
  right: 0;
}
[data-gpf-handle='max'] .gpf-slider-tooltip::after {
  right: 7px;
}

.gpf-slider-handle.is-dragging .gpf-slider-tooltip,
.gpf-slider-handle:focus-visible .gpf-slider-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.gpf-slider-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--fbg-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .gpf-slider-handle {
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
  }

  /* El bloque de escritorio (fbg_filtergino.php::hookDisplayLeftColumn)
     ya no hace falta en mobile — el botón "Filtrar" del theme abre
     #offcanvas-faceted (ver más abajo), que trae la misma info. Sin
     esto, ambos bloques renderizaban a la vez: el de escritorio quedaba
     visible e inline, empujando toda la página hacia abajo. */
  .fbg-filtergino-desktop {
    display: none;
  }
}

/* Sidebar desktop: baja con el scroll (sticky), debajo del header.
   La columna izquierda tiene que estirarse a la altura del listado;
   si no, sticky no tiene recorrido y el bloque se queda arriba. */
@media (min-width: 992px) {
  body.layout-left-column #left-column.left-column {
    align-self: stretch;
    overflow: visible;
  }

  .fbg-filtergino-desktop {
    position: sticky;
    top: var(--fbg-filter-sticky-top, 12px);
    z-index: 3;
    /* max-height lo setea JS al espacio que queda bajo el header
       (si usáramos 100dvh fijo, arriba de la página el bloque arranca
       más abajo y el final del sidebar queda cortado). El 2rem de
       abajo es POR FUERA: el box no besa el footer / la sección
       siguiente. El 6.25rem es POR DENTRO del scroll. */
    max-height: calc(100dvh - var(--fbg-filter-sticky-top, 12px) - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 6.25rem;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Sidebar mobile (#offcanvas-faceted) — el botón "Filtrar" del theme lo
   abre, Bootstrap 5 nativo (ya cargado por el theme) maneja apertura/
   cierre, backdrop, ESC y scroll-lock — cero JS propio para eso, ese
   mecanismo no cambió.

   Rediseño 2026-08-28: antes esta sección tenía su propio lenguaje
   ("orbes" circulares para Marca/Talla/Color, marcador diagonal, brillo
   animado en el botón "Ver productos" — todo pensado para una identidad
   más "next-gen" que ya no aplica). Ahora reusa exactamente los mismos
   accordions/checkbox/chip/swatch que escritorio (mismo HTML, ver
   FbgFilterGinoProvider::buildMobileFacetsHtml) — solo un par de ajustes
   de padding pensados para dedos en vez de mouse, y el offcanvas propio
   (header/footer/fondo) pintado con la misma paleta --fbg-*.
   ══════════════════════════════════════════════════════════════════ */

.fbg-mobile-offcanvas {
  --bs-offcanvas-width: 86vw;
  max-width: 420px;
  background: var(--fbg-paper);
  color: var(--fbg-ink);
  /* Bootstrap solo pone top:0/bottom:0 (sin height), y en Safari iOS eso
     no sigue de forma confiable la barra de herramientas dinámica: si se
     scrollea la página ANTES de abrir el panel, quedaba un hueco abajo
     (se veía el fondo de la página) en vez de cubrir todo el alto real.
     100dvh sigue el viewport visual real; 100vh es el fallback para
     navegadores sin soporte de dvh. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* Resguardo extra sobre el reparenting a <body> en fbgfiltergino.js —
     el theme usa z-index hasta 1200 en otros elementos flotantes
     (dropdown del buscador), así que el default de Bootstrap (1045) no
     alcanza a garantizar quedar por encima de todo en esta tienda. */
  z-index: 1210 !important;
}

.fbg-mobile-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--fbg-hairline);
}

.fbg-mobile-title {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--fbg-ink);
}

.fbg-mobile-close {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.fbg-mobile-close:hover {
  transform: rotate(90deg);
}

.fbg-mobile-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#offcanvas-faceted .fbg-filter {
  border-bottom: 1px solid var(--fbg-hairline);
}

#offcanvas-faceted .fbg-filter:first-of-type {
  border-top: none;
}

#offcanvas-faceted .fbg-active-filters {
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--fbg-hairline);
}

#offcanvas-faceted .fbg-active-chip {
  font-size: 12px;
}

#offcanvas-faceted .fbg-reset-all {
  margin-left: auto;
}

#offcanvas-faceted .fbg-filter-toggle {
  padding: 13px 6px;
}

#offcanvas-faceted .fbg-filter-title {
  font-size: 11.5px;
}

#offcanvas-faceted .fbg-filter-body-inner {
  padding-bottom: 18px;
}

#offcanvas-faceted .fbg-check-row,
#offcanvas-faceted .fbg-feature-item,
#offcanvas-faceted .fbg-feature-value-match,
#offcanvas-faceted .fbg-feature-value-row {
  padding-top: 10px;
  padding-bottom: 10px;
}

#offcanvas-faceted .fbg-chip {
  height: 38px;
  min-width: 40px;
}

/* iOS hace zoom automático del viewport entero al enfocar un <input> con
   font-size menor a 16px — con los 13px de escritorio, escribir acá
   disparaba ese zoom (bug real reportado, "hace zoom, terrible"). 16px
   nomás en mobile, no hace falta tocar el resto de la tipografía. */
#offcanvas-faceted .fbg-feature-search-input {
  font-size: 16px;
}

/* Precio — número grande arriba del slider (el slider en sí, .gpf-slider*,
   es el mismo que escritorio, mismos data-gpf-* — solo cambia lo que va
   arriba). */
.fbg-mobile-price-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.fbg-mobile-price-big b {
  font-size: 16px;
  font-weight: 500;
  color: var(--fbg-ink);
}

.fbg-mobile-price-big span {
  color: var(--fbg-faint);
  font-size: 13px;
}

.fbg-mobile-foot {
  display: flex;
  flex-shrink: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--fbg-hairline);
  background: var(--fbg-paper);
}

.fbg-mobile-apply {
  flex: 1;
  padding: 13px;
  border: none;
  border-radius: 2px;
  background: var(--fbg-fill);
  color: var(--fbg-fill-contrast);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.fbg-mobile-apply:hover {
  background: var(--fbg-ink-soft);
}

.fbg-mobile-apply:active {
  transform: scale(0.98);
}

/* ══════════════════════════════════════════════════════════════════
   Botón "Filtrar" y dropdown "Más vendidos" — markup del theme
   Hummingbird (catalog/listing/category.tpl, no vive en este repo),
   así que esto es 100% CSS apuntando a sus clases/id reales
   (`#search_filter_toggler`/`.products__filter-button`,
   `#sort_dropdown_button`) — nunca se toca/duplica su HTML. No entró en
   el rediseño (queda fuera del sidebar propio del módulo): mismo look
   negro sólido de siempre para no desentonar con otros botones pill que
   ya use el theme en otras partes del sitio.
   ══════════════════════════════════════════════════════════════════ */

#js-product-list-top #search_filter_toggler.products__filter-button,
#js-product-list-top #sort_dropdown_button.products__sort-dropdown-button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.5rem;
  min-height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  line-height: 1;
  border-width: 1.5px;
  border-radius: 999px;
}

#search_filter_toggler.products__filter-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid #111;
  border-radius: 999px;
  background: #111;
  color: #fff;
  padding: 0 16px 0 13px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

#search_filter_toggler.products__filter-button:hover,
#search_filter_toggler.products__filter-button:focus {
  background: #111;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

#search_filter_toggler.products__filter-button:active {
  transform: scale(0.96);
}

/* El ícono ya viene en el HTML del theme (`<i class="material-icons">`)
   — se inclina al pasar/tocar en vez de agregar uno nuevo. */
#search_filter_toggler .material-icons {
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#search_filter_toggler.products__filter-button:hover .material-icons {
  transform: rotate(-15deg) scale(1.1);
}

/* min-width:0 es necesario para que overflow/ellipsis funcionen en un
   hijo flex — por default un flex item no se achica más allá de su
   contenido (min-width:auto), así que un texto largo ("Descuento:
   mayor a menor %") empujaba el ancho de todo el bloque y apretaba el
   botón Filtrar al lado (bug real visto en producción). Mismo motivo
   en el contenedor (`.products__sort`), no solo en el botón. */
.products__sort {
  min-width: 0;
  flex: 1 1 auto;
}

#sort_dropdown_button.products__sort-dropdown-button {
  border: 1.5px solid #e2e2e2;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-weight: 600;
  min-width: 0;
  max-width: 100%;
  padding-left: 14px;
  padding-right: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}

#sort_dropdown_button.products__sort-dropdown-button:hover,
#sort_dropdown_button.products__sort-dropdown-button:focus {
  border-color: #111;
  color: #111;
}

/* Fila de subcategorías (Botines/Zapatos/Sandalias/Zapatillas en
   páginas como PLUMA) — NO es un módulo, es el bloque nativo de
   PrestaShop `.subcategory`/`.subcategory__list` que el theme muestra
   solo (catalog/listing/category.tpl, core, no vive en este repo)
   cuando la categoría tiene subcategorías hijas configuradas en el
   catálogo. Se oculta acá por CSS — a propósito NO se tocó ningún
   .tpl (ni del theme padre ni del child): las subcategorías siguen
   existiendo en el catálogo, solo dejan de mostrarse en la página. */
.subcategory {
  display: none;
}

/* Contador de productos por opción de faceta.
   Es la mitad visible del arreglo de facetas: sin el número, una opción que
   lleva a cero resultados se ve igual que una con 200. Discreto a propósito
   — informa, no compite con el nombre de la opción. */
.fbg-option-count {
    margin-left: 4px;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
}