/* Basis styling van de knop */
.smart-unit {
    cursor: pointer;
    border-bottom: 1px dashed #666;
    display: inline-block;
    transition: background-color 0.2s;
}

.smart-unit:hover {
    background-color: #f0f0f0;
    color: #000;
}

/* --- De Logica --- */

/* 1. STANDAARD SITUATIE (Imperial) */
/* Verberg metric standaard */
.unit-metric {
    display: none !important;
}
/* Toon imperial standaard */
.unit-imperial {
    display: inline !important;
}

/* 2. METRIC SITUATIE (Als html tag de class 'show-metric' heeft) */
/* Verberg imperial */
html.show-metric .unit-imperial {
    display: none !important;
}
/* Toon metric */
html.show-metric .unit-metric {
    display: inline !important;
}