/* RKT Catálogo — layout del archivo (filtros + grid).
   Las clases visuales (.cat-prod, .filter-chip, .field-lbl, .dist-input,
   .dist-select, .btn-rkt, .stat-num...) viven en el customCss global.
   Aquí solo el LAYOUT del shortcode (grid 4col + barra de filtros), en px
   para ser inmune al font-size raíz, replicando el grid Tailwind del original. */

:root{
	--blue:#1A3674;--navy:#0D1B45;--yellow:#FFCA00;--yellow-dk:#E5B400;--red:#FF0616;--gray:#F5F5F0;
	--font-display:'CWM','Kinship Sans',sans-serif;--font-body:'Inter RKT','Inter','Outfit',sans-serif;
}

/* ---- barra de filtros (tarjeta blanca, idéntica al original) ---- */
.rkt-cat-filterbar{background:#fff;border:1px solid rgba(0,0,0,.08);padding:26px;margin-bottom:32px}
.rkt-cat-fields{display:grid;grid-template-columns:4fr 2fr 2fr 2fr;gap:16px;align-items:end}

.rkt-cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}

/* ---- grid de productos (1/2/3/4 col responsive, = al Tailwind original) ---- */
.rkt-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rkt-cat-empty{grid-column:1/-1;padding:48px 32px;text-align:center;color:#888;border:1px dashed rgba(0,0,0,.15)}

/* la card hereda .cat-prod del customCss global; aquí solo el contain de la img */
.rkt-cat-grid .cat-prod .img img{object-fit:contain}

/* ---- paginación del listado (5 productos por página) ---- */
.rkt-cat-pagination{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:28px}
.rkt-cat-page-btn{background:#fff;border:1px solid rgba(0,0,0,.15);padding:10px 20px;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rkt-cat-page-btn:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy)}
.rkt-cat-page-btn:disabled{opacity:.35;cursor:not-allowed}
.rkt-cat-page-info{font-size:13px;color:#666;font-weight:600;letter-spacing:.04em;white-space:nowrap}

/* ---- barra de PDF descargable, al final del listado (mismo estilo navy con acento
   amarillo/rojo que tenía originalmente en el Single Product; el fondo/color/tipografía
   van inline en el shortcode porque esta hoja también se usa en páginas sin Tailwind) ---- */
.rkt-cat-pdfbar-action select{min-width:220px}

/* El <select> "Selecciona un PDF..." usa las clases reales .btn-rkt.btn-yellow del
   customCss global (mismo amarillo/skew/hover que el botón "Descargar PDF" de al
   lado) para la cara CERRADA del control. Como un <select> nativo no puede pintar su
   cara cerrada en un pseudo-elemento aparte, el truco es: el <span> visual hace de
   cara del botón y el <select> real queda invisible encima, cubriendo todo el
   wrapper, para conservar teclado/foco/opciones nativos. El <option>{background:#fff}
   de abajo es solo para el DESPLEGABLE (la lista que aparece al hacer clic), que sí
   debe verse blanco aunque el botón cerrado sea amarillo. */
.rkt-cat-pdf-select-wrap select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;appearance:none}
.rkt-cat-pdf-select-wrap select:focus{outline:2px solid #fff;outline-offset:2px}
.rkt-cat-pdf-select-wrap select option{background:#fff;color:var(--navy)}

@media(max-width:1100px){
	.rkt-cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
	.rkt-cat-grid{grid-template-columns:repeat(2,1fr)}
	.rkt-cat-fields{grid-template-columns:1fr 1fr}
	.rkt-cat-fsearch{grid-column:1/-1}
}
@media(max-width:560px){
	.rkt-cat-grid{grid-template-columns:1fr}
	.rkt-cat-fields{grid-template-columns:1fr}
	.rkt-cat-pdfbar-action{flex-direction:column;align-items:stretch!important}
	.rkt-cat-pdfbar-action .rkt-cat-pdf-select-wrap,.rkt-cat-pdfbar-action a{width:100%;box-sizing:border-box}
	/* .btn-rkt trae white-space:nowrap del customCss global (pensado para textos cortos
	   como "Descargar PDF"); con el texto largo del select ("Selecciona un PDF para
	   descargar...") eso hacía que se saliera de pantalla en vez de acomodarse. Acá se
	   permite que el texto haga salto de línea y quede centrado dentro del botón. */
	.rkt-cat-pdf-select-wrap,#rkt-cat-pdf-direct{white-space:normal;height:auto}
	.rkt-cat-pdf-select-wrap span,#rkt-cat-pdf-direct span{white-space:normal;text-align:center;width:100%}
	.rkt-cat-pagination{gap:14px}
	.rkt-cat-page-btn{padding:10px 14px;font-size:12px}
}