/* =========================================================================
   ESENCIA · pieza CATÁLOGO (pantalla 02 de la maqueta)

   La lista de productos: tienda, categorías, colecciones y búsqueda.
   La plantilla de Elementor lleva estas clases (las pone gen.py):

     .esc-cat                 la caja de todo (1180 px, 44 px a cada lado)
       .esc-cat__miga         INICIO / LEGGINS               [esencia_miga]
       .esc-cat__cab          título + resumen | ordenar      (línea abajo)
         .esc-cat__titulo                                     [esencia_cat_cabecera]
         .esc-cat__orden                                      [esencia_orden]
       .esc-cat__cuerpo       filtros (200 px) | lista
         .esc-cat__filtros                                    [esencia_filtros]
         .esc-cat__lista
           .esc-cat__rejilla  widget "Productos de archivo" de Elementor
           .esc-cat__vacio                                    [esencia_sin_resultados]

   Medidas tomadas de la maqueta (p1-esencia.html, .miga / .cat-cab /
   .cuerpo / .filtro / .pag) con el navegador, a 1180 px.
   La tarjeta de cada producto es de la pieza BASE (esencia.css): aquí solo
   se dice que van 3 por fila.
   ========================================================================= */

/* ------------------------------------------------ la caja de todo */

.e-con.esc-cat {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --width: 100%;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 44px !important;           /* .env de la maqueta */
  box-sizing: border-box;
  display: block !important;
  font-family: var(--esc-sans);
  color: var(--esc-tinta);
  letter-spacing: normal;
}
/* Las cajas de adentro: sin relleno ni huecos de Elementor (el diseño lo pone esta hoja). */
.esc-cat .e-con {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}
.esc-cat .elementor-widget {
  margin: 0 !important;
  min-width: 0;
}
.esc-cat .elementor-shortcode,
.esc-cat .elementor-widget-container { margin: 0; padding: 0; }
.esc-cat a { text-decoration: none; }

/* ------------------------------------------------ miga: INICIO / LEGGINS */

.esc-miga {
  font-family: var(--esc-sans) !important;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--esc-grafito-pdf);
  padding: 26px 0;
}
.esc-miga a,
.esc-miga span { color: inherit !important; font: inherit; letter-spacing: inherit; }
.esc-miga a:hover { color: var(--esc-tinta) !important; }

/* ------------------------------------------------ cabecera: título | ordenar */

.e-con.esc-cat__cab {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 24px;
  padding: 0 0 26px !important;
  border-bottom: 1px solid var(--esc-linea);
}
.esc-cat__cab > .elementor-widget { width: auto !important; flex: 0 1 auto !important; }
.esc-cat__cab > .esc-cat__orden { flex: none !important; }

.esc-cat-tit__h {
  font-family: var(--esc-serif) !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: var(--esc-tinta) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-transform: none !important;
}
.esc-cat-tit__p {
  font-family: var(--esc-sans) !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: var(--esc-grafito-pdf) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Herramientas: [FILTRAR ▾] (solo tableta y celular) y ORDENAR: LO MÁS NUEVO ▾ */
.esc-herr { display: flex; align-items: flex-end; gap: 10px; }

.esc-orden { position: relative; }
.esc-orden > summary,
button.esc-filtrar {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--esc-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #3C3B41 !important;
  background: transparent !important;
  border: 1px solid var(--esc-linea) !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  min-height: 0 !important;
  white-space: nowrap;
  user-select: none;
  transition: border-color .15s ease;
}
.esc-orden > summary::-webkit-details-marker { display: none; }
.esc-orden > summary::marker { content: ""; }
.esc-orden > summary:hover,
.esc-orden[open] > summary,
button.esc-filtrar:hover,
button.esc-filtrar[aria-expanded="true"] { border-color: var(--esc-tinta) !important; color: var(--esc-tinta) !important; }
.esc-orden > summary:focus-visible,
button.esc-filtrar:focus-visible { outline: 1px solid var(--esc-tinta); outline-offset: 2px; }
.esc-orden__et { white-space: pre; }
.esc-orden__v { overflow: hidden; text-overflow: ellipsis; }
.esc-flecha { white-space: pre; }

/* La lista que se abre (sin sombra, línea de un pelo, fondo porcelana). */
.esc-orden__lista {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  z-index: 40;
  min-width: 100%;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--esc-porcelana);
  border: 1px solid var(--esc-tinta);
}
.esc-orden__lista li { margin: 0; padding: 0; list-style: none; }
.esc-orden__lista a {
  display: block;
  padding: 9px 16px;
  font-family: var(--esc-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--esc-grafito-pdf) !important;
}
.esc-orden__lista a:hover,
.esc-orden__lista a.is-on { color: var(--esc-tinta) !important; }
.esc-orden__lista a.is-on { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px !important; }

/* "Filtrar" solo en tableta y celular. */
button.esc-filtrar { display: none; }

/* ------------------------------------------------ cuerpo: filtros | lista */

.e-con.esc-cat__cuerpo {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 50px;
  row-gap: 0;
  align-items: start;
  padding: 38px 0 80px !important;
}
.esc-cat__cuerpo > .esc-cat__filtros { grid-column: 1; }
.esc-cat__cuerpo > .esc-cat__lista { grid-column: 2; display: block !important; }

/* Los filtros (columna de 200 px) */
.esc-filtros { display: block; }
.esc-fg {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--esc-linea);
}
.esc-fg:last-child { border-bottom: none; }
.esc-filtros .esc-fg__t {
  font-family: var(--esc-sans) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: var(--esc-tinta) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.esc-fg__l { list-style: none; margin: 0 !important; padding: 0 !important; }
.esc-fg__l li { list-style: none; margin: 0 0 11px; padding: 0; }
.esc-op {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--esc-sans);
  font-size: 12.5px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  color: #4A4950 !important;
}
.esc-op__caja {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid #B9B6B0;
  background: transparent;
}
.esc-op.is-on .esc-op__caja { background: var(--esc-tinta); border-color: var(--esc-tinta); }
.esc-op:hover .esc-op__caja { border-color: var(--esc-tinta); }
.esc-op:hover .esc-op__txt { color: var(--esc-tinta); }
.esc-op__n { font-size: 11px; font-weight: 300; color: var(--esc-grafito-pdf); }
.esc-op:focus-visible { outline: 1px solid var(--esc-tinta); outline-offset: 3px; }

/* ------------------------------------------------ la rejilla: 3 por fila */

.esc-cat .esc-cat__rejilla ul.products,
.esc-cat .esc-cat__rejilla ul.products.elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.esc-cat .esc-cat__rejilla ul.products::before,
.esc-cat .esc-cat__rejilla ul.products::after { display: none !important; content: none !important; }
.esc-cat .esc-cat__rejilla ul.products li.product {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}
.esc-cat .esc-cat__rejilla .woocommerce-notices-wrapper:empty,
.esc-cat .esc-cat__rejilla .woocommerce-sorting-wrapper,
.esc-cat .esc-cat__rejilla .woocommerce-result-count,
.esc-cat .esc-cat__rejilla .woocommerce-ordering { display: none !important; }

/* ------------------------------------------------ paginación: 1 2 3 … 18 › */

.esc-cat .woocommerce-pagination,
.esc-cat nav.woocommerce-pagination {
  display: block !important;
  margin: 0 !important;
  padding: 50px 0 0 !important;
  text-align: center;
  border: none !important;
}
.esc-cat .woocommerce-pagination ul.page-numbers {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  list-style: none;
  white-space: normal;
}
.esc-cat .woocommerce-pagination ul.page-numbers li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important;
}
.esc-cat .woocommerce-pagination ul.page-numbers li .page-numbers {
  display: grid !important;
  place-items: center;
  box-sizing: border-box;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--esc-linea) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--esc-tinta) !important;
  font-family: var(--esc-sans) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  transition: border-color .15s ease;
}
.esc-cat .woocommerce-pagination ul.page-numbers li a.page-numbers:hover { border-color: var(--esc-tinta) !important; }
.esc-cat .woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background: var(--esc-tinta) !important;
  color: var(--esc-porcelana) !important;
  border-color: var(--esc-tinta) !important;
}

/* ------------------------------------------------ sin resultados */

.esc-vacio { padding: 6px 0 0; max-width: 520px; }
.esc-vacio__t {
  font-family: var(--esc-serif) !important;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--esc-tinta);
  margin: 0 0 22px;
}
.esc-vacio__e { margin: 0; display: flex; flex-wrap: wrap; gap: 26px; }
.esc-vacio__a {
  font-family: var(--esc-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--esc-tinta) !important;
  border-bottom: 1px solid var(--esc-tinta);
  padding-bottom: 3px;
}

/* =========================================================================
   TABLETA (≤ 1024 px): los filtros se pliegan tras "Filtrar" y la lista
   ocupa todo el ancho, con 3 columnas.
   ========================================================================= */
@media (max-width: 1024px) {
  .e-con.esc-cat { padding: 0 24px !important; }
  .esc-miga { padding: 22px 0; }
  .esc-cat-tit__h { font-size: 38px !important; }

  button.esc-filtrar { display: flex; }

  .e-con.esc-cat__cuerpo {
    display: block !important;
    padding: 0 0 64px !important;
  }
  .esc-cat__cuerpo > .esc-cat__lista { padding-top: 32px !important; }

  /* Panel de filtros: tres grupos lado a lado, línea de un pelo abajo. */
  .esc-filtros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 32px;
    padding: 28px 0 26px;
    border-bottom: 1px solid var(--esc-linea);
  }
  .esc-fg { padding: 0; margin: 0; border: none; }
  .esc-fg__l li { margin-bottom: 13px; }

  /* Con JavaScript, plegados hasta que se toca "Filtrar". */
  .esc-cat-js .esc-filtros { display: none; }
  .esc-cat-js.esc-filtros-abiertos .esc-filtros { display: grid; }
  /* La flechita gira al abrir (solo el dibujo; el espacio de antes se queda en su sitio). */
  .esc-flecha__g { display: inline-block; transition: transform .15s ease; }
  .esc-cat-js.esc-filtros-abiertos button.esc-filtrar .esc-flecha__g { transform: rotate(180deg); }
  /* Sin JavaScript, el botón no serviría: no se muestra. */
  html:not(.esc-cat-js) button.esc-filtrar { display: none; }
}

/* =========================================================================
   CELULAR (≤ 767 px): 16 px a los lados, título y herramientas uno debajo
   del otro, rejilla de 2 columnas.
   ========================================================================= */
@media (max-width: 767px) {
  .e-con.esc-cat { padding: 0 16px !important; }
  .esc-miga { padding: 18px 0 16px; font-size: 10.5px; }

  .e-con.esc-cat__cab {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px;
    padding-bottom: 20px !important;
  }
  .esc-cat__cab > .elementor-widget { width: 100% !important; }
  .esc-cat-tit__h { font-size: 32px !important; line-height: 1.2 !important; margin-bottom: 6px !important; }

  .esc-herr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  html:not(.esc-cat-js) .esc-herr { grid-template-columns: minmax(0, 1fr); }
  .esc-orden > summary,
  button.esc-filtrar { padding: 11px 14px !important; justify-content: center; }
  .esc-orden > summary { justify-content: flex-start; }
  .esc-orden__v { flex: 0 1 auto; min-width: 0; }
  .esc-orden__lista { left: auto; right: 0; }

  /* Dos columnas: Talla y Precio a la izquierda, Detalle (el más largo) a la derecha. */
  .esc-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding: 24px 0 22px; align-items: start; }
  .esc-fg--talla, .esc-fg--precio { grid-column: 1; }
  .esc-fg--detalle { grid-column: 2; grid-row: 1 / span 2; }
  .esc-filtros:not(:has(.esc-fg--detalle)) .esc-fg--precio { grid-column: 2; grid-row: 1; }
  .esc-filtros:not(:has(.esc-fg--talla)) .esc-fg--detalle { grid-row: 1; }

  .esc-cat__cuerpo > .esc-cat__lista { padding-top: 24px !important; }
  .esc-cat .esc-cat__rejilla ul.products,
  .esc-cat .esc-cat__rejilla ul.products.elementor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .esc-cat .woocommerce-pagination { padding-top: 40px !important; }
  .esc-cat .woocommerce-pagination ul.page-numbers { gap: 6px; }
  .esc-cat .woocommerce-pagination ul.page-numbers li .page-numbers { width: 32px !important; height: 32px !important; }
  .esc-cat .woocommerce-pagination ul.page-numbers li.esc-pag-lejos { display: none !important; }

  .esc-vacio__t { font-size: 21px; }
}