/* =============================================================
   Alimasgrau - ajustes del diseno 2027 (se carga despues de Comun/css/design-2027.css)
   El diseno comun trae la pildora, el pie, los listados, el carrito, etc. Aqui solo va lo propio
   de Alimasgrau: su paleta. --colorCorporativo (#C76A20, naranja) lo define personalizacion.css.
   ============================================================= */
:root {
    --h27-ink: #2b1f16;
    --h27-muted: #75675b;
    --h27-line: rgba(43, 31, 22, .10);
    --h27-tint: #fbf1e8;
    --h27-shadow: 0 10px 30px rgba(90, 50, 20, .12);
    /* El diseno comun usa este tono en degradados y hovers; sin definirlo cae a un verde azulado (#1c7881) */
    --colorCorporativoOscuro: #a3531b;
}

body {
    background: #f8f5f2;
}

/* Panel de marca del login: style.css lo termina en un azul fijo (#0d3b5c); aqui en el marron de la paleta */
.login-panel-brand {
    background: linear-gradient(145deg, var(--colorCorporativo) 0%, var(--h27-ink) 100%);
}

/* Pie: tarjeta en marron oscuro (el comun la trae en verde azulado). El logo es oscuro, asi que va sobre una placa clara */
.footer-area {
    background: linear-gradient(160deg, #2b1f16 0%, #1d140d 100%);
}

.footer-area .footer-logo img {
    background: #fff;
    padding: 8px 14px;
    box-sizing: content-box;
}

/* ---------- Migas de pan ----------
   Solo en el catalogo (listados y ficha de producto), donde hay jerarquia de categorias. En login, registro,
   cuenta, pedido, contacto... no aportan nada. La clase h27-pag-<controlador> la pone el _Layout de GWT00002_2027. */
.breadcrumb-area {
    display: none;
}

body.h27-pag-productos .breadcrumb-area {
    display: block;
    background: transparent;
    border: 0 !important;
    padding: 2px 0 10px !important;
}

/* el <ul> traia el sangrado por defecto del navegador y no alineaba con el titulo */
.breadcrumb-area .breadcrumb-content ul {
    margin: 0;
    padding-left: 0;
}

.breadcrumb-content ul li,
.breadcrumb-content ul li a {
    font-size: 13px;
    color: var(--h27-muted);
}

.breadcrumb-content ul li a:hover {
    color: var(--colorCorporativo);
}

.breadcrumb-content ul li:last-child {
    color: var(--h27-ink);
    font-weight: 500;
}

/* ---------- Tarjetas de los carruseles (Novedades, Promociones...) ----------
   product-detail.css pone .modern-actions-container en columna y personalizacion.css le fija 40 px de alto, asi que
   Uds./Cajas, la cantidad y el boton (tres bloques) se apilaban encima del precio y quedaban cortados por la tarjeta.
   Ahora: el precio esta siempre visible y las acciones se ordenan en dos filas (Uds./Cajas arriba; cantidad y carrito
   debajo). En escritorio con raton aparecen al pasar el cursor, creciendo hacia arriba sobre los datos del articulo
   pero sin tapar el titulo; en tactil se muestran siempre. */
.slick-slide .modern-actions-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 6px;
    height: auto;
    min-height: 0;
}

.slick-slide .item-actions-container .action-block:has(.segmented-control) {
    flex: 0 0 100%;
    justify-content: center;
}

.slick-slide .item-actions-container .segmented-control {
    height: 28px;
}

.slick-slide .item-actions-container .segmented-control label {
    font-size: 12px;
}

.slick-slide .item-actions-container .pro-qty {
    margin-bottom: 0;
    /* personalizacion.css (<= 1200 px) lo limita a 60 px, pensado para la caja antigua: la pildora -, valor, + no cabe */
    max-width: none;
}

.slick-slide .modern-actions-container.item-actions-container {
    gap: 6px !important;
}

/* el boton del carrito iba a 32 px (tambien con !important en personalizacion.css); a la altura de la pildora de cantidad */
.slick-slide .item-actions-container .list-cart-button {
    width: 40px !important;
    height: 40px !important;
}

@media (min-width: 768px) and (hover: hover) {
    /* hueco reservado abajo para el precio y para que el panel desplegado no llegue al titulo */
    .slick-slide .single-slider-product__content {
        position: relative;
        padding-bottom: 76px;
    }

    .slick-slide .wrapFlex.bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        min-height: 0;
        padding: 6px 10px 8px;
        background: #fff;
        z-index: 2;
    }

    .slick-slide .modern-actions-container {
        max-height: 0;
        overflow: hidden;
        padding: 0;
        opacity: 0;
        transform: none;
    }

    .slick-slide .product-card-hover:hover .modern-actions-container {
        max-height: 130px;
        padding: 4px 0 0;
        opacity: 1;
    }
}

/* ---------- Boton "Filtros" del movil ----------
   style.css lo fija en gris #6c757d para todos los clientes; aqui en la tinta de la paleta (como el boton Productos) */
.btn-filtros-mobile {
    background: var(--h27-ink);
    border-color: var(--h27-ink);
}

.btn-filtros-mobile:hover {
    background: var(--colorCorporativoOscuro);
    border-color: var(--colorCorporativoOscuro);
}

/* ---------- Tarjetas de los listados en cuadricula ----------
   Mismo orden que en los carruseles: Uds./Cajas arriba y, debajo, cantidad y carrito en la misma fila. Antes iban
   apilados (columna de product-detail.css) y el boton del carrito, de 32 px, quedaba solo en una tercera fila. */
.grid-view-product .modern-actions-container.item-actions-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px !important;
    margin-top: 0;
    padding-top: 8px;
    border-top: 0;
}

.grid-view-product .item-actions-container .action-block {
    /* personalizacion.css lo pone a 100%: con las acciones en dos filas cada bloque ocupaba todo el alto y se salia de la tarjeta */
    height: auto;
}

.grid-view-product .item-actions-container .action-block:has(.segmented-control) {
    flex: 0 0 100%;
    justify-content: center;
}

.grid-view-product .item-actions-container .segmented-control {
    height: 28px;
}

.grid-view-product .item-actions-container .segmented-control label {
    font-size: 12px;
}

.grid-view-product .item-actions-container .pro-qty {
    margin-bottom: 0;
    max-width: none;
}

.grid-view-product .item-actions-container .list-cart-button {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
}

/* ---------- Boton del carrito: naranja de marca en todo el sitio ----------
   El diseno comun lo pone en tinta en los listados (#tablaArticulos) y naranja en los carruseles; aqui siempre naranja,
   que es el color de accion de Alimasgrau, y con el tono oscuro al pasar el cursor. */
#tablaArticulos .list-cart-button {
    background: var(--colorCorporativo);
    border-color: var(--colorCorporativo);
}

#tablaArticulos .list-cart-button:hover {
    background: var(--colorCorporativoOscuro);
    border-color: var(--colorCorporativoOscuro);
}

.slick-slide .item-actions-container .list-cart-button:hover {
    background: var(--colorCorporativoOscuro);
    border-color: var(--colorCorporativoOscuro);
}

/* ---------- Vista de lista (movil y tablet) ----------
   personalizacion.css organiza cada articulo en columna con flex-wrap (imagen, datos, precio y acciones), pero el 2027
   da alto fijo a las tarjetas (#tablaArticulos .single-slider-product { height: 100% }): la columna desbordaba y la fila
   de acciones saltaba a una segunda columna fuera de la pantalla. Alto automatico, sin salto de columna, y las acciones
   debajo del precio en una fila que puede partirse (no caben junto al stock en 360-440 px). */
@media (max-width: 991px) {
    #tablaArticulos .single-slider-product--list-view {
        height: auto;
        flex-wrap: nowrap;
    }

    .list-view-column-info {
        height: auto;
        min-height: 0;
    }

    .list-view-column-actions {
        grid-template-columns: 1fr;
    }

    .list-view-column-actions .modern-actions-container {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Con la lista ya cargada por el servidor, #tablaArticulos lleva tambien la clase "list" y el 2027 aplica su rejilla movil
   (areas img/title/price/btn) pensada para el marcado de la base. La lista de Alimasgrau usa otras clases
   (.list-view-column-*), asi que se mantiene su disposicion en columna. */
@media (max-width: 767px) {
    #tablaArticulos.list .single-slider-product--list-view {
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        grid-template-columns: none;
        grid-template-areas: none;
        gap: 5px;
        height: auto;
    }
}

/* boton del carrito de la lista a 40 px, como en carruseles y cuadricula */
.list-view-column-actions .list-cart-button {
    width: 40px !important;
    height: 40px !important;
}

/* ---------- Carrito (desplegable de la cabecera y resumen de Mi carrito) ----------
   modern-cart.css termina el recuadro Total en un azul fijo (#2196f3) para todos los clientes; aqui del naranja
   al tono oscuro de la paleta. Las sombras traian un tinte verde azulado del color por defecto (#299BA5). */
.summary-total {
    background: linear-gradient(90deg, var(--colorCorporativo) 0%, var(--colorCorporativoOscuro) 100%);
    box-shadow: 0 2px 8px rgba(163, 83, 27, 0.18);
}

.modern-cart-counter {
    box-shadow: 0 2px 8px rgba(163, 83, 27, 0.15);
}

/* ---------- Favoritos y "Para despues" en las tarjetas de cuadricula (vistas de 3 y 4 columnas) ----------
   personalizacion.css da width/height: 100% a todo enlace dentro de la imagen de la tarjeta
   (.grid-view-product .single-slider-product__image a, pensado para el enlace de la foto) y eso aplastaba los botones
   de .hover-icons a 16 px, sin circulo. Se devuelven a los 36 px circulares de style.css (como en carruseles y lista). */
.grid-view-product .hover-icons ul li a {
    width: 36px;
    height: 36px;
}

.grid-view-product .hover-icons ul li + li {
    margin-top: 6px;
}