/* #region DIDEMEX - Attribute Pills (sistema compartido) */

/*
 * Sistema único de pills de atributos, reutilizado por:
 * - Product cards del loop de Shop/Category
 *   (.dmx-attribute-pills dentro de .dmx-loop-product-title-wrap);
 * - Shortcode [dmx_selected_variation_pills] en Product Page
 *   (.dmx-attribute-pills.dmx-selected-variation-pills).
 *
 * Cada contexto agrega SOLO CSS de comportamiento (alineación, nowrap,
 * márgenes) en su propio archivo -- nunca color/padding/tipografía,
 * que viven únicamente aquí. Ver docs/woocommerce/product-pills-overview.md.
 */

:root {
    /*
     * Tipografía y espaciado fluido de las pills. Un solo lugar
     * para escalar todas las instancias sin tocar cada regla.
     */
    --didemex-pill-gap: clamp(0.1875rem, 0.6vw, 0.175rem);
    --didemex-pill-font: clamp(0.5625rem, 0.5rem + 0.28vw, 0.6875rem);
    --didemex-pill-padding-y: clamp(0.15rem, 0.35vw, 0.25rem);
    --didemex-pill-padding-x: clamp(0.35rem, 1.1vw, 0.6rem);
    --didemex-pill-min-height: clamp(1.0625rem, 0.85rem + 0.5vw, 1.25rem);
}

/* #region Contenedor */

.dmx-attribute-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--didemex-pill-gap);
}

/* #endregion Contenedor */


/* #region Pill base + variantes */

.dmx-attr-pill {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;

    min-height: var(--didemex-pill-min-height);
    padding: var(--didemex-pill-padding-y) var(--didemex-pill-padding-x);

    border-radius: 999px;
    overflow: hidden;
    font-size: var(--didemex-pill-font);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
 * Fallback visual para cualquier atributo sin variante específica
 * (incluye atributos futuros normalizados automáticamente, ver
 * dmx_normalize_pill_class_slug() en
 * includes/woocommerce/global/attribute-pills.php). Declarada ANTES
 * que las variantes con nombre: misma especificidad (una sola clase
 * cada una), así que el orden de cascada dentro de este archivo es
 * lo que permite que las variantes de abajo la sobrescriban.
 */
.dmx-attr-pill--default {
    border: 1px solid #e2e4e8;
    background: #ffffff;
    color: #343434;
}

.dmx-attr-pill--almacenamiento {
    border: 1px solid rgba(0, 102, 255, 0.22);
    background: rgba(0, 102, 255, 0.10);
    color: #0066ff;
}

.dmx-attr-pill--color {
    border: 1px solid rgba(32, 32, 32, 0.14);
    background: rgba(32, 32, 32, 0.07);
    color: #202020;
}

.dmx-attr-pill--estetica {
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

/* #endregion Pill base + variantes */

/* #endregion DIDEMEX - Attribute Pills (sistema compartido) */