/* ============================================================
   ORNATTO - Swatches de Cor na Página do Produto
   Transforma os botões de texto do atributo "Cor" em círculos
   coloridos com tooltip no hover, usando CSS puro.
   ============================================================ */

/* ── WRAPPER DOS SWATCHES ──────────────────────────────── */
.variable-items-wrapper[data-attribute_name*="cor"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

/* ── CADA ITEM: CÍRCULO ────────────────────────────────── */
.variable-items-wrapper[data-attribute_name*="cor"] .variable-item {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 2px solid rgba(0,0,0,.10) !important;
    outline: 2px solid transparent !important;
    outline-offset: 3px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: outline-color .15s ease, transform .15s ease !important;
}

/* Hover */
.variable-items-wrapper[data-attribute_name*="cor"] .variable-item:hover {
    outline-color: #c9924a !important;
    transform: scale(1.1) !important;
}

/* Selecionado */
.variable-items-wrapper[data-attribute_name*="cor"] .variable-item.selected {
    outline-color: #c9924a !important;
    outline-width: 3px !important;
}

/* Conteúdo interno preenche o círculo */
.variable-items-wrapper[data-attribute_name*="cor"] .variable-item-contents {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Esconde texto */
.variable-items-wrapper[data-attribute_name*="cor"] .variable-item-span {
    display: none !important;
}

/* ── MAPA DE CORES ─────────────────────────────────────── */
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-preto       { background-color: #1a1a1a !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-branco      { background-color: #f5f5f5 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-cinza       { background-color: #9e9e9e !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-cinza-escuro{ background-color: #555555 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-chumbo      { background-color: #607d8b !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-vermelho    { background-color: #e53935 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-rosa        { background-color: #e91e8c !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-rosa-claro  { background-color: #f8bbd0 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-azul        { background-color: #1565c0 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-azul-claro  { background-color: #42a5f5 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-azul-marinho{ background-color: #0d1b4b !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-verde       { background-color: #2e7d32 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-verde-claro { background-color: #81c784 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-verde-agua  { background-color: #5fa89e !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-amarelo     { background-color: #fbc02d !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-laranja     { background-color: #e65100 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-marrom      { background-color: #5d4037 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-caramelo    { background-color: #a0522d !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-bege        { background-color: #d7ccc8 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-palha       { background-color: #e8d5a3 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-terracota   { background-color: #bf360c !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-dourado     { background-color: #c9924a !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-vinho       { background-color: #880e4f !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-bordo       { background-color: #7b1a1a !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-roxo        { background-color: #6a1b9a !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-mostarda    { background-color: #f9a825 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-mescla      { background-color: #b0bec5 !important; }
.variable-items-wrapper[data-attribute_name*="cor"] .button-variable-item-multicolor  {
    background: linear-gradient(135deg, #e53935 0%, #fbc02d 33%, #2e7d32 66%, #1565c0 100%) !important;
}