/* ============================================
   Bamboo Haus — Colour Nav
   ============================================ */

.bh-colour-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 10px;
    max-width: 100%;
    padding: 8px 0;
}

/* ── Swatch link ── */
.bh-swatch {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.bh-swatch:hover {
    transform: scale(1.08);
}

/* ── Swatch image ── */
.bh-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ── Active state ── */
.bh-swatch-active {
    outline: 2px solid #383028;
    outline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .bh-colour-nav {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .bh-colour-nav {
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
        gap: 6px;
    }
}