/* evolury-attributes — swatches de cor no seletor de variação (produtos sem grade). */

/* O <select> nativo continua sendo a fonte de verdade do WC (a lógica de
   variação lê/escreve via jQuery), mas some da vista — os swatches o controlam. */
.evg-swatches-wrap select {
    display: none !important;
}

.evg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 6px;
}

.evg-swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid rgba(0, 0, 0, 0.14);
    border-radius: 50%;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.evg-swatch:hover {
    transform: scale(1.06);
}

.evg-swatch:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.evg-swatch.is-active {
    border-color: #111;
    box-shadow: 0 0 0 2px #fff inset;
}

/* Fallback texto (termo sem cor nem imagem cadastrada): vira chip retangular. */
.evg-swatch--text {
    width: auto;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background-color: #fff;
    color: #1d2327;
    font-size: 13px;
    line-height: 30px;
}

.evg-swatch--text.is-active {
    border-color: #111;
    background-color: #111;
    color: #fff;
    box-shadow: none;
}

/* Botões de rótulo (tipo de atributo "Botão" — ex.: tamanhos). A forma
   (retangular/pílula) vem do modificador no wrapper. */
.evg-swatch--label {
    width: auto;
    min-width: 40px;
    height: 36px;
    padding: 0 14px;
    border-color: rgba(0, 0, 0, 0.2);
    background-color: #fff;
    color: #1d2327;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
}

.evg-swatch--label:hover {
    transform: none;
    border-color: #555;
}

.evg-swatch--label.is-active {
    border-color: #111;
    background-color: #111;
    color: #fff;
    box-shadow: none;
}

.evg-swatches--btn-box .evg-swatch--label {
    border-radius: 6px;
}

.evg-swatches--btn-pill .evg-swatch--label {
    border-radius: 999px;
}

/* ── Indisponível: esmaecido E anunciado (mu#907) ─────────────────────────
 *
 * O `swatches.js` sincroniza a disponibilidade lida do <select> que o WooCommerce
 * reescreve. Antes disso o swatch de uma combinação fora do ar continuava opaco,
 * com `cursor: pointer`, e o clique não fazia nada.
 *
 * Esta é a pintura BASE — o tema sobrescreve com os tokens da marca pelo gancho
 * `[data-evg-estado]`. Ela existe porque um estado emitido e invisível é o mesmo
 * defeito com outro nome, e o tema não chega em toda loja ao mesmo tempo.
 *
 * `pointer-events` NÃO é desligado de propósito: o `title` do botão precisa
 * continuar aparecendo no hover, e o foco precisa continuar chegando — quem
 * bloqueia o efeito é o guarda no clique, não o CSS. */
.evg-swatch[data-evg-estado] {
    opacity: 0.4;
    cursor: not-allowed;
}

.evg-swatch[data-evg-estado]:hover {
    transform: none;
    border-color: rgba(0, 0, 0, 0.14);
}

/* ESGOTADO tem risco; INDISPONÍVEL não.
 *
 * A distinção é a do WooCommerce e vale para quem compra: esgotado é "esta cor
 * existe e acabou" — a barra é a convenção do mercado para isso. Indisponível é
 * "não combina com o que você já escolheu", que é uma consequência da própria
 * escolha e some ao trocá-la; riscar os dois igual diria que a loja não tem o
 * produto. */
.evg-swatch[data-evg-estado='esgotado']::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        currentColor calc(50% - 1px),
        currentColor calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    color: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* O risco herda a forma do botão: círculo na cor, pílula/retângulo no rótulo. */
.evg-swatch--label[data-evg-estado='esgotado']::after,
.evg-swatch--text[data-evg-estado='esgotado']::after {
    color: rgba(0, 0, 0, 0.35);
}

.evg-swatches .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}