@import url("fonts.css");

/*
 * Firtech Master Theme (tema hijo de Hummingbird)
 *
 * REGLA DE ESTE ARCHIVO
 * Aqui solo va lo que el tema anade de forma permanente. Todo lo que
 * dependa de un ajuste del back office lo emite firtechthemeconfig, y
 * SOLO cuando ese ajuste esta activo. Con los toggles apagados manda el
 * diseno nativo de Hummingbird.
 *
 * NO usar valores neutros de reserva -- var(--x, none), var(--x, 0) --
 * para simular el estado "apagado". Hummingbird ya trae de serie:
 *   .product-miniature__inner:hover      -> box-shadow
 *   .product-miniature__inner            -> transition y border-radius
 *   .product-miniature__inner:hover .product-miniature__image -> scale(1.1)
 *   .header                              -> position: sticky
 * y un fallback con !important los borra, dejando el tema por debajo del
 * nativo. Fue exactamente el fallo de la version anterior.
 */

/* =========================================================
   1. Badges diferenciados por tipo

   Hummingbird pinta TODOS los badges con el color primario:
     .product-flags .badge:not(.discount){background-color:...!important}

   Y ese !important vive DENTRO de la capa `bs-base`. Ahi esta el detalle
   que costo una semana de "no se aplica y no se sabe por que":

     Hummingbird organiza su CSS en capas de cascada
       @layer vendors, bs-base, bs-components, bs-custom-components,
              ps-base, ps-components, ps-pages, ps-modules, utilities;

     y con las capas, para declaraciones !important el orden se INVIERTE:
     gana la capa MAS TEMPRANA, y una declaracion !important SIN capa
     pierde contra cualquier !important que si este en una.

   Traduccion: que custom.css se cargue despues NO sirve de nada aqui.
   Estas reglas tenian !important, cargaban las ultimas, y aun asi el badge
   "Nuevo" salia del color primario. Medido en la tienda: sin capa pierde,
   dentro de `vendors` gana.

   Por eso van envueltas en @layer vendors, que es la primera de la lista.
   Es el unico sitio del archivo donde hay !important justificado.

   Tipos que emite el core: new, used, refurbished, online-only,
   on-sale, discount, pack, out_of_stock.
   ========================================================= */
@layer vendors {
    .product-flags .badge.new {
        background-color: color-mix(in srgb, var(--bs-primary) 20%, #198754) !important;
        color: #fff !important;
        border-color: transparent !important;
    }
    .product-flags .badge.on-sale,
    .product-flags .badge.discount {
        background-color: color-mix(in srgb, var(--bs-primary) 20%, #dc3545) !important;
        color: #fff !important;
        border-color: transparent !important;
    }
    .product-flags .badge.out_of_stock {
        background-color: color-mix(in srgb, var(--bs-primary) 30%, #343a40) !important;
        color: #fff !important;
        border-color: transparent !important;
    }
}

/* =========================================================
   2. Campos que el tema anade a la tarjeta de producto
   Ver templates/catalog/_partials/miniatures/product.tpl
   ========================================================= */
.product-miniature__reference,
.product-miniature__manufacturer {
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.product-miniature__desc {
    margin-top: 0.5rem;
}

/* Recorte a dos lineas con puntos suspensivos.
 *
 * -webkit-box + line-clamp es la unica forma fiable de truncar por LINEAS:
 * text-overflow:ellipsis solo sirve en una linea y con nowrap. Los puntos
 * suspensivos los pone el navegador solo; no hay que escribirlos.
 *
 * El titulo es un <a> del padre, inline por defecto, asi que hay que
 * convertirlo en caja para que el recorte funcione.
 *
 * El texto completo sigue en el DOM (solo se oculta visualmente), asi que no
 * afecta al SEO, y el <a> del padre ya lleva su aria-label con el nombre
 * entero para lectores de pantalla.
 */
.product-miniature__title,
.product-description-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* El titulo reserva siempre el alto de dos lineas, de forma que precio,
 * disponibilidad y boton queden alineados entre tarjetas aunque unos nombres
 * ocupen una linea y otros dos. */
.product-miniature__title {
    line-height: 1.35;
    min-height: 2.7em;
}

.product-miniature__availability {
    margin: 0.5rem 0;
}

.product-miniature__availability i {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* =========================================================
   3. Portada: aire bajo la cabecera
   En el resto de paginas la miga de pan separa la cabecera del contenido.
   La portada la vacia (templates/index.tpl), asi que sin esto el arbol de
   categorias y el slider quedan pegados a la barra del menu.
   ========================================================= */
body#index .columns-container {
    padding-top: 1.5rem;
}

/* =========================================================
   4. Movil: el arbol de categorias no se repite
   En Hummingbird la columna izquierda es col-md-4, asi que por debajo de
   768px se apila ENCIMA del contenido a ancho completo. El arbol de
   categorias empujaba la ficha de categoria varias pantallas hacia abajo,
   duplicando ademas lo que ya ofrece el menu hamburguesa. Otros temas con
   arbol lateral tampoco lo muestran en movil.
   Se oculta SOLO el arbol, no #left-column entero: ahi vive tambien
   ps_facetedsearch y esconderlo dejaria al cliente sin filtros en movil.
   ========================================================= */
@media (max-width: 767.98px) {
    #left-column .ps-categorytree {
        display: none;
    }

    /* Logo centrado entre la hamburguesa y los iconos.
     * Hummingbird le pone .me-auto, que solo empuja hacia la derecha y lo deja
     * pegado al boton del menu. Anadiendo el margen izquierdo automatico queda
     * centrado en el espacio libre, sin posicionamiento absoluto: si los
     * iconos crecen, el logo se recoloca solo en vez de solaparse. */
    #header .header-bottom__logo {
        margin-left: auto;
    }
}

/* =========================================================
   5. Ficha de producto: detalles y caracteristicas abiertos
   Sustituye al override completo de product-details.tpl. Hummingbird
   solo abre el acordeon cuando el producto no tiene descripcion larga.
   ========================================================= */
#product_details_collapse,
#product_features_collapse {
    display: block !important;
}

#product_details .accordion-button,
#product_features .accordion-button {
    pointer-events: none;
}

#product_details .accordion-button::after,
#product_features .accordion-button::after {
    display: none;
}