/* ============================================================
 * EKIPATE · CSS modular — PLP / CATÁLOGO          (PKG-EK-W1-11)
 * ------------------------------------------------------------
 * Pantalla de catálogo (/shop + taxonomías de producto) sobre
 * HUESO NEUTRO (D-164b: el cuerpo va on-light; el chrome, oscuro).
 * "restyle, don't redraw": se viste el DOM real de Woo/WoodMart
 * (banda de título, shop-loop-head, rejilla wd-col) sin reescribirlo
 * ni romper su AJAX (PJAX sobre .wd-page-content).
 *
 * ALCANCE AJUSTADO (decisión del cliente, turno 34): catálogo LIMPIO
 * full-width, SIN sidebar de filtros (los micrositios tienen pocos
 * productos; un sidebar no aporta). Los steps de filtros (3-4) del
 * plan quedan OMITIDOS; aquí no hay reglas de layered nav.
 *
 * Carga: condicional a tienda (is_shop() || is_product_taxonomy()),
 * tras ekp-store-components (C) — reuse-first: ProductCard, Breadcrumb
 * y demás primitivos viven en C; aquí solo el CONTEXTO de pantalla.
 * SOLO tokens --ekp-* (stylelint). Breakpoints: 1024 / 768 / 480.
 * ============================================================ */

/* ── Step 1 · Lienzo full-width (sin sidebar) ─────────────────
 * El contenedor de tienda YA es full-width a una columna (PKG-02:
 * main.wd-content-layout.container, sin sidebar registrada; verificado
 * en :9001 — 1265px de viewport 1280, .wd-content-area sin padding).
 * Sin sidebar que montar ni desmontar, el step 1 se reduce a este
 * andamiaje: el archivo + su carga condicional. Cero reglas aquí a
 * propósito (nada especulativo); cabecera, toolbar y rejilla visten
 * en sus bloques (steps 2/5/6). */

/* ── Step 2 · Cabecera de catálogo (banda on-light) ───────────
 * La banda nativa va en negro con texto claro (Theme Settings,
 * .color-scheme-light) y faja centrada. D-164b: el catálogo es CUERPO
 * → se reviste al hueso del lienzo y pasa a cabecera editorial alineada
 * a la izquierda: eyebrow versalita cobre (copper-500: detalle, no
 * fondo), título display Archivo (D-166) y recuento en Martian Mono
 * (el recuento es un dato). El eyebrow/recuento los emite un hook en
 * functions.php tras el H1; el orden visual eyebrow→título→recuento
 * lo da flex order (restyle: el DOM no se reordena). */
.wd-page-title.page-title-default {
    background-color: var(--ekp-surface-body);
    color: var(--ekp-text-on-light);
    padding-block: var(--space-xl) 0;
}

/* El centrado de la faja nativa (title-design-centered) vive en su
 * .container (flex centrado); la cabecera editorial ancla a la izquierda. */
.wd-page-title.page-title-default > .container {
    align-items: flex-start;
    text-align: start;
}

.wd-page-title .wd-title-wrapp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--space-xs);
    text-align: start;
}

.wd-page-title .entry-title.title {
    margin: 0;
    font-family: var(--ekp-type-display-family);
    font-size: var(--ekp-text-display-md);
    font-weight: var(--ekp-type-display-weight);
    line-height: var(--ekp-type-display-leading);
    letter-spacing: var(--ekp-type-display-tracking);
    color: var(--ekp-text-on-light);
}

/* En categorías WoodMart cuela un botón "volver" (icono, 40px) entre
 * eyebrow y título. El breadcrumb de la fila inferior ya da ese camino
 * con más claridad; el circulito es ruido en la cabecera limpia. */
.wd-page-title .wd-title-wrapp .wd-back-btn {
    display: none;
}

.ekp-plp-head__eyebrow {
    order: -1;
    font-family: var(--ekp-type-label-family);
    font-size: var(--ekp-text-xs);
    font-weight: var(--ekp-type-label-weight);
    letter-spacing: var(--ekp-tracking-label);
    text-transform: uppercase;
    /* Tinta calida AA sobre hueso (PEND-27): el cobre pequeno cae a 3.33:1 (< AA).
     * warm-700 = 8.31:1. Token FIJO (no --ekp-text-accent) -> tampoco vira al color
     * del club dentro de .ekp-club-scope: la etiqueta queda en tinta en toda superficie. */
    color: var(--ekp-warm-700);
}

.ekp-plp-head__count {
    font-family: var(--ekp-type-mono-family);
    font-size: var(--ekp-text-sm);
    font-weight: var(--ekp-type-mono-weight);
    letter-spacing: var(--ekp-type-mono-tracking);
    font-variant-numeric: tabular-nums;
    color: var(--ekp-text-on-light-muted);
}

/* Ritmo banda → fila de utilidades: el main mete 40px propios; sobre el
 * mismo hueso la cabecera y su fila de breadcrumb/orden deben leerse
 * como UN bloque, así que se acorta la respiración solo en el catálogo. */
.woocommerce-shop main.wd-content-layout,
.tax-product_cat main.wd-content-layout,
.tax-product_tag main.wd-content-layout {
    padding-block-start: var(--space-sm);
}

/* ── Step 5 · Fila de utilidades: breadcrumb + orden ──────────
 * Catálogo SIN filtros (alcance ajustado): no hay chips de filtro
 * aplicado ni sidebar; la fila queda en su mínima expresión elegante —
 * breadcrumb a la izquierda (vestido en C), selector de orden a la
 * derecha. El per-page del demo ("Show 9/12/18/24") se retira: el
 * cliente pidió SOLO el selector de orden (los micrositios tienen
 * pocos productos; esa palanca es ruido). Reversible: solo display. */
.shop-loop-head {
    margin-block-end: var(--space-lg);
}

.shop-loop-head .wd-products-per-page {
    display: none;
}

/* ── Step 2 · PKG-EK-W1-17 (P3) · Toolbar on-brand sobre hueso ─────────────────
 * La fila nativa caia con el recuento en Archivo 16px y FUERA de linea base (su
 * centro ~10px sobre breadcrumb/orden, medido en :9001). Se viste a META on-brand:
 * el recuento «Mostrando X-Y de N» pasa a Martian Mono (es un DATO, idioma Mono del
 * DS) y todo se alinea a una linea base comun; un filete inferior asienta la fila
 * sobre el hueso y le da aire. Restyle del markup nativo (el DOM no se reordena),
 * generico a todo el catalogo (shop + taxonomias + micrositio de club). */
.shop-loop-head {
    padding-block-end: var(--ekp-space-3);
    border-bottom: 1px solid var(--ekp-border-on-light);
}

/* Breadcrumb + recuento comparten linea base (antes el recuento flotaba arriba). */
.shop-loop-head .wd-shop-tools {
    align-items: baseline;
    column-gap: var(--ekp-space-4);
    row-gap: var(--ekp-space-1);
}

/* Recuento = dato -> Mono mudo, tabular (no "baila" al paginar), sin el margen nativo. */
.shop-loop-head .woocommerce-result-count {
    margin: 0;
    font-family: var(--ekp-type-mono-family);
    font-size: var(--ekp-text-xs);
    font-weight: var(--ekp-type-mono-weight);
    letter-spacing: var(--ekp-type-mono-tracking);
    font-variant-numeric: tabular-nums;
    color: var(--ekp-text-on-light-muted);
}

/* Select de orden on-light: mismo idioma que el Input de C (caja sobre
 * tokens de contexto + foco cobre con halo). Se conserva la flecha SVG
 * nativa del tema (appearance:none + background-image), solo recolocada.
 * SOLO ≥769px: bajo ese ancho WoodMart colapsa el orden a icono con el
 * select absoluto invisible encima (wd-ordering-mb-icon, su media va a
 * 768.98px) y ese patrón NO se pisa. El ancestro .shop-loop-head da la
 * especificidad (0,3,1) que gana al empate con .wd-style-underline. */
@media (min-width: 769px) {
    .shop-loop-head .woocommerce-ordering select.orderby {
        font-family: var(--font-sans);
        font-size: var(--ekp-text-sm);
        font-weight: var(--ekp-fw-medium);
        color: var(--ekp-ctx-fg);
        background-color: var(--ekp-ctx-field-bg);
        border: 1px solid var(--ekp-ctx-field-border);
        border-radius: var(--ekp-radius-sm);
        height: auto;
        padding: 0.5rem 2rem 0.5rem 0.875rem;
        background-position: right 0.75rem center;
        transition: border-color var(--ekp-t-fast), box-shadow var(--ekp-t-fast);
    }

    .shop-loop-head .woocommerce-ordering select.orderby:hover {
        border-color: var(--ekp-border-strong);
    }

    .shop-loop-head .woocommerce-ordering select.orderby:focus {
        border-color: var(--ekp-border-accent);
        box-shadow: 0 0 0 3px var(--ekp-copper-glow);
        outline: none;
    }
}

/* ── Step 6 · Rejilla 4 → 3 → 2 ───────────────────────────────
 * El grid del loop es CSS grid NATIVO de WoodMart (.wd-grid-g) gobernado
 * por variables --wd-col-lg/md/sm que el tema imprime EN LÍNEA en el
 * .products (cualquier override de hoja pierde contra ese inline). Por
 * eso la rejilla 4/3/2 (1024/768/480) NO se impone aquí: se corrige el
 * DATO en origen (products_columns_tablet → 3, filtro woodmart_get_opt
 * en functions.php) y el motor responsive del tema —medias en 1024.98 y
 * 768.98, gaps, re-pintado AJAX— queda intacto. Cero reglas de layout.
 * La ProductCard dentro de la rejilla es 100% C (ekp-woocommerce.css +
 * ekp-store-components.css): elevación, borde cobre y micro-zoom. */