/* EG · Categorías 2026 · eg-nivel (maqueta aprobada por Rafael el 28-sep-2026). Pieza 3.
   La encola mu-plugins/eg-cat-v2.php en wp_enqueue_scripts 101, dependencia emporio-garcia-main, versión filemtime.
   Solo actúa con body.eg-cat26 (categorías y madres con la pieza encendida): sin el mu-plugin no se carga.
   REGLAS DE ESTA HOJA (ESPEC piezas26/categorias §7)
   - Todo selector va con body delante (casi siempre body.eg-cat26), también los de clases propias: esta hoja queda antes que
     eg-brand-ui (25), eg-catalog-cards (99), eg-cat-movil-compacto (99) y eg-motion (pie), que se imprimen después.
   - !important solo contra un !important de hoy (se anota cuál).
   - Tokens de la base siempre con respaldo: la pieza no depende de que la base esté encendida.
   - No se redefinen --container-padding, --container-padding-mobile ni --font-serif. No se declara la Playfair de Google.
   - Sin el signo menor que en esta hoja, ni en comentarios. Corte celular/escritorio: 900/901, el de la base. */

body.eg-cat26{ --eg-cat26-gw-tope-m:96px; --eg-cat26-gw-tope-d:151px; }

/* ── 1 · Cabecera de la página (§7.1) ───────────────────────────────────────────────────────────── */
/* overflow-x:clip es de esta hoja: no depende del html,body{overflow-x:clip} de eg-rebajas.php:27, que tiene fecha de retiro */
body.eg-cat26 .eg-cat-hero{ padding:0; border-bottom:0; background:transparent; overflow-x:clip; }
body.eg-cat26 .eg-cat-hero-grid{ display:block; }
body.eg-cat26 .eg-cat-hero-eyebrow{ display:none; }
body.eg-cat26 .eg-breadcrumb{
  margin:0; padding-top:4px; display:flex; flex-wrap:nowrap; align-items:center; overflow-x:auto; scrollbar-width:none;
  white-space:nowrap; font:400 14px/1.4 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.04em;
  text-transform:uppercase; color:#555;
}
body.eg-cat26 .eg-breadcrumb::-webkit-scrollbar{ display:none; }
body.eg-cat26 .eg-breadcrumb a{ display:inline-flex; align-items:center; min-height:44px; }
body.eg-cat26 .eg-breadcrumb a:hover{ text-decoration:underline; text-underline-offset:4px; }
body.eg-cat26 .eg-breadcrumb-current{ color:var(--eg-tinta,#1A1A1A); }
/* el «/» de la maqueta sin tocar el HTML: el «·» queda en tamaño 0 y el lector de pantalla no lee la raya */
body.eg-cat26 .eg-breadcrumb-sep{ margin:0 10px; font-size:0; color:#555; }
body.eg-cat26 .eg-breadcrumb-sep::before{ content:"/"; content:"/" / ""; font-size:14px; }

/* palabra gigante = el H1 de la categoría (le gana al !important de eg-brand-ui.php:56-63: 0,2,1 contra 0,1,0) */
body.eg-cat26-gw .eg-cat-hero-title{
  font-family:'EG Cat GW',var(--eg-display,'PF-resp',Georgia,serif)!important;
  font-weight:400!important; font-style:normal!important; text-transform:uppercase!important;
  letter-spacing:.01em!important; line-height:.6!important;
  font-size:min(calc((100vw - 32px) / var(--eg-cat26-k,4)),23vw,var(--eg-cat26-gw-tope-m,96px))!important;
  white-space:nowrap; margin:0 0 calc(.31em + 10px); padding-top:2px; color:var(--eg-tinta,#1A1A1A); font-kerning:normal;
}
/* Ñ y tildes suben 0,19-0,22 em sobre la caja de .6: sin esto se montan sobre las migas */
body.eg-cat26-gw-tilde .eg-cat-hero-title{ padding-top:.2em; }
/* nombre largo (k mayor que palabra_gigante_k_max) y madres: Work Sans 300, como «Todo hombre» de la maqueta */
body.eg-cat26-cat:not(.eg-cat26-gw) .eg-cat-hero-title,
body.eg-cat26-madre .eg-cat-hero-title{
  font:300 30px/1.12 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif)!important;
  letter-spacing:-.01em!important; text-transform:none!important; margin:0; padding:10px 0 18px; color:var(--eg-tinta,#1A1A1A);
}
/* /mujer/: «Formentera» en la cursiva de la base (EG Playfair), mismo tamaño */
body.eg-cat26-madre .eg-cat-hero-title.eg-cat-hero-title-italic{
  font-family:var(--eg-display,Georgia,serif)!important; font-style:italic!important; font-weight:400!important;
}
body.eg-cat26 .eg-cat-hero-lead{
  font:400 16px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); color:#555; max-width:620px; margin:0 0 14px;
}
/* La bajada NO se esconde (revisión 29-sep): «Título, H1, bajada y meta no se tocan» mientras corren las lecturas de octubre
   (implementacion/3_categorias.md §4, que manda sobre la maqueta). Esconderla en las madres y en las categorías sin descripción
   va a la pregunta del H1 (ESPEC §14 A-1): si Rafael lo aprueba, es esta regla, con fecha:
   body.eg-cat26-madre .eg-cat-hero-lead, body.eg-cat26-sin-bajada .eg-cat-hero-lead{ display:none; } */
@media (min-width:901px){
  body.eg-cat26 .eg-breadcrumb{ padding-top:8px; }
  /* 36vw de ancho con tope de 14vw y de 151 px (TRAJES a 1440): sin tope en px la palabra crecía con la pantalla (ESPEC §7.1) */
  body.eg-cat26-gw .eg-cat-hero-title{
    font-size:min(calc(36vw / var(--eg-cat26-k,4)),14vw,var(--eg-cat26-gw-tope-d,151px))!important; padding-top:8px;
  }
  body.eg-cat26-gw-tilde .eg-cat-hero-title{ padding-top:.2em; }
  body.eg-cat26-cat:not(.eg-cat26-gw) .eg-cat-hero-title,
  body.eg-cat26-madre .eg-cat-hero-title{ font-size:40px!important; padding:28px 0; }
  body.eg-cat26 .eg-cat-hero-lead{ margin-bottom:12px; }
}

/* /hombre/ y /mujer/ son PÁGINAS: main.css (@media max-width 768, body.page main) les suma 32 px arriba y 16 a los lados
   sobre el margen de .eg-container (quedaban a 32 del borde, no a 16 como las categorías y la maqueta) */
@media (max-width:768px){
  body.eg-cat26-madre main.eg-main{ padding-top:0; padding-left:0; padding-right:0; }
}

/* ── 2 · Barra: CATEGORÍAS + FILTROS en una fila (celular, §7.3) ───────────────────────────────────── */
body.eg-cat26 .eg-cat-tabs{ color:var(--eg-tinta,#1A1A1A); }
@media (max-width:900px){
  /* alto fijo: la lista desplegada queda POR ENCIMA del contenido, sin mover nodos */
  body.eg-cat26 .eg-cat-tabs{
    position:relative; z-index:30; height:50px; box-sizing:border-box;
    border-top:1px solid var(--eg-linea,#E5E0D5); border-bottom:1px solid var(--eg-linea,#E5E0D5); background:var(--eg-papel,#FAF8F3);
  }
  body.eg-cat26 .eg-cat-picker-head{
    display:inline-flex; align-items:center; justify-content:flex-start; width:auto; max-width:calc(100% - 140px);
    min-height:48px; gap:10px; padding:0 var(--container-padding-mobile,16px); border-bottom:0;
    font:500 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase;
    color:var(--eg-tinta,#1A1A1A);
  }
  body.eg-cat26 .eg-cat-picker-actual{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  /* flecha de la base (12×8) en vez del cuadrado girado de eg-cat-movil-compacto:121-133 */
  body.eg-cat26 .eg-cat-picker-flecha{
    width:12px; height:8px; border:0; margin:0; transform:none; background:currentColor; flex:0 0 auto;
    -webkit-mask:var(--eg-i-abajo,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")) center / 12px 8px no-repeat;
    mask:var(--eg-i-abajo,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")) center / 12px 8px no-repeat;
    transition:transform .3s;
  }
  body.eg-cat26 .eg-cat-picker-toggle:checked ~ .eg-cat-picker-head .eg-cat-picker-flecha{ transform:rotate(180deg); margin:0; }
  body.eg-cat26 .eg-cat-picker-toggle:checked ~ .eg-cat-picker-head{ border-bottom:0; }
  body.eg-cat26 .eg-cat-tabs > .eg-container{
    background:var(--eg-papel,#FAF8F3); padding:8px var(--container-padding-mobile,16px) 16px;
    border-bottom:1px solid var(--eg-linea,#E5E0D5);
  }
  body.eg-cat26 .eg-cat-tabs > .eg-container:not(:last-child){ border-bottom:0; padding-bottom:0; }
  body.eg-cat26 .eg-cat-tabs .eg-cat-tab{
    display:flex; align-items:center; min-height:44px; padding:0; border:0; white-space:normal;
    font:400 14px/1.2 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.05em; text-transform:uppercase;
  }
  body.eg-cat26 .eg-cat-hermanas-label{
    display:block; margin-top:10px; padding:12px 0 4px; border-top:1px solid var(--eg-linea,#E5E0D5); opacity:1;
    font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#555;
  }
  /* FILTROS en la misma fila. ⛔ solo padding-top/-bottom (NO_ROMPER §2: el atajo borra el margen lateral) */
  body.eg-cat26 .eg-cat-tabs ~ .eg-filter-bar{
    position:relative; z-index:31; margin-top:-50px; margin-bottom:0; height:50px; display:flex; justify-content:flex-end;
    align-items:center; padding-top:0; padding-bottom:0; pointer-events:none;
  }
  body.eg-cat26 .eg-filter-trigger{
    pointer-events:auto; display:flex; align-items:center; width:auto; height:48px; gap:10px; flex-direction:row-reverse;
    border:0; padding:0; font:500 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em;
    color:var(--eg-tinta,#1A1A1A);
  }
  /* el ícono de hoy son tres rayas, igual a la hamburguesa del menú: se esconde y va el de reguladores de la maqueta (ICO['filtros'],
     build.py:79: dos rayas con perillas), dibujado con máscara en el color del texto; ::after para que row-reverse lo deje a la izquierda, como la maqueta */
  body.eg-cat26 .eg-filter-trigger svg{ display:none; }
  body.eg-cat26 .eg-filter-trigger::after{
    content:""; display:block; flex:0 0 auto; width:18px; height:14px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 3h9.4M14.6 3H18M0 11h3.4M8.6 11H18' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='3' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='11' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 18px 14px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 3h9.4M14.6 3H18M0 11h3.4M8.6 11H18' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='3' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='11' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 18px 14px no-repeat;
  }
}
@media (min-width:901px){
  body.eg-cat26 .eg-cat-tabs{ border-top:0; border-bottom:1px solid var(--eg-linea,#E5E0D5); background:transparent; }
  body.eg-cat26 .eg-cat-tabs .eg-container{ gap:0 28px; padding-top:0; padding-bottom:0; align-items:center; }
  body.eg-cat26 .eg-cat-tabs .eg-cat-tab{
    display:inline-flex; align-items:center; min-height:44px; padding:0; border:0;
    font:400 14px/1.2 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.05em; text-transform:uppercase;
  }
  body.eg-cat26 .eg-cat-tabs .eg-cat-hermanas{ gap:0 22px; align-items:center; }
  body.eg-cat26 .eg-cat-tabs .eg-cat-hermanas .eg-cat-tab{ font-size:14px; }
  body.eg-cat26 .eg-cat-hermanas-label{
    display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; border:0; opacity:1;
    font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#555;
  }
}
body.eg-cat26 .eg-cat-tabs .eg-cat-tab.is-active{ font-weight:500; text-decoration:underline; text-underline-offset:6px; border:0; }
body.eg-cat26 .eg-cat-tabs .eg-cat-tab:hover{ text-decoration:underline; text-underline-offset:6px; }

/* ── 3 · Herramientas y parrilla (§7.4) ──────────────────────────────────────────────────────────── */
body.eg-cat26 .eg-shop-layout{ padding-top:12px; }
body.eg-cat26 .eg-shop-count{ display:none; } /* el texto queda en el HTML: el verificador lo sigue leyendo */
body.eg-cat26 .eg-shop-toolbar{
  display:flex; flex-direction:row; justify-content:flex-start; align-items:center; min-height:44px; margin-bottom:12px; padding:0; gap:0;
}
body.eg-cat26 .eg-shop-orderby label{
  display:inline-flex; align-items:center; gap:8px; font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif);
  letter-spacing:.06em; text-transform:uppercase; color:#555;
}
/* Visible en el escritorio. En el celular la barra se esconde desde el 30-sep (D07, §8c) y el orden va dentro de Filtros:
   la comprobación 4 del verificador usa el <select> si se ve y, si no, abre FILTROS y toca «Precio: menor a mayor». */
body.eg-cat26 .eg-shop-orderby select{
  min-height:44px; font:400 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.04em; text-transform:uppercase;
  color:var(--eg-tinta,#1A1A1A); border:0; border-bottom:1px solid var(--eg-linea,#E5E0D5); border-radius:0; padding:0 22px 0 0;
  background-color:transparent;
}
body.eg-cat26 .eg-product-grid.eg-product-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 12px; }
body.eg-cat26 .eg-cat26-carga{ height:64px; }
/* sin «scroll anchoring» en /hombre/: al llegar al pie, lo que entra empuja el pie hacia abajo (la carga se ve) y el navegador no
   corrige el scroll por su cuenta, lo que el JS confundiría con un desplazamiento de la persona y cargaría sin fin */
body.eg-cat26-looks{ overflow-anchor:none; }
/* 30-sep (salto de diseño al bajar): mientras quedan prendas por traer, la sección final y el pie (con su franja legal del RUT, que
   eg-footer-legal.php pinta aparte, al final del body) no se dibujan. La clase la pone y la quita eg-cat-scroll.js: sale al llegar la
   última página o si la carga falla (con la paginación). Antes, si la página siguiente tardaba, entraban en pantalla y la página nueva
   los empujaba (CLS medido en producción el 30-sep 11:25: 0,337 celular y 0,789 escritorio en /trajes/, 0,141 escritorio en /mujer/).
   Sin JS la clase no existe: todo como siempre. En /hombre/ (looks) la vuelta no termina, así que el pie tampoco se dibuja: bajando
   ya no se alcanzaba (los enlaces de Información están en el menú, D08). */
body.eg-cat26-quedan .eg-cat26-fin,
body.eg-cat26-quedan footer.eg-footer,
body.eg-cat26-quedan .eg-footer-legal{ display:none; }
@media (min-width:901px){
  body.eg-cat26 .eg-shop-layout{ padding-top:20px; }
  body.eg-cat26 .eg-shop-toolbar{ justify-content:flex-start; margin-bottom:16px; } /* «Ordenar» a la izquierda: FILTROS va a la derecha (§8b) */
  body.eg-cat26 .eg-product-grid.eg-product-grid-3{ grid-template-columns:repeat(var(--eg-cat26-cols,3),minmax(0,1fr)); gap:56px 24px; }
  /* la foto de la derecha deja un hueco a su izquierda que llenan las dos tarjetas siguientes (maqueta estilo.css:438) */
  body.eg-cat26-looks .eg-product-grid.eg-product-grid-3{ grid-auto-flow:row dense; }
}

/* ── 4 · Tarjeta (§7.5): toda la tarjeta ya es un solo enlace ───────────────────────────────────────── */
body.eg-cat26 .eg-product-card-wrap{ min-width:0; }
body.eg-cat26 .eg-product-image{ background:#F0EBDF; }
body.eg-cat26 .eg-product-brand{ display:none; }
body.eg-cat26 .eg-cat26-dist{
  position:static; display:block; margin:12px 0 0; padding:0; background:none; border:0;
  font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#555;
}
/* el display de .eg-product-badge le ganaría al [hidden] del navegador */
body.eg-cat26 .eg-cat26-dist[hidden]{ display:none!important; }
body.eg-cat26 .eg-product-title{
  margin:12px 0 0; font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.04em;
  text-transform:uppercase; color:var(--eg-tinta,#1A1A1A); overflow-wrap:anywhere; -webkit-hyphens:none; hyphens:none;
}
/* 29-sep noche (verificación final M5): a 320 px «DESESTRUCTURADO» se salía 10,7 px de su tarjeta. Mismo remedio que la portada
   (portada-2026.css:172-175): el nombre trae guiones blandos por sílaba (eg_cat26_cortes) y solo bajo 390 px se usan
   («DESES-» / «TRUCTURADO»); desde 390 la palabra baja entera. Cualquier otra que no quepa se corta sin guion (overflow-wrap). */
@media (max-width:389px){
  body.eg-cat26 .eg-product-title{ -webkit-hyphens:manual; hyphens:manual; }
}
body.eg-cat26 .eg-cat26-dist:not([hidden]) + .eg-product-brand + .eg-product-title{ margin-top:2px; }
@media (hover:hover){
  body.eg-cat26 .eg-product-card:hover .eg-product-title{ color:var(--eg-tinta,#1A1A1A); text-decoration:underline; text-underline-offset:4px; }
}
/* precio sin negrita (Rafael 29-sep ~18:50: «no pongas el precio en negrita»): 400 también en el precio actual; el tachado sigue gris */
body.eg-cat26 .eg-product-price{
  margin-top:4px; font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.03em; color:var(--eg-tinta,#1A1A1A);
}
body.eg-cat26 .eg-product-price del{ font-size:14px; font-weight:400; color:#555; opacity:1; margin-right:8px; }
body.eg-cat26 .eg-product-price ins{ color:var(--eg-tinta,#1A1A1A); font-weight:400; }
body.eg-cat26 .eg-cat26-tallas{
  margin:2px 0 0; font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.03em; color:#555;
}
body.eg-cat26 .eg-cat26-vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Táctil (revisión 29-sep): con 2 tarjetas por fila, la carga perezosa del navegador pedía al abrir las 2.as fotos (eg-card-1152) de
   varias filas más abajo: 0,5-0,7 MB sin que nadie bajara. Mientras la tarjeta no está cerca de la pantalla su 2.ª foto no se dibuja,
   y una imagen perezosa sin dibujar no se pide. La clase eg-cat26-dif la pone eg-cat-scroll.js (sin JS, todo como hoy) y
   eg-cat26-cerca, su IntersectionObserver; la pasada de eg-motion espera hasta 5 s a que cargue.
   29-sep noche: se probó no dibujarla nunca en táctil (body.eg-cat26 .eg-motion-alt{display:none}: −351,6 KB en la 1.ª pantalla de
   /trajes/ y −177,1 KB en /hombre/, sin llegar a 450). Se deshizo: la pasada táctil es orden de Rafael del 21-sep (eg-motion.php
   2.1.0) y quitarla es pregunta para él (ESPEC §14 A-7). Si la aprueba, es esa regla, con su fecha y su frase. */
@media (hover:none){
  body.eg-cat26-dif .eg-product-card:not(.eg-cat26-cerca) .eg-motion-alt{ display:none; }
}

/* ── 5 · Foto de campaña entre looks (§7.6): hija directa de la parrilla, nunca una tarjeta ─────────── */
body.eg-cat26 .eg-cat26-ed{
  grid-column:1/-1; margin:8px calc(-1 * var(--container-padding-mobile,16px)); display:flex; flex-direction:column; min-width:0;
}
body.eg-cat26 .eg-cat26-ed-m{ position:relative; aspect-ratio:var(--eg-ar,4/5); background:#F0EBDF; overflow:hidden; }
body.eg-cat26 .eg-cat26-ed-foto{ display:block; height:100%; }
body.eg-cat26 .eg-cat26-ed-foto img{ display:block; width:100%; height:100%; object-fit:cover; }
body.eg-cat26 .eg-cat26-ed figcaption{ padding:16px var(--container-padding-mobile,16px) 0; display:grid; gap:2px; }
body.eg-cat26 .eg-cat26-ed-precio{
  margin:0; font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#555;
}
body.eg-cat26 .eg-cat26-ed-nombre{
  margin:0; font:300 26px/1.2 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:-.005em; color:var(--eg-tinta,#1A1A1A);
}
body.eg-cat26 .eg-cat26-ed-nombre a{ display:inline-flex; align-items:center; min-height:44px; }
body.eg-cat26 .eg-cat26-ed-nombre a:hover{ text-decoration:underline; text-underline-offset:6px; }
@media (min-width:901px){
  body.eg-cat26 .eg-cat26-ed{ grid-column:1 / span 2; grid-row:span 2; margin:0; }
  body.eg-cat26 .eg-cat26-ed--der{ grid-column:span 2 / -1; }
  body.eg-cat26 .eg-cat26-ed-m{ aspect-ratio:auto; flex:1 1 auto; min-height:clamp(480px,46vw,860px); }
  body.eg-cat26 .eg-cat26-ed figcaption{ padding:18px 0 0; }
}

/* ── 6 · Cierre: «Completa tu look» + «Otras categorías» (§7.7) ─────────────────────────────────────── */
body.eg-cat26 .eg-cat26-fin{ padding-top:56px; padding-bottom:88px; color:var(--eg-tinta,#1A1A1A); }
body.eg-cat26 .eg-cat26-fin-cab{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:40px 0 20px; }
body.eg-cat26 .eg-cat26-fin-t{
  margin:0; font:300 26px/1.2 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:-.005em; color:var(--eg-tinta,#1A1A1A);
}
body.eg-cat26 .eg-cat26-fila{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 12px) / 2.25); gap:12px; overflow-x:auto;
  overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
}
body.eg-cat26 .eg-cat26-fila::-webkit-scrollbar{ display:none; }
body.eg-cat26 .eg-cat26-fila > *{ scroll-snap-align:start; min-width:0; }
body.eg-cat26 .eg-cat26-fila .eg-cat26-tallas{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.eg-cat26 .eg-cat26-fila-ctl{ display:none; }
body.eg-cat26 .eg-cat26-fin-rot{
  margin:0; padding:40px 0 20px; font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em;
  text-transform:uppercase; color:var(--eg-tinta,#1A1A1A);
}
body.eg-cat26 .eg-cat26-otras{ display:flex; flex-wrap:wrap; gap:0 22px; margin:0; padding:0; list-style:none; }
body.eg-cat26 .eg-cat26-otras a{
  display:inline-flex; align-items:center; min-height:44px; font:400 14px/1.2 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif);
  letter-spacing:.05em; text-transform:uppercase;
}
body.eg-cat26 .eg-cat26-otras a:hover{ text-decoration:underline; text-underline-offset:6px; }
@media (min-width:901px){
  body.eg-cat26 .eg-cat26-fin{ padding-top:96px; }
  body.eg-cat26 .eg-cat26-fin-t{ font-size:30px; }
  body.eg-cat26 .eg-cat26-fila{ grid-auto-columns:calc((100% - 72px) / 4); gap:24px; }
  body.eg-cat26 .eg-cat26-fila-ctl:not([hidden]){ display:flex; gap:4px; }
  /* !important contra main.css:37-52 (button, [type=button] con fondo/color/borde !important) */
  body.eg-cat26 .eg-cat26-fila-ctl button{
    width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid var(--eg-linea,#E5E0D5)!important; background:transparent!important; color:var(--eg-tinta,#1A1A1A)!important;
  }
  body.eg-cat26 .eg-cat26-fila-ctl button:hover{ border-color:var(--eg-tinta,#1A1A1A)!important; }
  body.eg-cat26 .eg-cat26-fila-ctl .eg-cat26-ant svg{ transform:rotate(90deg); }
  body.eg-cat26 .eg-cat26-fila-ctl .eg-cat26-sig svg{ transform:rotate(-90deg); }
}

/* ── 7 · Paginación (visible sin JS o si el scroll falla) (§7.8) ────────────────────────────────────── */
/* el display:flex de main.css:3848 le gana al [hidden] del navegador */
body.eg-cat26 nav.woocommerce-pagination[hidden]{ display:none!important; }
body.eg-cat26 nav.woocommerce-pagination{ margin-top:28px; }
body.eg-cat26 nav.woocommerce-pagination ul.page-numbers{ gap:4px; }
body.eg-cat26 nav.woocommerce-pagination ul.page-numbers li .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 10px;
  font:400 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase;
}
body.eg-cat26 nav.woocommerce-pagination ul.page-numbers{ color:var(--eg-tinta,#1A1A1A); }
/* !important contra main.css:8281-8288 (la actual con fondo negro !important) */
body.eg-cat26 nav.woocommerce-pagination ul.page-numbers li .page-numbers.current{
  background-color:transparent!important; color:var(--eg-tinta,#1A1A1A)!important; border:0!important;
  border-bottom:1px solid var(--eg-tinta,#1A1A1A)!important;
}

/* ── 8 · Filtros: hoja desde abajo en el celular (§7.8); en el escritorio, panel a la derecha (8b) ──────────────────── */
@media (max-width:900px){
  /* padding !important contra eg-catalog-cards.php:96-110 */
  body.eg-cat26 .eg-shop-sidebar{
    border-radius:0; max-height:86vh; padding:0 16px 24px!important; background:var(--eg-papel,#FAF8F3); box-shadow:none;
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  body.eg-cat26 .eg-filter-drawer-head{
    height:60px; padding:0; margin:0; border-bottom:1px solid var(--eg-linea,#E5E0D5); background:var(--eg-papel,#FAF8F3);
  }
  body.eg-cat26 .eg-filter-drawer-title{
    font:400 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:var(--eg-tinta,#1A1A1A);
  }
  body.eg-cat26 .eg-filter-drawer-close{
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin-right:-10px;
    font-size:26px; line-height:1; color:var(--eg-tinta,#1A1A1A);
  }
  body.eg-cat26 #eg-filter-toggle:checked ~ .eg-filter-overlay{
    background:rgba(26,26,26,.45); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}
body.eg-cat26 .eg-sidebar-section{ padding:22px 0 4px; margin:0; border-bottom:0; }
body.eg-cat26 .eg-sidebar-label,
body.eg-cat26 .eg-sidebar-title{
  margin:0 0 12px; font:400 14px/1.45 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em;
  text-transform:uppercase; color:#555;
}
body.eg-cat26 .eg-talla-grid{ gap:8px; color:var(--eg-tinta,#1A1A1A); }
body.eg-cat26 .eg-talla-chip{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:48px; padding:0 12px;
  border:1px solid var(--eg-linea,#E5E0D5); background:transparent;
  font:400 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.04em;
}
body.eg-cat26 .eg-talla-chip:hover{ border-color:var(--eg-tinta,#1A1A1A); }
/* color !important contra main.css:55 (a{color:inherit!important}) */
body.eg-cat26 .eg-talla-chip.is-active{
  background:var(--eg-tinta,#1A1A1A); border-color:var(--eg-tinta,#1A1A1A); color:var(--eg-papel,#FAF8F3)!important;
}
/* ── 8c · ORDENAR dentro de Filtros en el celular (D07, Rafael 30-sep: «dentro de filtros», como la maqueta eg-nivel) ──────
   Opciones del mu-plugin (eg_cat26_panel_orden), con el mismo aspecto que las tallas. En el celular la fila «ORDENAR:» de la
   barra se esconde (las prendas suben 56 px, maqueta decisiones30/maquetas/d07_*); en el escritorio el panel no las muestra y
   queda el <select> de la barra, en la misma fila que FILTROS (8b). */
body.eg-cat26 .eg-cat26-orden-grid{ display:flex; flex-wrap:wrap; gap:8px; color:var(--eg-tinta,#1A1A1A); }
body.eg-cat26 .eg-cat26-orden-chip{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:48px; padding:0 14px;
  border:1px solid var(--eg-linea,#E5E0D5); background:transparent;
  font:400 14px/1.2 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.04em;
}
body.eg-cat26 .eg-cat26-orden-chip:hover{ border-color:var(--eg-tinta,#1A1A1A); }
body.eg-cat26 .eg-cat26-orden-chip.is-active{
  background:var(--eg-tinta,#1A1A1A); border-color:var(--eg-tinta,#1A1A1A); color:var(--eg-papel,#FAF8F3)!important;
}
@media (max-width:900px){
  body.eg-cat26 .eg-shop-toolbar{ display:none; }
}
@media (min-width:901px){
  body.eg-cat26 .eg-cat26-orden-panel{ display:none; }
}
body.eg-cat26 .eg-price-row{ gap:8px; }
body.eg-cat26 .eg-price-row input{
  height:44px; padding:0 10px; border:1px solid var(--eg-linea,#E5E0D5); border-radius:0; background:transparent;
  font:400 16px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); color:var(--eg-tinta,#1A1A1A);
}
/* !important contra main.css:3889-3903 y main.css:37-52 (fondo, color, borde y padding del botón con !important) */
body.eg-cat26 .eg-price-apply{
  width:100%; height:52px; margin-top:4px; background:var(--eg-tinta,#1A1A1A)!important; color:var(--eg-papel,#FAF8F3)!important;
  border:0!important; padding:0!important; font:500 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer;
}
body.eg-cat26 .eg-sidebar-section .eg-link-underline{
  display:inline-flex; align-items:center; min-height:44px; font:500 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif);
  letter-spacing:.06em; text-decoration:underline; text-underline-offset:7px;
}

/* ── 8b · Escritorio: FILTROS arriba y panel a la derecha (Rafael, 29-sep ~18:50) ──────────────────────────────────────────
   «cuando me meto a hombres o una categoría, el filtro ocupa mucho espacio a la izq, y luego al bajar, todo ese espacio se pierde.
   mejor poner el filtro arriba como un desplegable y usar todo ese espacio para producto». Sin columna: la parrilla va a todo el
   ancho (3 por fila, s13) y el botón FILTROS (el mismo label.eg-filter-trigger del celular) abre el aside como panel de 440 px a la
   derecha, a toda la altura, con velo (la .hoja de la maqueta eg-nivel ≥900). Mismo mecanismo que el celular: la casilla
   #eg-filter-toggle, CSS puro (sobrevive al retardo de JS de LiteSpeed). Los formularios, sus campos ocultos y $eg_rastreo no se
   tocan: el aside es el mismo, solo cambia dónde se pinta. FILTROS va a la DERECHA, como en la maqueta (#categoria a 1440: x 1301,
   dentro de .pag-barra) y como en el celular. «Ordenar» queda a la vista a la izquierda de la misma fila (en la maqueta va dentro de la
   hoja; aquí no, porque la comprobación 4 del verificador lo usa con select_option, como en el celular: desvío anotado, ESPEC §14 B).
   Nada de esto toca el celular (≤900). */
@media (min-width:901px){
  body.eg-cat26 .eg-shop-layout{ display:block; }
  /* la fila de FILTROS se monta sobre la de «Ordenar» (layout padding-top 20 + 44 de alto): el orden a la izquierda, el botón a la
     derecha, sin sumar alto. display !important contra eg-catalog-cards.php:130 (.eg-filter-bar{display:none!important} en ≥901) */
  body.eg-cat26 .eg-filter-bar{
    display:flex!important; position:relative; z-index:3; align-items:center; justify-content:flex-end; height:44px;
    margin-top:20px; margin-bottom:-64px; padding-top:0; padding-bottom:0; pointer-events:none;
  }
  body.eg-cat26 .eg-filter-trigger{
    pointer-events:auto; display:inline-flex; align-items:center; width:auto; height:44px; gap:10px; flex-direction:row-reverse;
    border:0; padding:0; cursor:pointer; font:400 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em;
    text-transform:uppercase; color:var(--eg-tinta,#1A1A1A);
  }
  body.eg-cat26 .eg-filter-trigger:hover span{ text-decoration:underline; text-underline-offset:6px; }
  body.eg-cat26 .eg-filter-trigger svg{ display:none; }
  body.eg-cat26 .eg-filter-trigger::after{
    content:""; display:block; flex:0 0 auto; width:18px; height:14px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 3h9.4M14.6 3H18M0 11h3.4M8.6 11H18' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='3' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='11' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 18px 14px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 3h9.4M14.6 3H18M0 11h3.4M8.6 11H18' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='3' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='11' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 18px 14px no-repeat;
  }
  /* el aside pasa a panel fijo. position y transform !important contra eg-catalog-cards.php:129 (transform:none!important;
     position:static!important en ≥901). Cerrado: fuera de la pantalla y visibility:hidden (el teclado no entra); abierto: adentro. */
  body.eg-cat26 .eg-shop-sidebar{
    position:fixed!important; top:0; right:0; bottom:0; left:auto; z-index:9999; box-sizing:border-box; width:440px; max-width:100%;
    height:auto; max-height:none; margin:0; padding:0 24px 32px; overflow-y:auto; overscroll-behavior:contain;
    background:var(--eg-papel,#FAF8F3); border:0; border-radius:0; box-shadow:none;
    transform:translateX(102%)!important; visibility:hidden; transition:transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s linear .4s;
  }
  body.eg-cat26 #eg-filter-toggle:checked ~ .eg-shop-layout .eg-shop-sidebar{
    transform:none!important; visibility:visible; transition:transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s;
  }
  /* velo: display !important contra eg-catalog-cards.php:130 */
  body.eg-cat26 .eg-filter-overlay{
    display:block!important; position:fixed; inset:0; z-index:9998; background:var(--eg-tinta,#1A1A1A); opacity:0; visibility:hidden;
    cursor:pointer; transition:opacity .3s, visibility .3s;
  }
  body.eg-cat26 #eg-filter-toggle:checked ~ .eg-filter-overlay{ opacity:.45; visibility:visible; }
  /* cabecera del panel (FILTROS + cerrar), fija arriba al desplazar: display !important contra eg-catalog-cards.php:130 */
  body.eg-cat26 .eg-filter-drawer-head{
    display:flex!important; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1; box-sizing:border-box;
    height:60px; margin:0 -24px; padding:0 14px 0 24px; background:var(--eg-papel,#FAF8F3); border-bottom:1px solid var(--eg-linea,#E5E0D5);
  }
  body.eg-cat26 .eg-filter-drawer-title{
    font:400 14px/1 var(--eg-ui,'Work Sans',system-ui,Arial,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:var(--eg-tinta,#1A1A1A);
  }
  body.eg-cat26 .eg-filter-drawer-close{
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; cursor:pointer;
    font-size:26px; line-height:1; color:var(--eg-tinta,#1A1A1A); -webkit-user-select:none; user-select:none;
  }
  body.eg-cat26 .eg-filter-desktop-title{ display:none; }
  body.eg-cat26 .eg-filter-drawer-close:focus-visible{ outline:2px solid var(--eg-tinta,#1A1A1A); outline-offset:-2px; }
}

/* ── 9 · Foco visible y movimiento reducido ──────────────────────────────────────────────────────── */
body.eg-cat26 .eg-cat-hero a:focus-visible,
body.eg-cat26 .eg-cat-tabs a:focus-visible,
body.eg-cat26 .eg-filter-trigger:focus-visible,
body.eg-cat26 .eg-shop-layout a:focus-visible,
body.eg-cat26 .eg-shop-layout select:focus-visible,
body.eg-cat26 .eg-shop-layout input:focus-visible,
body.eg-cat26 .eg-shop-layout button:focus-visible,
body.eg-cat26 .eg-cat26-fin a:focus-visible,
body.eg-cat26 .eg-cat26-fin button:focus-visible,
body.eg-cat26 .eg-cat26-fila:focus-visible{ outline:2px solid var(--eg-tinta,#1A1A1A); outline-offset:3px; }
body.eg-cat26 #eg-cat-picker:focus-visible ~ .eg-cat-picker-head{ outline:2px solid var(--eg-tinta,#1A1A1A); outline-offset:-2px; }
/* «Aplicar» tiene fondo tinta: el foco que gana es el de main.css (button:focus, 1 px negro, sin separación, !important) y queda
   pegado al negro del botón, sin verse (WCAG 2.4.7). !important contra ese !important de hoy. */
body.eg-cat26 .eg-price-apply:focus-visible{ outline:2px solid var(--eg-tinta,#1A1A1A)!important; outline-offset:3px!important; }
@media (prefers-reduced-motion:reduce){
  body.eg-cat26 .eg-cat-picker-flecha,
  body.eg-cat26 .eg-shop-sidebar,
  body.eg-cat26 #eg-filter-toggle:checked ~ .eg-shop-layout .eg-shop-sidebar,
  body.eg-cat26 .eg-filter-overlay{ transition:none; }
}