/* ==========================================================================
   ps_facetedsearch — OVERRIDE de aspecto para unificar con el listing zcnc.
   Sin tocar el módulo core (que queda upgradable). Todas las reglas dentro
   de `.ps-facetedsearch` para no contaminar el resto del site.
   ========================================================================== */

/* Ocultar el título global "Filtrar por" — cada sección tiene su propio header.
   Bump specificity con #id para ganar sobre .d-md-block del theme Hummingbird
   (que está en un @layer que puede reversar precedencia de !important). */
#search_filters_wrapper .left-block__title,
#search_filters .left-block__title,
.ps-facetedsearch p.left-block__title { display: none !important; }

/* Marco exterior: el accordion sin bordes propios, cada item es una "card" */
.ps-facetedsearch .accordion.accordion-flush,
.ps-facetedsearch .accordion.accordion-flush.accordion--small {
    background: transparent;
    border: 0;
}

/* Cada sección como card separada */
.ps-facetedsearch .accordion-item {
    background: #fff;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    margin-bottom: 10px;
    overflow: hidden;
}

/* Header de cada sección: icono izquierda, título derecha bold, chevron extrema derecha */
.ps-facetedsearch .accordion-button {
    background: #fff !important;
    color: #1a2a3a !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.ps-facetedsearch .accordion-button:not(.collapsed) { color: #1a2a3a !important; }
.ps-facetedsearch .accordion-button:focus { box-shadow: none !important; outline: none !important; }
/* #2113: restore WCAG 2.4.7 focus ring for keyboard nav (overrides the :focus rule above) */
.ps-facetedsearch .accordion-button:focus-visible { outline: 2px solid #e67e22 !important; outline-offset: 2px !important; box-shadow: none !important; }

/* Título del botón — empujado a la derecha */
.ps-facetedsearch .accordion-button { text-align: right; }
.ps-facetedsearch .accordion-button::before {
    content: '';
    width: 18px; height: 18px;
    flex-shrink: 0;
    background: no-repeat center/contain;
    margin-right: auto; /* icono a la izquierda, todo lo demás va al centro/derecha */
    opacity: .75;
}
/* Chevron (nativo) estándar — posición al final */
.ps-facetedsearch .accordion-button::after { margin-left: 10px; }

/* Íconos SVG inline por data-name */
.ps-facetedsearch .accordion-item[data-name="Categorías"] .accordion-button::before,
.ps-facetedsearch .accordion-item[data-name="Categoria"] .accordion-button::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>");
}
.ps-facetedsearch .accordion-item[data-name="Marca"] .accordion-button::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2'><path d='M3 21h18M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16M9 9h2M13 9h2M9 13h2M13 13h2M9 17h6'/></svg>");
}
.ps-facetedsearch .accordion-item[data-name="País del vendedor"] .accordion-button::before,
.ps-facetedsearch .accordion-item[data-name="País"] .accordion-button::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2'><circle cx='12' cy='12' r='10'/><path d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/></svg>");
}
.ps-facetedsearch .accordion-item[data-name="Precio"] .accordion-button::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>");
}
.ps-facetedsearch .accordion-item[data-name="Estado"] .accordion-button::before,
.ps-facetedsearch .accordion-item[data-name="Año"] .accordion-button::before,
.ps-facetedsearch .accordion-item[data-name="Año de fabricación"] .accordion-button::before,
.ps-facetedsearch .accordion-item[data-name="Disponibilidad"] .accordion-button::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
.ps-facetedsearch .accordion-item[data-name="Selecciones"] .accordion-button::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2'><path d='M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
}
/* Fallback icono genérico para cualquier otra sección (horas de uso, tipo de torno, etc.) */
.ps-facetedsearch .accordion-item:not([data-name="Categorías"]):not([data-name="Categoria"]):not([data-name="Marca"]):not([data-name="País del vendedor"]):not([data-name="País"]):not([data-name="Precio"]):not([data-name="Estado"]):not([data-name="Año"]):not([data-name="Año de fabricación"]):not([data-name="Disponibilidad"]):not([data-name="Selecciones"]) .accordion-button::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2'><path d='M4 6h16M7 12h10M10 18h4'/></svg>");
}

/* Body: scrollable con max-height para facetas largas (Marca, País, etc.) */
.ps-facetedsearch .accordion-body {
    padding: 6px 16px 14px 16px !important;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
}
.ps-facetedsearch .accordion-body::-webkit-scrollbar { width: 6px; }
.ps-facetedsearch .accordion-body::-webkit-scrollbar-thumb {
    background: #d1d5db; border-radius: 3px;
}
.ps-facetedsearch .accordion-body li { list-style: none; margin: 0; padding: 0; }

/* Cada fila de faceta */
.ps-facetedsearch .search-filters__item {
    padding: 4px 0;
}
.ps-facetedsearch .search-filters__form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.ps-facetedsearch .form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #c62828;
    cursor: pointer;
}
.ps-facetedsearch .search-filters__form-label {
    flex: 1;
    margin: 0;
    padding: 0;
}
.ps-facetedsearch .search-filters__link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #1a2332 !important;
    text-decoration: none !important;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.35;
    padding: 2px 0;
}
.ps-facetedsearch .search-filters__link:hover { color: #c62828 !important; }
.ps-facetedsearch .search-filters__magnitude {
    color: #9ca3af !important;
    font-size: .82rem !important;
    font-weight: 400 !important;
    flex-shrink: 0;
}

/* Slider de precio/rango: heredar colores neutros */
.ps-facetedsearch .noUi-connect { background: #1a2a3a !important; }
.ps-facetedsearch .noUi-handle { border: 1px solid #1a2a3a !important; box-shadow: 0 1px 3px rgba(0,0,0,.15) !important; }
.ps-facetedsearch .search-filters__slider-values { font-size: .85rem; color: #374151; margin-top: 8px; }

/* ==========================================================================
   Slider custom para facets numéricos (Año) — transformación JS en runtime.
   ========================================================================== */
.ps-facetedsearch .zcnc-range-slider {
    padding: 16px 12px 12px 12px;
}
.ps-facetedsearch .zcnc-range-slider-el {
    margin: 8px 6px 16px 6px;
    height: 4px;
}
.ps-facetedsearch .zcnc-range-slider-vals {
    text-align: center;
    font-size: .9rem;
    color: #374151;
    font-weight: 500;
    margin-bottom: 12px;
}
.ps-facetedsearch .zcnc-range-slider-apply {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: #1a2a3a;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ps-facetedsearch .zcnc-range-slider-apply:hover {
    background: #0d5a3e;
}

/* ==========================================================================
   Category description — collapse con gradient fade + botón "Leer más".

   SEO-safe: NO usa display:none (Google penaliza hidden content importante).
   El texto entero sigue en el DOM, solo se recorta visualmente con max-height
   + overflow:hidden, con un gradient al final que sugiere que hay más.

   Solo aplica en categorías, ya que fuera de categoría no existe
   .category__description.
   ========================================================================== */
.category__description {
    position: relative;
    max-height: 96px;
    overflow: hidden;
    transition: max-height .35s ease;
}
.category__description.zcnc-desc-expanded {
    max-height: 3000px; /* arbitrario alto para transición fluida */
}
.category__description::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    transition: opacity .25s;
}
.category__description.zcnc-desc-expanded::after {
    opacity: 0;
}
.zcnc-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 14px;
    background: transparent;
    color: #1a2a3a;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.zcnc-desc-toggle:hover {
    background: #f1f5f9;
    border-color: #0d5a3e;
    color: #0d5a3e;
}
.zcnc-desc-toggle svg {
    transition: transform .2s;
}
.zcnc-desc-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   Saved search bar — reubicada al lado de "Ordenar por" vía JS.
   Al añadirle .zcnc-ss-inline, ajustamos estilos para integrar en el
   flex row de .products__selection sin ocupar una franja propia.
   ========================================================================== */
.zcnc-ss-save-bar.zcnc-ss-inline {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 12px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    min-width: 0;
}
.zcnc-ss-save-bar.zcnc-ss-inline .zcnc-ss-save-btn {
    margin: 0;
    white-space: nowrap;
}
/* .products__selection como flex row con items en la derecha junto a sort.
   .products__count se queda a la izquierda (margin-right: auto lo empuja). */
#js-product-list-top .products__selection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
#js-product-list-top .products__selection .products__count {
    margin-right: auto;
}