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

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

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

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

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

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

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

body.mercat-skin-arts .button:hover,
body.mercat-skin-arts .woocommerce button.button:hover,
body.mercat-skin-arts .woocommerce a.button:hover,
body.mercat-skin-arts .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-arts .page-header,
body.mercat-skin-arts .woocommerce-products-header {
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

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

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

/* Logo en móvil: un tamaño razonable */
body.mercat-skin-arts .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-arts .site-header .inside-header .header-left {
    justify-content: center;
}

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

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

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