/* Skin SALUT: se aplica solo cuando el body tenga la clase mercat-skin-SALUT */

/* Header distinto para SALUT */
body.mercat-skin-salut .site-header {
    background-image: url('/wp-content/uploads/2025/12/fons_header_salut_cooperativa.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-bottom: none;
    box-shadow: none;
}

/* Cambiar logo SOLO en SALUT (si quieres uno específico) */
body.mercat-skin-salut .site-branding img {
    /* Truco típico: forzar otra imagen vía CSS */
    content: url('/wp-content/uploads/2025/12/salut_cooperativa.png');
}

/* Cambiar header image SOLO para SALUT */
body.mercat-skin-salut .header-image {
    content: url('https://mercat.cooperativa.cat/wp-content/uploads/2025/12/salut_cooperativa.png');
}

/* Footer distinto para SALUT */
body.mercat-skin-salut .site-footer {
    background-image: url('/wp-content/uploads/2025/12/fons_footer_salut_cooperativa.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Colores básicos SALUT (ejemplos) */
body.mercat-skin-salut a,
body.mercat-skin-salut .entry-title a:hover,
body.mercat-skin-salut .woocommerce-loop-product__title:hover {
    color: #9C27B0; /* morado salut, por ejemplo */
}

body.mercat-skin-salut .button,
body.mercat-skin-salut .woocommerce button.button,
body.mercat-skin-salut .woocommerce a.button,
body.mercat-skin-salut .woocommerce input.button {
    background-color: #9C27B0;
    border-color: #9C27B0;
}

body.mercat-skin-salut .button:hover,
body.mercat-skin-salut .woocommerce button.button:hover,
body.mercat-skin-salut .woocommerce a.button:hover,
body.mercat-skin-salut .woocommerce input.button:hover {
    background-color: #7B1FA2;
    border-color: #7B1FA2;
}

/* Si Dokani tiene secciones específicas de cabecera de tienda / hero,
   puedes adaptar sus clases aquí también */
body.mercat-skin-salut .page-header,
body.mercat-skin-salut .woocommerce-products-header {
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

/* === BASE: MÓVIL / VIEWPORT PEQUEÑO (SALUT) === */

/* En móvil, dejamos que ambos bloques ocupen todo el ancho */
body.mercat-skin-salut .site-header .inside-header .header-left,
body.mercat-skin-salut .site-header .inside-header .header-right {
    width: 100%;
}

/* Logo en móvil: un tamaño razonable */
body.mercat-skin-salut .site-header .inside-header .header-left img.header-image {
    max-height: none;
    height: 80px;   /* ajústalo a lo que veas cómodo en móvil */
    width: auto;
}

/* Opcional: centrar el logo en móvil */
body.mercat-skin-salut .site-header .inside-header .header-left {
    justify-content: center;
}

/* === ESCRITORIO / TABLET (SALUT) === */
@media (min-width: 768px) {
    body.mercat-skin-salut .site-header .inside-header .header-left {
        width: 30%;
        justify-content: flex-start; /* volvemos al comportamiento típico de desktop */
    }

    body.mercat-skin-salut .site-header .inside-header .header-right {
        width: 70%;
    }

    body.mercat-skin-salut .site-header .inside-header .header-left img.header-image {
        height: 90px;  /* el tamaño grande que te gustaba en escritorio */
        width: auto;
    }
}