/**
 * CSS Variables Enforcement System
 *
 * Aquest fitxer s'assegura que les variables CSS definides a custom.css
 * s'apliquin SEMPRE a tots els elements, sobreescrivint qualsevol altre estil.
 *
 * Es carrega AL FINAL de tots els CSS per tenir màxima prioritat.
 */

/* Forçar l'ús de variables de color per a text */
#device-wrapper p,
#device-wrapper span,
#device-wrapper div,
#device-wrapper li,
#device-wrapper td,
#device-wrapper th {
/* #   color: var(--p-color, var(--text-color)) !important; */
}
#device-wrapper div.product-item a:hover {text-decoration:none !important;}

/* Forçar variables per a headers */
#device-wrapper h1 {
    color: var(--h1-color, var(--text-color)) !important;
}

#device-wrapper h2 {
    color: var(--h2-color, var(--text-color)) !important;
}

#device-wrapper h3 {
    color: var(--h3-color, var(--text-color)) !important;
}

#device-wrapper h4,
#device-wrapper h5,
#device-wrapper h6 {
    color: var(--text-color) !important;
}

/* Forçar variables per a links (només si no tenen classe especial) */
#device-wrapper a:not([class*="btn"]):not([class*="button"]) {
    color: var(--link-color) !important;
    text-decoration: var(--link-underline) !important;
}

#device-wrapper a:not([class*="btn"]):not([class*="button"]):hover {
    color: var(--link-hover-color) !important;
    text-decoration: var(--link-hover-underline) !important;
}

/* Excepcions: Elements que necessiten mantenir el seu color específic */
#device-wrapper .product-name,
#device-wrapper .product-category,
#device-wrapper .product-ref,
#device-wrapper .product-description,
#device-wrapper .product-meta-item strong {
    /* Aquests ja usen variables CSS, no cal !important */
}

/* Excepcions: Elements decoratius que poden tenir colors propis */
#device-wrapper .loading-skeleton-image,
#device-wrapper .shimmer,
#device-wrapper [class*="icon"] i,
#device-wrapper [class*="fa-"] {
    color: inherit !important;
}

/* Forçar background colors per a body i contenidors */
#device-wrapper body,
#device-wrapper main,
#device-wrapper div#page {
    background-color: var(--page-bg-color, var(--background-color)) !important;
}

#device-wrapper header {
    background-color: var(--header-bg-color, var(--background-color)) !important;
}

#device-wrapper footer {
    background-color: var(--footer-bg-color, var(--background-color)) !important;
}