:root {
    --ins-border: #EBEBEB;
    --ins-gold-border: #E3C683;
    --ins-gold-bg: #FCF9F1;
    --ins-radius: 12px;
    --ins-text: #333;
}

.insygma-swatches-wrapper {
    margin: 20px 0;
    width: 100%;
}

.swatch-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    color: var(--ins-text);
}

.swatches-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* --- FIX MOBILE START --- */
.swatch-btn {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--ins-border);
    border-radius: var(--ins-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
    position: relative;
    outline: none;
    min-height: 60px;
    /* Otimização para toque */
    touch-action: manipulation; 
    -webkit-tap-highlight-color: transparent;
}

/* Isto garante que o clique passa através da img/texto e acerta no botão */
.swatch-btn > * {
    pointer-events: none; 
}
/* --- FIX MOBILE END --- */

.swatch-btn:hover {
    border-color: #d1d1d1;
}

.swatch-btn.active {
    border-color: var(--ins-gold-border) !important;
    background-color: var(--ins-gold-bg) !important;
    box-shadow: 0 4px 10px rgba(227, 198, 131, 0.15);
}

.swatch-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #f9f9f9;
    margin-right: 12px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.05);
}

.swatch-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ins-text);
}

@media (max-width: 480px) {
    .swatches-grid {
        grid-template-columns: 1fr; /* Coluna única em mobile facilita o toque */
    }
}

.woocommerce-variation-add-to-cart .variations,
.reset_variations {
    display: none !important;
}