/* =================================================================================================
   PLP styles — Eurosur Sanlúcar
   PR_plp_visual_v1 — 2026-07-24

   Hoja específica del listado de productos (productos.php). Cubre:
     §1 — Modo lista (.product-card--list): horizontal en md+, stacked en móvil sobre .product-card.
     §2 — Cabecera del listado (.product-row--header): columnas Img/Info/Price/Actions, sólo md+.
     §3 — Cabecera de categoría (.category-header/.category-title/.category-nav): compacto en móvil.
     §4 — Sidebar de subcategorías (.category-sidebar/.category-list) + FAB móvil + bottom-sheet.
     §5 — Paginación (.pagination-modern): tokenizado, gana contra Bootstrap default.

   Carga en blocks/head.php DESPUÉS de product-card.css y ANTES de custom.css, con id="plp-css-v2"
   para rollback de 1 click vía DevTools:
       document.getElementById('plp-css-v2')?.remove();

   Migración: las reglas que vivían en assets/css/custom.css (<editor-fold desc="PLP"> y partes del
   <editor-fold desc="Category page">) se TRASLADAN aquí y se vacían de custom.css.
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   §1. Modo lista — .product-card--list
   Mobile-first: stacked vertical como el grid a 1 columna. A md+ pasa a horizontal.
   ------------------------------------------------------------------------------------------------- */
.product-card--list {
    display: flex;
    flex-direction: column;
}

.product-card--list .product-card__image {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.product-card--list .product-card__body {
    flex-direction: column;
    gap: 1rem;
}

.product-card--list .product-card__info { width: 100%; }

.product-card--list .product-card__trade {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.product-card--list .product-card__pricing {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.product-card--list .product-card__bulk {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.product-card--list .product-card__actions { margin-top: .25rem; }

@media (min-width: 768px) {
    .product-card--list {
        flex-direction: row;
        align-items: stretch;
    }
    .product-card--list .product-card__image {
        width: 220px;
        flex: 0 0 220px;
        aspect-ratio: 1;
        border-right: 1px solid var(--eu-border);
    }
    .product-card--list .product-card__body {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.1rem 1.4rem;
    }
    .product-card--list .product-card__info { flex: 1 1 auto; min-width: 0; }
    .product-card--list .product-card__info .product-title {
        -webkit-line-clamp: 3;
        min-height: 3.9em;
    }
    .product-card--list .product-card__trade {
        width: 280px;
        flex: 0 0 280px;
        text-align: right;
    }
    .product-card--list .product-card__pricing { align-items: flex-end; }
    .product-card--list .product-card__bulk { align-items: flex-end; }
    .product-card--list .product-card__actions { margin-top: .5rem; }
}

@media (min-width: 1200px) {
    .product-card--list .product-card__image { width: 260px; flex: 0 0 260px; }
    .product-card--list .product-card__trade { width: 320px; flex: 0 0 320px; }
}

/* Lista: stock badge + bulk-price chips en lista */
.product-card--list .product-stock {
    font-family: var(--eu-font-mono);
    font-size: .72rem;
    color: var(--eu-steel);
    margin-top: .25rem;
    display: inline-block;
}

/* -------------------------------------------------------------------------------------------------
   §2. Header de la lista — .product-row--header
   Visible sólo en md+. En móvil la card se apila vertical y no requiere alineación con cabecera.
   ------------------------------------------------------------------------------------------------- */
.product-row--header {
    display: flex;
    align-items: center;
    padding: .75rem 1.15rem;
    background: var(--eu-bg);
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius-sm);
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    color: var(--eu-steel);
}
.product-row--header .product-row__col { padding: 0 .9rem; }
.product-row--header .product-row__col--image { width: 220px; flex: 0 0 220px; }
.product-row--header .product-row__col--info {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: .9rem;
    padding-left: .9rem;
}
.product-row--header .product-row__col--price {
    width: 280px;
    flex: 0 0 280px;
    text-align: right;
}
.product-row--header .product-row__col--actions { flex: 0 0 56px; }

@media (min-width: 1200px) {
    .product-row--header .product-row__col--image { width: 260px; flex: 0 0 260px; }
    .product-row--header .product-row__col--price { width: 320px; flex: 0 0 320px; }
}

/* -------------------------------------------------------------------------------------------------
   §3. Cabecera de categoría (.category-header / .category-title / .category-nav)
   Compacto en móvil (≤767px): padding reducido y título pequeño para no robar
   espaço above-the-fold. Los botones prev/next-nav se ocultan en <md con d-none d-md-block
   (esto está inline en productos.php; aquí sólo tenemos defensa de especificidad si se usan
   reglas genéricas .col-* que pudieran pisar el comportamiento responsive).
   ------------------------------------------------------------------------------------------------- */
.category-header {
    background: var(--eu-bg-soft);
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--eu-shadow-sm);
}

.category-title {
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--eu-ink);
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0;
}

.category-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--eu-radius);
    padding: .65rem 1.1rem;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
    font-weight: 600;
    color: var(--eu-ink);
    background: var(--eu-bg-soft);
    border: 1px solid var(--eu-border);
}
.category-nav:hover {
    background: var(--eu-primary);
    color: var(--eu-bg-soft);
    border-color: var(--eu-primary);
}
.category-nav i { font-size: .9rem; }

@media (max-width: 767px) {
    .category-header {
        padding: 1rem 1rem;
        text-align: center;
    }
    .category-title { font-size: 1.2rem; }
    .category-header .row { row-gap: .5rem; }
}

/* -------------------------------------------------------------------------------------------------
   §4. Sidebar de subcategorías (.category-sidebar) + FAB móvil + bottom-sheet

   El sidebar está envuelto en col-lg-3 d-none d-lg-block (inline en productos.php) así que en
   móvil desaparece completamente; en su lugar aparece el FAB .category-sidebar-fab (también en
   d-lg-none) sticky-bottom que abre el bottom-sheet #categorySidebarSheet.

   Z-index:
     - FAB: 1040 (inferior al overlay spinner y a posibles sticky del header).
     - Sheet: 1050 (encima del FAB, debajo del spinner).

   Los list items usan tokens semánticos. Los estados active/hover se apoyan en
   --eu-primary / --eu-primary-soft / --eu-bg-soft.
   ------------------------------------------------------------------------------------------------- */
.category-sidebar .card {
    border-radius: var(--eu-radius-lg);
    border: 1px solid var(--eu-border);
    background: var(--eu-bg-soft);
    overflow: hidden;
}
.category-sidebar .card-header {
    background: var(--eu-bg-soft);
    border-bottom: 1px solid var(--eu-border);
    padding: 1rem 1.25rem;
}
.category-sidebar .card-header h5 {
    font-family: var(--eu-font-display);
    font-weight: 700;
    color: var(--eu-ink);
    font-size: 1rem;
    margin: 0;
}

.category-list li { border-bottom: 1px solid var(--eu-border); }
.category-list li:last-child { border-bottom: none; }

.category-item,
.category-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.4rem;
    text-decoration: none;
    color: var(--eu-ink);
    transition:
        background-color .25s ease,
        color .25s ease,
        padding-left .25s ease;
    font-weight: 500;
    font-size: .92rem;
}
.category-item i,
.category-back i {
    font-size: .8rem;
    color: var(--eu-steel-soft);
    transition:
        color .25s ease,
        transform .25s ease;
}
.category-item:hover {
    background: var(--eu-primary-soft);
    color: var(--eu-primary-dark);
    padding-left: 1.65rem;
}
.category-item:hover i {
    color: var(--eu-primary);
    transform: translateX(4px);
}
.category-item.active {
    background: var(--eu-primary);
    color: var(--eu-bg-soft);
    font-weight: 600;
}
.category-item.active i { color: var(--eu-bg-soft); }

.category-back {
    background: var(--eu-bg);
    font-weight: 600;
    color: var(--eu-steel);
}
.category-back:hover {
    background: var(--eu-primary-soft);
    color: var(--eu-primary-dark);
}

/* ----- FAB móvil ----- */
.category-sidebar-fab {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eu-primary);
    color: var(--eu-bg-soft);
    border: 0;
    border-radius: var(--eu-radius-lg);
    padding: .9rem 1.25rem;
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .92rem;
    box-shadow: var(--eu-shadow-md);
    cursor: pointer;
    transition:
        background-color .2s ease,
        transform .1s ease,
        box-shadow .15s ease;
}
.category-sidebar-fab:hover {
    background: var(--eu-primary-dark);
    color: var(--eu-bg-soft);
}
.category-sidebar-fab:active { transform: translateY(1px); }
.category-sidebar-fab:focus-visible {
    outline: none;
    box-shadow:
        var(--eu-shadow-md),
        var(--eu-focus-ring-shadow);
}

/* ----- Bottom-sheet (drawer) ----- */
.category-sidebar-sheet {
    position: fixed;
    inset: 0;
    /* z-index unificado con drawers (mobile menu + minicart). Encima del FAB (1040)
       y sticky-header (1020); bajo modal (1080) y spinner (9999). */
    z-index: var(--eu-z-drawer);
    background: var(--eu-modal-backdrop);
    display: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.category-sidebar-sheet.is-open {
    display: flex;
    align-items: flex-end;
    opacity: 1;
}
.category-sidebar-sheet__panel {
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--eu-bg-soft);
    border-top-left-radius: var(--eu-radius-lg);
    border-top-right-radius: var(--eu-radius-lg);
    padding: 1rem 1rem 1.5rem;
    box-shadow: var(--eu-shadow-lg);
    transform: translateY(20px);
    transition: transform .25s ease;
}
.category-sidebar-sheet.is-open .category-sidebar-sheet__panel {
    transform: translateY(0);
}
.category-sidebar-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .25rem 1rem;
    border-bottom: 1px solid var(--eu-border);
    margin-bottom: .75rem;
}
.category-sidebar-sheet__title {
    font-family: var(--eu-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 1rem;
    color: var(--eu-ink);
    margin: 0;
}
.category-sidebar-sheet__close {
    background: transparent;
    border: 0;
    color: var(--eu-steel);
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease;
}
.category-sidebar-sheet__close:hover {
    background: var(--eu-bg);
    color: var(--eu-ink);
}
.category-sidebar-sheet__close:focus-visible {
    outline: none;
    box-shadow: var(--eu-focus-ring-shadow);
}

body.category-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .category-sidebar-sheet,
    .category-sidebar-sheet__panel { transition: none; }
}

/* -------------------------------------------------------------------------------------------------
   §5. Paginación (.pagination-modern)
   Sobreescribe Bootstrap .pagination con tokens canónicos.

   Especificidad:
     .pagination (BS)                      → (0,1,0,0)
     .pagination-modern (mine)             → (0,1,0,0)
     .pagination-modern .page-link (mine)  → (0,2,0,0)  GANA contra (0,2,0,0) de BS
     .pagination .page-item.active … (BS)  → (0,2,1,0)
     .pagination-modern .page-item.active…→ (0,2,1,0)  EMPATA con BS; gana por orden de carga
                                              (plp.css cargado después de bootstrap.min.css).
   ------------------------------------------------------------------------------------------------- */
.pagination-modern { gap: .35rem; }
.pagination-modern .page-item { margin: 0; }

.pagination-modern .page-link {
    color: var(--eu-steel);
    background: var(--eu-bg-soft);
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius-sm);
    padding: .55rem .85rem;
    font-family: var(--eu-font-display);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}
.pagination-modern .page-link:hover {
    background: var(--eu-primary-soft);
    color: var(--eu-primary-dark);
    border-color: var(--eu-primary-soft);
}
.pagination-modern .page-link:focus-visible {
    outline: none;
    box-shadow: var(--eu-focus-ring-shadow);
    border-color: var(--eu-primary);
}

.pagination-modern .page-item.active .page-link {
    background: var(--eu-primary);
    border-color: var(--eu-primary);
    color: var(--eu-bg-soft);
    z-index: 1;
}

.pagination-modern .page-item.disabled .page-link,
.pagination-modern .page-item.disabled .page-link:hover {
    color: var(--eu-steel-soft);
    background: var(--eu-bg);
    border-color: var(--eu-border);
    cursor: not-allowed;
}

.pagination-modern .page-link i { font-size: .85rem; line-height: 1; }

@media (max-width: 575px) {
    .pagination-modern .page-link {
        padding: .45rem .7rem;
        font-size: .85rem;
    }
}

/* -------------------------------------------------------------------------------------------------
   §6. .category-card — tarjeta de categoría raíz (categorias.php)
   Migrada desde custom.css a tokens canónicos. Mantiene coherencia con .product-card.
   ------------------------------------------------------------------------------------------------- */
.category-card {
    border-radius: var(--eu-radius-lg);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
    cursor: pointer;
    background: var(--eu-bg-soft);
    border: 1px solid var(--eu-border);
}
.category-card img {
    height: 240px;
    object-fit: cover;
    transition: transform .5s ease;
}
.category-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--eu-shadow-lg);
    border-color: var(--eu-primary-soft);
}
.category-card:hover img { transform: scale(1.08); }
.category-card h4 {
    letter-spacing: .5px;
    font-family: var(--eu-font-display);
    color: var(--eu-ink);
    transition: color .25s ease;
}
.category-card:hover h4 { color: var(--eu-primary); }