/* Estilos base para el bloque Product Attributes */
.product-attributes-block {
    margin: 10px 0;
    line-height: 1.5;
    display: block;
}

.product-attributes-block .attribute-label {
    font-weight: 600;
    color: #333;
    margin-right: 5px;
    display: inline;
}

.product-attributes-block .attribute-values {
    color: #666;
    display: inline;
    word-wrap: break-word;
}

/* Soporte para clases de color de Gutenberg */
.product-attributes-block.has-text-color {
    color: inherit;
}

.product-attributes-block.has-background {
    background-color: inherit;
    padding: 1em;
}

/* Clases de tamaño de fuente predefinidas de Gutenberg */
.product-attributes-block.has-small-font-size {
    font-size: 13px;
}

.product-attributes-block.has-medium-font-size {
    font-size: 20px;
}

.product-attributes-block.has-large-font-size {
    font-size: 36px;
}

.product-attributes-block.has-x-large-font-size {
    font-size: 42px;
}

.product-attributes-block.has-huge-font-size {
    font-size: 48px;
}

/* Herencia de estilos para elementos internos */
.product-attributes-block.has-text-color .attribute-label,
.product-attributes-block.has-text-color .attribute-values {
    color: inherit;
}

.product-attributes-block .attribute-label {
    color: inherit;
    opacity: 0.8;
}

.product-attributes-block .attribute-values {
    color: inherit;
    opacity: 0.9;
}

/* Estilos específicos para diferentes contextos */
.woocommerce .product-attributes-block {
    margin: 0.5em 0;
    font-family: inherit;
}

.woocommerce-page .product-attributes-block {
    font-size: inherit;
    line-height: inherit;
}

/* Página de producto individual */
.single-product .product-attributes-block {
   
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

.single-product .product-attributes-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Listas de productos */
.woocommerce ul.products .product-attributes-block {
    font-size: 0.85em;
    margin: 0.25em 0;
}

/* Responsivo */
@media (max-width: 768px) {
    .product-attributes-block {
        font-size: 0.9em;
    }
    
    .product-attributes-block.has-large-font-size {
        font-size: 28px;
    }
    
    .product-attributes-block.has-x-large-font-size {
        font-size: 32px;
    }
    
    .product-attributes-block.has-huge-font-size {
        font-size: 36px;
    }
}

/* Soporte para tema oscuro */
@media (prefers-color-scheme: dark) {
    .product-attributes-block:not(.has-text-color) .attribute-label {
        color: #f0f0f0;
    }
    
    .product-attributes-block:not(.has-text-color) .attribute-values {
        color: #ccc;
    }
}

/* Reset de estilos que pueden interferir */
.product-attributes-block * {
    box-sizing: border-box;
}

/* Asegurar que los estilos de Gutenberg se apliquen correctamente */
.wp-block-custom-product-attributes {
    margin: 0;
}

.wp-block-custom-product-attributes .product-attributes-block {
    margin: 0;
}

/* Compatibilidad con diferentes temas */
.entry-content .product-attributes-block,
.post-content .product-attributes-block {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Asegurar que los colores personalizados se apliquen */
.product-attributes-block[style*="color:"] .attribute-label,
.product-attributes-block[style*="color:"] .attribute-values {
    color: inherit !important;
}

/* Asegurar que el fondo personalizado se aplique */
.product-attributes-block[style*="background-color:"] {
    padding: 0.5em;
    border-radius: 3px;
}

/* Estilos adicionales para mejor integración */
.product-attributes-block.alignwide {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.product-attributes-block.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Mejoras para accesibilidad */
.product-attributes-block:focus {
    outline: 2px solid #005cee;
    outline-offset: 2px;
}

/* Compatibilidad con diferentes separadores */
.product-attributes-block .attribute-values {
    word-break: break-word;
    hyphens: auto;
}