/* ==========================================================================
   Quevedo — Página de categoría (listado de productos)
   - Header de categoría
   - Sidebar de categorías y filtros
   - Grid de productos (miniatures)
   - Paginación se gestiona en pagination.css
   ========================================================================== */

/* ----- Header de categoría: oculto por petición del cliente ----- */
#js-product-list-header .block-category,
#js-product-list-header .block-category h1,
#js-product-list-header .block-category .category-description {
    display: none;
}

/* Margen superior en categoría/marca/proveedor/cms (compensa la banda oculta) */
body.page-category #wrapper,
body.page-manufacturer #wrapper,
body.page-supplier #wrapper,
body.page-cms #wrapper {
    padding-top: var(--space-2xl);
}

/* Título h1 en páginas de proveedor y marca */
body.page-supplier section#main > h1,
body.page-manufacturer section#main > h1 {
    margin-bottom: var(--space-lg);
}


/* ----- Sidebar: bloque de categorías navegables ----- */
.block-categories {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    /* Empuja a la izquierda sin salirse del viewport */
    margin-left: calc(var(--space-xl) * -1);
    width: calc(100% + var(--space-xl));
}

.block-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Categorías principales */
.block-categories .category-top-menu > li {
    position: relative;
}

.block-categories .category-top-menu > li > a {
    position: relative;
    display: block;
    padding: var(--space-sm) var(--space-md);
    padding-right: 36px;        /* deja espacio para el botón +/- */
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    letter-spacing: 0.02em;
    overflow: hidden;
    transition: background var(--t-base), color var(--t-base), padding var(--t-base), transform var(--t-base);
}

/* Indicador izquierdo que aparece en hover */
.block-categories .category-top-menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: transform var(--t-base);
    transform-origin: center;
}

.block-categories .category-top-menu > li > a:hover {
    background: rgba(63, 165, 53, 0.1);
    color: var(--color-primary);
    padding-left: calc(var(--space-md) + 8px);
    transform: translateX(2px);
}

.block-categories .category-top-menu > li > a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.block-categories li[data-depth="0"] {
    position: relative;
}

/* Botón +/- de expand/collapse: centrado vertical sobre el item top-level */
.block-categories li[data-depth="0"] > .navbar-toggler {
    position: absolute;
    top: 4px;                /* alineado con el padding-top del <a> */
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: background var(--t-base);
    z-index: 1;
}

.block-categories .navbar-toggler:hover {
    background: rgba(63, 165, 53, 0.1);
}

.block-categories .navbar-toggler i {
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-muted);
    transition: color var(--t-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.block-categories .navbar-toggler:hover i {
    color: var(--color-primary);
}

/* Submenú */
.block-categories .category-sub-menu {
    margin-top: var(--space-xs);
    padding-left: 0;
}

.block-categories .category-sub-link,
.block-categories .category-sub-menu li > a {
    position: relative;
    display: block;
    padding: var(--space-xs) var(--space-md);
    padding-right: 36px;        /* deja espacio para el botón +/- */
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: background var(--t-base), color var(--t-base), padding var(--t-base), transform var(--t-base);
}

/* Indicador izquierdo que aparece en hover */
.block-categories .category-sub-link::before,
.block-categories .category-sub-menu li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 55%;
    background: var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: transform var(--t-base);
    transform-origin: center;
}

.block-categories .category-sub-link:hover,
.block-categories .category-sub-menu li > a:hover {
    background: rgba(63, 165, 53, 0.1);
    color: var(--color-primary);
    padding-left: calc(var(--space-md) + 8px);
    transform: translateX(2px);
}

.block-categories .category-sub-link:hover::before,
.block-categories .category-sub-menu li > a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* Categoría activa: fondo naranja claro + borde izquierdo naranja */
.block-categories a.active,
.block-categories a.selected,
.block-categories .category-top-menu > li > a.active {
    background: rgba(63, 165, 53, 0.12);
    color: var(--color-primary);
    font-weight: var(--fw-extra);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.block-categories .collapse {
    transition: all var(--t-slow);
}

/* ----- Sidebar: bloque "FILTRAR POR" (facets) ----- */
#search_filters,
.faceted-search {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    margin-left: calc(var(--space-xl) * -1);
    width: calc(100% + var(--space-xl));
}

#search_filters .h6,
#search_filters_brands .h6,
.faceted-search h2,
.facet-title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-extra);
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-border);
}

.facet {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.facet:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

#search_filters .facet .facet-title,
#search_filters .facet h3,
#search_filters .facet > .h6 {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 0;
    padding: 6px var(--space-sm);
    background: rgba(63, 165, 53, 0.12);
    border-radius: var(--radius-sm);
    line-height: 1.2;
    box-shadow: none;
    width: 100%;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    box-sizing: border-box;
}

.facet ul,
.facet .facet-label {
    list-style: none;
    padding: 0;
    margin: 0;
}

.facet li,
.facet label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--t-base);
}

.facet label:hover {
    color: var(--color-primary);
}

.facet input[type="checkbox"],
.facet input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Centrar verticalmente el checkbox personalizado con el texto del enlace.
   Estructura: <label.facet-label> > <span.custom-checkbox> + <a.search-link>
   El label es flex; le forzamos align-items:center y damos al
   span.custom-checkbox y al .ps-shown-by-js dimensiones consistentes para
   que se queden a la altura media del texto. */
.facet .facet-label {
    flex: 1;
    align-items: center;
    line-height: 1.4;
}

#search_filters .facet .facet-label .custom-checkbox,
#search_filters .facet .facet-label .custom-radio {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 0;                  /* anula top:-7px de ps_facetedsearch front.css que desalineaba el checkbox */
    width: 18px;
    height: 18px;            /* casa con la altura de línea del texto */
}

#search_filters .facet .facet-label .custom-checkbox .ps-shown-by-js,
#search_filters .facet .facet-label .custom-radio .ps-shown-by-js {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;                  /* sin shrink: el margin-right:0.5rem del tema padre lo aplastaba a 10px */
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--t-base), background var(--t-base);
}

#search_filters .facet .facet-label .custom-radio .ps-shown-by-js {
    border-radius: 50%;       /* el radio es circular */
}

/* Checked: fondo naranja + check blanco */
#search_filters .facet .facet-label .custom-checkbox input:checked + .ps-shown-by-js,
#search_filters .facet .facet-label .custom-radio input:checked + .ps-shown-by-js,
#search_filters .facet .facet-label.active .custom-checkbox .ps-shown-by-js,
#search_filters .facet .facet-label.active .custom-radio .ps-shown-by-js {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

#search_filters .facet .facet-label .custom-checkbox .ps-shown-by-js .material-icons,
#search_filters .facet .facet-label.active .custom-checkbox .ps-shown-by-js .material-icons {
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

/* Hover sobre el label: borde resaltado */
#search_filters .facet .facet-label:hover .custom-checkbox .ps-shown-by-js,
#search_filters .facet .facet-label:hover .custom-radio .ps-shown-by-js {
    border-color: var(--color-primary);
}

#search_filters .facet .facet-label a.search-link,
#search_filters .facet .facet-label a.search-link._gray-darker {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 !important;
    line-height: 1.1;
    padding: 0;
    min-width: 0;
}

.search-link .filter-label-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facet .magnitude {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    background: rgba(63, 165, 53, 0.10);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: var(--fw-bold);
    margin-left: auto;
    line-height: 1;
    flex-shrink: 0;
}

/* ----- Show more / show less toggle ----- */
.facet-values-list.collapsed ul li:nth-child(n+6) {
    display: none;
}

.show-more-toggle {
    display: inline-block;
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t-base);
}

.show-more-toggle:hover {
    color: var(--color-primary-hover, var(--color-primary));
    text-decoration: underline;
}

/* ----- Price slider labels ----- */
.slider-labels {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.slider-labels strong {
    color: var(--color-text);
    font-weight: var(--fw-bold);
}

/* Price slider parent — override .facet li flex-row so labels + track stack */
.facet .faceted-slider li {
    display: block;
}

.facet .faceted-slider .slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    padding: var(--space-xs) 0 0;
}

/* jQuery UI slider overrides — !important needed to beat jqueryui.css */
#search_filters .facet .ui-slider.ui-slider-horizontal {
    height: 6px !important;
    border: 0 !important;
    background: var(--color-border) !important;
    border-radius: 3px !important;
    margin: var(--space-sm) 4px var(--space-md) !important;
}

#search_filters .facet .ui-slider .ui-slider-range {
    background: var(--color-primary) !important;
    border-radius: 3px !important;
    border: 0 !important;
}

#search_filters .facet .ui-slider .ui-slider-handle.ui-state-default {
    width: 20px !important;
    height: 20px !important;
    top: -7px !important;
    margin-left: -10px !important;
    border-radius: 50% !important;
    background: var(--color-surface) !important;
    border: 3px solid var(--color-primary) !important;
    cursor: grab !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    outline: none;
}

#search_filters .facet .ui-slider .ui-slider-handle.ui-state-default:hover,
#search_filters .facet .ui-slider .ui-slider-handle.ui-state-default:focus {
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

#search_filters .facet .ui-slider .ui-slider-handle:active {
    cursor: grabbing !important;
}

/* ----- "Clear all" button ----- */
.clear-all-wrapper {
    margin-bottom: var(--space-sm);
}

.clear-all-wrapper .js-search-filters-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px 2px 8px;
    font-size: var(--fs-sm);
    line-height: 1.2;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color var(--t-base), color var(--t-base);
}

.clear-all-wrapper .js-search-filters-clear-all:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.clear-all-wrapper .js-search-filters-clear-all i {
    font-size: 16px;
}

/* ----- Active filters: visually merged into sort bar ----- */

/* When sort bar is followed by active filters, join them as one panel */
#js-product-list-top:has(+ .hidden-sm-down #js-active-search-filters.active_filters) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    border-bottom: 1px dashed var(--color-border);
    box-shadow: none;
}

#js-product-list-top + .hidden-sm-down > #js-active-search-filters.active_filters {
    margin: 0 0 var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm) var(--space-md);
}

#js-active-search-filters {
    margin-bottom: var(--space-md);
}

#js-active-search-filters .active-filter-title {
    display: none;
}

#js-active-search-filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#js-active-search-filters .filter-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: rgba(63, 165, 53, 0.08);
    border: 1px solid rgba(63, 165, 53, 0.25);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    white-space: nowrap;
    line-height: 1.3;
    transition: border-color var(--t-base);
}

#js-active-search-filters .filter-block:hover {
    border-color: var(--color-primary);
}

#js-active-search-filters .filter-block a.js-search-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(63, 165, 53, 0.15);
    color: var(--color-primary);
    text-decoration: none;
    flex-shrink: 0;
    padding: 0;
    transition: background var(--t-base), color var(--t-base);
}

#js-active-search-filters .filter-block a.js-search-link:hover {
    background: rgba(63, 165, 53, 0.35);
}

#js-active-search-filters .filter-block i.close {
    font-size: 14px;
    float: none;
    opacity: 1;
    text-shadow: none;
    color: inherit;
    margin: 0;
}

/* ----- Sidebar: bloques de marcas y proveedores ----- */
.block-manufacturers,
#search_filters_brands,
#search_filters_suppliers {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    margin-left: calc(var(--space-xl) * -1);
    width: calc(100% + var(--space-xl));
}

/* Reset .facet styles bleeding from facetedsearch */
#search_filters_brands .facet,
#search_filters_suppliers .facet {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Title: shared style for all sidebar block headings */
.block-categories .category-top-menu > li:first-child > a,
#search_filters_brands .facet > .h6,
#search_filters_suppliers .facet > .h6 {
    display: block;
    padding: var(--space-sm) var(--space-md) var(--space-xs);
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-weight: var(--fw-extra);
    font-size: var(--fs-base);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

#search_filters_brands ul,
#search_filters_suppliers ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Items: exact match with .category-sub-menu li > a */
#search_filters_brands .facet li,
#search_filters_suppliers .facet li {
    position: relative;
    padding: 0;
    display: block;
    border: 0;
    gap: 0;
    cursor: default;
}

#search_filters_brands .facet li a,
#search_filters_suppliers .facet li a {
    position: relative;
    display: block !important;
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm) !important;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: background var(--t-base), color var(--t-base), padding var(--t-base), transform var(--t-base);
}

/* Left indicator bar on hover */
#search_filters_brands .facet li a::before,
#search_filters_suppliers .facet li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 55%;
    background: var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: transform var(--t-base);
    transform-origin: center;
}

#search_filters_brands .facet li a:hover,
#search_filters_suppliers .facet li a:hover {
    background: rgba(63, 165, 53, 0.1);
    color: var(--color-primary);
    padding-left: calc(var(--space-md) + 8px);
    transform: translateX(2px);
}

#search_filters_brands .facet li a:hover::before,
#search_filters_suppliers .facet li a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* ----- Grid de productos (miniatures) ----- */
/* Botón de favorito (wishlist) en la esquina superior derecha de la imagen */
.products article .wishlist-button-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: none;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--muted, #8a8377);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(38,34,29,.04), 0 8px 24px rgba(38,34,29,.06));
    cursor: pointer;
    z-index: 2;
    transition: color .15s ease, transform .15s ease;
}

.products article .wishlist-button-add:hover {
    color: var(--danger, #e03131);
    transform: scale(1.08);
}

.products article .wishlist-button-add .material-icons {
    font-size: 20px;
    line-height: 1;
    color: inherit;
}

.product-miniature {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-base);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.product-miniature:hover {
    transform: translateY(-4px);
    border-color: var(--color-border);
    box-shadow: 0 4px 12px rgba(38,34,29,.08);
}

.product-miniature .thumbnail-container {
    position: relative;
    height: auto;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-miniature .thumbnail-container .product-thumbnail {
    height: auto;
}

.product-miniature .product-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0;
    cursor: pointer;
    transition: transform var(--t-slow);
}

.product-miniature:hover .product-thumbnail img {
    transform: scale(1.05);
}

.product-miniature .product-description,
.product-miniature .product-info,
.product-miniature .product-description-fix {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--s2);
}

.product-description::after {
    border: none;
}

.product-miniature .product-title {
    margin: 0 0 var(--space-xs);
    min-height: 2.6em;       /* 2 líneas para que las cards queden alineadas */
}

.product-miniature .product-title a {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    text-transform: none;
    letter-spacing: 0;
    line-height: var(--lh-tight);
    text-decoration: none;
    hyphens: auto;
    word-wrap: break-word;
    transition: color var(--t-base);
}

.product-miniature .product-title a:hover {
    color: var(--color-primary);
}

.product-miniature .product-price-and-shipping {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-extra);
    color: var(--color-cta);
    margin-top: auto;
}

.product-miniature .regular-price {
    color: var(--color-text-soft);
    text-decoration: line-through;
    font-size: var(--fs-sm);
    margin-right: var(--space-xs);
    font-weight: var(--fw-regular);
}

.product-miniature .discount,
.product-miniature .product-flag {
    display: inline-block;
    padding: 2px var(--space-sm);
    background: var(--color-danger);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    border-radius: var(--radius-full);
    margin-right: var(--space-xs);
}

.product-miniature .product-flag.new {
    background: var(--color-success);
}

.product-miniature .product-flag.on-sale {
    background: var(--color-danger);
}

/* Logo "nuevo" antiguo: lo modernizo o lo escondemos si hay product-flag */
.product-miniature .thumbnail-container .logo-new {
    display: inline-block;
    width: auto;
    padding: 4px 10px;
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    background: var(--color-success);
    color: #fff;
    border-radius: var(--radius-full);
    opacity: 1;
    margin: 0;
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    text-align: center;
}

/* ----- Hover CTA reveal in body ----- */
.product-miniature .thumbnail-top {
    position: relative;
    overflow: hidden;
}

.card__brandtag {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: -4px;
}

.card__login-note {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.card__login-note .material-icons {
    font-size: 15px;
}


/* ----- Product flags (standard PS approach, consistent with DinyDon) ----- */
.product-miniature .product-flags {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.product-miniature .product-flags li.product-flag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    border-radius: var(--radius-full);
    color: #fff;
    background: var(--color-primary);
    min-width: auto;
    min-height: auto;
}

.product-miniature .product-flags li.product-flag.new {
    background: var(--color-success);
    color: #fff;
}

.product-miniature .product-flags li.product-flag.discount,
.product-miniature .product-flags li.product-flag.discount-amount,
.product-miniature .product-flags li.product-flag.discount-percentage,
.product-miniature .product-flags li.product-flag.on-sale {
    background: var(--color-danger);
    color: #fff;
}

.product-miniature .highlighted-informations {
    display: none;
}

/* Grid column stretching + spacing */
#js-product-list .products .product {
    margin-bottom: var(--space-lg);
    display: flex;
}

/* La tarjeta debe rellenar el ancho de su columna; sin esto encoge a su
   contenido y las tarjetas salen con anchos distintos (se nota al ensanchar
   el contenedor, cuando la columna es mas ancha que el contenido intrinseco). */
#js-product-list .products .product > .product-miniature {
    width: 100%;
}

/* ----- Sort/View toggles + count ----- */
#js-product-list-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin: 0 0 var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

#js-product-list-top:empty {
    display: none;
}

#js-product-list-top .total-products {
    padding: 0;
}

#js-product-list-top .total-products p {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    margin: 0;
    white-space: nowrap;
    line-height: 1.3;
}

#js-product-list-top .sort-by-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

#js-product-list-top .sort-by {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

.products-sort-order {
    padding: 0;
}

.products-sort-order .select-title {
    background: var(--color-bg, #f5f5f5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--t-base);
    white-space: nowrap;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.products-sort-order .select-title i {
    font-size: 18px;
    margin: 0;
    float: none;
}

.products-sort-order .select-title:hover {
    border-color: var(--color-primary);
}

.products-sort-order .dropdown-menu {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xs);
    margin-top: 2px;
}

.products-sort-order .select-list {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    transition: background var(--t-base), color var(--t-base);
}

.products-sort-order .select-list:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

/* ----- Search page heading ----- */
body.page-search #wrapper {
    padding-top: var(--space-2xl);
}

body.page-search h1#js-product-list-header {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extra);
    color: var(--color-text);
    text-transform: none;
    margin-bottom: var(--space-lg);
}

/* ----- Listing header ----- */
.listing-header {
    margin-bottom: var(--space-lg);
}

/* ----- Responsive ----- */
@media (max-width: 991px) {
    #js-product-list-header .block-category {
        padding: var(--space-lg) var(--space-md);
    }
    #js-product-list-header .block-category h1 {
        font-size: var(--fs-2xl);
    }
    #js-product-list-top {
        flex-direction: column;
        align-items: stretch;
    }
}