/* ==========================================================================
   NIVEL 1: CSS ESTRUCTURAL E INVARIABLE (The Core Layout)
   ========================================================================== */

/* Metacrilato Configurator Styles */
.layout-container-plugin {
    width: 100%;
}

.config-column {
    width: 100%;
}




.metacrilato-theme .metacrilato-col {
    flex: 1;
}

/* --- Keep existing specific styles for features Uni CPO didn't have exactly like ours --- */





.metacrilato-shape-panel {
    display: none;
}

.metacrilato-shape-panel.active {
    display: block;
}




/* 10-09-2026: eliminadas las reglas .metacrilato-modal* y
   .metacrilato-edit-config-link de la ventana flotante de edición desde el
   carrito (ya no existe). El enlace "Editar" directo lo estila el Gestor. */
/* 14-09-2026: tamaño de RESERVA de los iconos del configurador (antes horneado
   como style="width/height" en cada <img> desde PHP). Especificidad baja a
   propósito: el tamaño real lo pone Apariencia (icono de cada sección). */
.metacrilato-theme img[data-mc-icon] { width: 20px; height: 20px; }

/* Hide empty label variation list item in WooCommerce */
dt.variation-edit_configurator {
    display: none !important;
}

/* Shipping Selector Options */


/* Real-time Configurator Shipping Warning Banner styling */

/* Cart page overrides for pickup orders */
body.cart-requires-pickup .woocommerce-shipping-destination,
body.cart-requires-pickup .shipping-calculator-button,
body.cart-requires-pickup .woocommerce-shipping-calculator,
body.cart-requires-pickup .shipping .woocommerce-shipping-destination,
body.cart-requires-pickup .shipping .shipping-calculator-button,
body.cart-requires-pickup .shipping .woocommerce-shipping-calculator {
    display: none !important;
}

/* ==========================================================================
   3-COLUMN PRODUCT CONFIGURATOR GRID & DYNAMIC AESTHETICS
   ========================================================================== */
/* Hide WooCommerce native elements on single product page */
.single-product .summary.entry-summary p.price,
.single-product .product-title.product-above,
.single-product #kadence-breadcrumbs,
.single-product .summary.entry-summary .product_title.entry-title,
.single-product .woocommerce-product-gallery,
#metacrilato-gallery-placeholder {
    display: none;
}

/* Reset default Kadence columns structure on single product */
.single-product div.product {
    display: block;
}


/* 3 Column Desktop Grid (1fr - 4fr - 1fr, full viewport width) */

/* White cards structure for all three columns */

/* Bento Blocks Style inside Column 2 and Column 1/3 */

@media (min-width: 1025px) {
    
    
    }

/* Pull the content as close as possible to the web header */
/* Hide WooCommerce native subtitle */
.single-product .summary.entry-summary .product-subtitle {
    display: none;
}

/* Column 1 & 3 - Lateral Columns (Transparent background) */

.metacrilato-config-col-1 .col-1-bg-overlay {
    display: none;
}


/* Título de producto en Columna 1 */
/* Square Material Thumbnail Box (cajetín cuadrado al 100% de ancho) */



/* Material Select Group styles */

/* 4-column round swatches Pantone grid */


/* Column 2 - Technical configurations */
.metacrilato-config-col-2 {
    display: flex;
    flex-direction: column;
}

/* Column 3 - Purchase block wrapper & price */


/* Styling native WooCommerce qty and add to cart inside Column 3 */
.metacrilato-buy-block-wrapper .quantity {
    display: none;
}





/* ==========================================================================
   FINAL VISUAL REFINEMENTS (COLUMNS ALIGNMENT & COMPACT DIMENSIONS ROW)
   ========================================================================== */
/* 1. Title and Brand Subtitle Block (Column 1) */

/* 2. Compact Dimensions Row (3 Fields inline) for Column 2 */

.metacrilato-shape-panel .metacrilato-row .metacrilato-col {
    min-width: 0 !important;
}

.metacrilato-shape-panel .metacrilato-row .metacrilato-col:not([style*="flex"]) {
    flex: 1 1 0% !important;
}

/* 3. Layout Mathematical Top Alignment (Zero Offsets) */
@media (min-width: 1025px) {
    
    /* fusionada (2 definiciones) */ #metacrilato-configurator-container.categories-open {
        /* Panel «cambiar material» abierto (23-09-2026): antes 1.5:4:1. La
           primera columna crece menos (las miniaturas son 1fr de su ancho,
           así que se reducen solas) y la del total conserva su ancho. */
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 3.75fr) minmax(0, 1fr) !important;
    }
}

/* ==========================================================================
   COL 1 INTEGRATED BRAND BLOCK & SWITCHER PANELS
   ========================================================================== */


/* Material Switcher Grid Mini Cards styles */




/* New visual configurator controls (horizontal buttons) */
/* Unified Pill Style for option buttons */

/* Option SELECCIONADA: Fondo gris antracita oscuro suave, texto blanco */
/* Disabled option buttons */
/* Planchas Bento Grid Row — reparto 50-50 (despiece/visor) pedido por Daniel
   el 20-07-2026; antes 40-60 y originalmente 1fr 2fr. El gap de 15px (regla
   más abajo) es el estándar entre bentos.
   OJO minmax(0, Xfr): sin él, un carril "fr" nunca baja del ancho mínimo de
   su contenido, así que el despiece se ENSANCHABA al pasar de la invitación
   a las filas de piezas (y el reparto bailaba entre estados). Con minmax(0,…)
   el reparto es exacto e idéntico siempre. (20-07-2026) */
@media (min-width: 769px) {
    }

@media (max-width: 768px) {
    }

/* ==========================================================================
   FASE 10: INLINE FLEX LAYOUTS & COMPACTION
   ========================================================================== */



@media (min-width: 768px) {
    
    .metacrilato-theme .finish-btn,
    .metacrilato-theme .shape-option {
        min-width: 130px;
    }
}

@media (max-width: 767px) {
    
    .metacrilato-theme .finish-btn,
    .metacrilato-theme .shape-option {
        min-width: 0 !important;
        /* Reset desktop min-width */
        width: 100% !important;
    }

    .metacrilato-theme .configurator-row-flex {
        /* 09-09-2026: "column align-start" no es un valor válido de flex-flow
           (align-start no existe); el navegador descartaba la línea entera. */
        flex-flow: column nowrap !important;
        align-items: flex-start !important;
    }
}


/* Dimension inputs inline layout */

@media (max-width: 767px) {
    }




/* SVG Panel spacing fixes */
/* Bento Buy Premium styling inside Col 3 Card */
/* Rediseño premium para botones secundarios (añadir pieza / añadir plancha).
   #add-new-plancha-btn y .planchas-add-piece-btn (despiece, por clase: hay uno
   por plancha) son gemelos de #add-piece-btn: mismo aspecto y selectores,
   solo cambia el texto (Settings). (17-07-2026) */


/* Wrap del botón del despiece: centrado como los otros gemelos pero SIN los
   márgenes 15/25 de .add-piece-btn-wrap — va en el flujo, pegado a la última
   pieza (el hueco lo ponen los margin-bottom de la lista/texto). */
.planchas-add-btn-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ==========================================================================
   NUEVA MAQUETACIÓN VERTICAL CON BOTONES DE RADIO (DISEÑO BENTO)
   ========================================================================== */

/* finish-options-vertical: columna simple, sin restricción de ancho */

/* shape-options-vertical: width:max-content para que el contenedor se ajuste al
   hijo más ancho; los hijos con width:100% igualan ese ancho automáticamente */

/* Radio oculto: sólo portador de estado; la interacción es visual sobre .shape-option */
.metacrilato-theme .shape-radio-input {
    display: none;
}


.metacrilato-theme .finish-radio-label {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
}

.metacrilato-theme .finish-radio-input {
    width: 18px !important;
    height: 18px !important;
}

/* Botón-estilo para opciones de forma vertical.
   Sobreescribe la regla global .finish-btn/.shape-option (justify-content:center,
   height:42px, min-width:180px) que no aplica al layout vertical. */


/* Anulación de estilos tipo píldora para corte/acabado vertical */

/* Efectos de Hover y Selección */
/* Opciones deshabilitadas */
/* ==========================================================================
   BENTO GRID DE 4 COLUMNAS EN HORIZONTAL
   ========================================================================== */

/* Make each Bento box stretch vertically to fill the height of the row */

/* Improve vertical alignment of section labels inside bento blocks */

/* Dimensions vertical stacking layout inside bento-measures */




/* Responsive Grid Adaptations */
@media (max-width: 1024px) {
    .configurator-bento-grid-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .configurator-bento-grid-row {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   DISEÑO SIMPLIFICADO DE CABECERA DE MATERIAL (BENTO MATERIAL)
   ========================================================================== */


/* Style details text in standard accordion headers to stand out and be black */
/* Margin-top inside active accordion to separate header from content */
/* Visor Bento SVG Grid alignment */
@media (min-width: 1025px) {
    .bento-svg-visor {
        grid-column: span 2;
    }
}


/* Force bento blocks to be strictly hidden, overriding display: flex !important */
.metacrilato-theme .hidden-bento-block {
    display: none !important;
}

/* Plancha piece ultra-compact inputs and list row styling */
@keyframes planchaFadeIn {
from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}



/* ==========================================================================
   NIVEL 2: CSS ESTÉTICO Y COMPILADO (The Visual Skin)
   ========================================================================== */

/* Metacrilato Configurator Styles */
/* --- Uni CPO Mimic Styles --- */
.metacrilato-theme {
    font-family: inherit;
    /* Inherit theme font */
}

.metacrilato-theme .metacrilato-section-header {
    background-color: var(--mc-boton-hover) !important;
    color: var(--mc-boton-texto) !important;
    padding: 10px 15px !important;
    font-weight: var(--mc-peso) !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    margin-top: 30px !important;
    font-size: var(--mc-fs-base) !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.metacrilato-theme .metacrilato-group-header {
    background-color: var(--mc-fondo-suave) !important;
    color: var(--mc-texto) !important;
    padding: 8px 15px !important;
    font-weight: var(--mc-peso) !important;
    margin-bottom: 15px !important;
    font-size: var(--mc-fs-compacto) !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.metacrilato-theme .metacrilato-label {
    /* font-size y font-weight eliminados: los inyecta el admin (grosoresConfig)
       a través de inline style + applyGrosoresStyles(). Mantenerlos aquí
       bloqueaba cualquier inline style sin. */
    margin-bottom: 5px;
    color: var(--mc-texto);
    line-height: 1.5;
    opacity: 1;
    visibility: visible;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .metacrilato-field {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--mc-borde-campo);
    background-color: var(--mc-fondo);
    border-radius: var(--mc-radio-bento);
    color: var(--mc-texto);
    font-size: var(--mc-fs-compacto);
}

/* fusionada (2 definiciones) */ .metacrilato-theme .metacrilato-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.metacrilato-theme .form-group {
    margin-bottom: 25px;
}

/* --- Keep existing specific styles for features Uni CPO didn't have exactly like ours --- */
/* fusionada (2 definiciones) */ .color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
}

/* fusionada (2 definiciones) */ .color-thumb {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--mc-radio-bento);
    border: 2px solid transparent;
    cursor: pointer;
}

.color-thumb.selected {
    border-color: var(--mc-enlace);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-enlace) 20%, transparent);
}

/* fusionada (2 definiciones) */ .color-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* fusionada (2 definiciones) */ .shape-options {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* fusionada (2 definiciones) */ .shape-option {
    flex: 1;
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-bento);
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background: var(--mc-fondo-suave);
    color: var(--mc-texto);
    font-size: var(--mc-fs-compacto);
    visibility: visible;
    opacity: 1;
}

.shape-option.selected {
    border-color: var(--mc-texto);
    background-color: var(--mc-fondo-suave);
    color: var(--mc-texto);
    font-weight: var(--mc-peso);
}

/* fusionada (2 definiciones) */ .finish-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* fusionada (2 definiciones) */ .finish-option {
    display: flex;
    align-items: center;
    border: 1px solid var(--mc-borde-campo);
    background: var(--mc-fondo);
    border-radius: var(--mc-radio-bento);
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--mc-texto);
    font-size: var(--mc-fs-compacto);
    visibility: visible;
    opacity: 1;
}

.finish-option:hover {
    background: var(--mc-fondo-suave) !important;
}

.finish-option.selected {
    border-color: var(--mc-texto);
    background-color: var(--mc-fondo-suave);
    font-weight: var(--mc-peso);
}

.finish-option.disabled {
    opacity: 0.5 !important;
    pointer-events: none;
    background: var(--mc-fondo-suave) !important;
}

.price-box {
    background: var(--mc-fondo-suave);
    border: 1px solid var(--mc-borde);
    border-top: 3px solid var(--mc-texto);
    padding: 20px;
    margin-top: 30px;
}

.price-value {
    font-size: var(--mc-fs-total);
    font-weight: var(--mc-peso);
    color: var(--mc-texto);
    margin: 10px 0;
}

.details {
    font-size: 0.85em;
    color: var(--mc-texto-2);
    line-height: 1.5;
}

#file-name {
    color: var(--mc-texto) !important;
    font-size: var(--mc-fs-compacto) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.number-of-pieces-group input[type="number"] {
    border: 1px solid var(--mc-borde-campo);
    border-radius: var(--mc-radio-bento);
    padding: 8px 12px;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto);
    background-color: var(--mc-fondo-suave);
    transition: all 0.2s ease;
}

.number-of-pieces-group input[type="number"]:focus {
    outline: none;
    border-color: var(--mc-enlace);
    background-color: var(--mc-fondo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-enlace) 15%, transparent);
}

/* ==========================================================================
   ACORDEÓN DE PIEZAS Y PLANCHAS — todo el CSS del acordeón en un único lugar.
   Estructura (corte):    #pieces-accordion-container  > .piece-accordion-item
                          > .piece-accordion-header + .piece-accordion-content
   Estructura (planchas): #planchas-accordion-container > .plancha-accordion-item
                          > .plancha-accordion-header + .plancha-accordion-content
   JS gestiona: apertura/cierre, colores del badge (updatePriceBadgeAesthetics),
                tamaños de fuente/iconos desde acordeonConfig en DATA.settings.
   ========================================================================== */

/* Contenedor del acordeón de PLANCHAS: mismo respiro superior que el de
   corte (20px). El margen inline lo pisaba una regla del tema (propiedad
   lógica margin-block), por eso se fija aquí con !important. (17-07-2026) */
#planchas-accordion-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Contenedor de pieza — las clases .plancha-* comparten TODAS las reglas del
   acordeón: ambos acordeones deben ser idénticos (Tanda 3, 17-07-2026) */
.piece-accordion-item,
.plancha-accordion-item {
    overflow: visible;
    border: none;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 15px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cabecera clicable */
.piece-accordion-header,
.plancha-accordion-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 15px;
    padding: 14px 15px;
    background-color: var(--mc-fondo-suave);
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-bento);
    transition: all 0.2s ease;
}

.piece-accordion-header:hover,
.plancha-accordion-header:hover {
    background-color: var(--mc-fondo-suave) !important;
}

.piece-accordion-item.active .piece-accordion-header,
.plancha-accordion-item.active .plancha-accordion-header {
    background-color: var(--mc-fondo-suave);
    border-bottom: 1px solid var(--mc-borde);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Título del acordeón: "Pieza N" — visible, estilos gestionados por JS desde acordeonConfig */
.piece-title,
.plancha-title {
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--mc-texto);
}

/* Resumen de pieza (material · grosor · forma · medidas) */
/* font-size y font-weight sin !important para que los estilos inline del admin surtan efecto */
.piece-details-text,
.plancha-summary-text {
    flex: 1;
    overflow: hidden;
    color: var(--mc-texto);
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Zona derecha: precio + acciones */
.piece-header-right,
.plancha-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Badge de precio — solo forma y transición.
   JS aplica background-color y color según el material (updatePriceBadgeAesthetics).
   JS aplica font-size y font-weight desde acordeonConfig.precio.
   23-09-2026: es una píldora (radio de píldora de Apariencia → Botones), no
   una tarjeta; el bloque G lo había unificado con el radio de tarjeta. */
.piece-header-price,
.plancha-price-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--mc-radio-pildora);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Chevron */
.piece-chevron,
.plancha-chevron {
    font-size: var(--mc-fs-mini);
    color: var(--mc-texto-2);
    transition: transform 0.2s ease;
}

.piece-accordion-item.active .piece-chevron,
.plancha-accordion-item.active .plancha-chevron {
    transform: rotate(180deg);
}

/* Contenido expandible */
.piece-accordion-content,
.plancha-accordion-content {
    padding: 0;
    background-color: transparent;
    border: none;
}

.piece-accordion-item.active .piece-accordion-content,
.plancha-accordion-item.active .plancha-accordion-content {
    margin-top: 15px;
}

/* Ocultar headers de sección redundantes dentro del acordeón */
.piece-accordion-content .metacrilato-section-header {
    display: none !important;
}

/* Bento de material: sin borde superior (se une al header visualmente) */
.piece-accordion-content .bento-material {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-bottom: 15px !important;
}

/* Cancelar padding lateral de todos los bentos dentro del acordeón (20px → 0)
   para que los iconos/títulos queden a 15px del borde — igual que la cabecera.
   El padding lo aporta el contenedor interior (configurator-row-flex /
   configurator-vertical-group) con sus propios 15px simétricamente. */
.piece-accordion-content .metacrilato-bento-block,
.plancha-accordion-content .metacrilato-bento-block {
    padding-left: 0;
    padding-right: 0;
}

/* Despiece de planchas: el wrapper interior aporta los 15px laterales, igual
   que configurator-row-flex / configurator-vertical-group en el resto de
   bentos, para que su icono/título alineen con grosores y el acordeón. */
.planchas-despiece-wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

/* Visor del optimizador: su contenedor interior hereda del
   configurator-vertical-group general los 15px laterales y un margen
   inferior de 18px, pero aquí NO hay título que alinear: el relleno separaba
   el visor 30px del despiece y lo dejaba corto por la derecha, y el margen
   inferior hacía la CELDA del visor 18px más alta que su marco punteado —
   con lo que el bento despiece (que se estira a la fila) acababa más abajo
   que el punteado. Todo a cero: la celda mide lo que el marco. (20-07-2026) */
.metacrilato-theme .bento-optimizer-visor .configurator-vertical-group {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    /* sin gap: el mensaje de estado, cuando aparece, ya trae su margen */
    gap: 0;
}

/* Caja de precio de pieza (dentro del contenido expandible) */
.piece-price-box {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Subtotal bento: anular el padding vertical del bento general (18px → 0)
   para que el bento se adapte al contenido sin espacio excesivo arriba/abajo. */
.metacrilato-theme .piece-price-row > .bento-price {
    padding-top: 0;
    padding-bottom: 0;
}

/* El padding horizontal (15px) y vertical (18px) del bento subtotal
   lo inyecta applySubtotalStyles() en JS para evitar conflictos de cascada.
   El gap entre líneas también lo controla JS vía cfg.lineGap. */

.piece-price-value {
    font-size: var(--mc-fs-subtotal) !important;
    color: var(--mc-enlace) !important;
    margin: 5px 0 !important;
}

/* Fila de precio (subtotal + alerta de dimensiones) — reparto flexible de columnas.
   Sin alerta: el subtotal ocupa el 100%. Con alerta (.has-alert): 50/50.
   JS añade/quita .has-alert y .savings-active dinámicamente. */
.piece-price-row,
.plancha-price-row {
    display: flex;
    gap: 15px;
    align-items: stretch;
}

/* 2 columnas: aviso de dimensiones activo */
.piece-price-row.has-alert > .metacrilato-bento-block,
.plancha-price-row.has-alert > .metacrilato-bento-block {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 7.5px);
    box-sizing: border-box;
}

/* 2 columnas: solo mensaje de ahorro activo (sin aviso de dimensiones) */
.plancha-price-row.savings-active > .metacrilato-bento-block {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 7.5px);
    box-sizing: border-box;
}

/* 3 columnas: aviso de dimensiones + mensaje de ahorro activos a la vez */
.plancha-price-row.has-alert.savings-active > .metacrilato-bento-block {
    max-width: calc(33.33% - 10px) !important;
}

/* ==========================================================================
   GROSOR — botones, contenedor y etiqueta de la sección de grosor.
   Aplica tanto al modo Corte a Medida como al modo Planchas.
   CSS estático: layout, forma, estados base.
   Tipografía y color del estado seleccionado: herramienta Apariencia
   (sección Grosores); el motor JS antiguo se retiró el 09-09-2026.
   ========================================================================== */

/* Fila de botones: horizontal, sin expansión, con separación uniforme */
.metacrilato-theme .thickness-buttons-flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    flex: none;
    width: auto;
    gap: 8px;
}

@media (min-width: 768px) {
    .metacrilato-theme .thickness-buttons-flex {
        max-width: 100%;
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .metacrilato-theme .thickness-buttons-flex {
        flex-flow: row wrap !important;
        width: 100% !important;
    }
}

/* Botón de grosor individual */
.metacrilato-theme .thickness-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 36px;
    padding: 8px 16px;
    margin: 0;
    border: none;
    border-radius: var(--mc-radio-bento);
    background: transparent;
    color: var(--mc-texto);
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    line-height: 20px;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Seleccionado — fondo y sombra gestionados dinámicamente por JS vía grosoresConfig */
.metacrilato-theme .thickness-btn.selected {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Desactivado — no disponible para el material seleccionado */
.metacrilato-theme .thickness-btn.disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
    color: var(--mc-texto-3) !important;
    background: transparent !important;
    border: none !important;
}

/* --------------------------------------------------------------------------
 * GROSORES BAJO CONSULTA (23-08-2026)
 * Grosores que no se venden por la web pero que podemos servir de un resto o
 * comprando plancha. Van detrás de los normales, apagados y sin poder
 * pulsarse, con el punto naranja y el enlace a contacto debajo.
 * -------------------------------------------------------------------------- */
.metacrilato-theme .thickness-btn-consulta,
.metacrilato-theme .thickness-btn-consulta:hover {
    gap: 0 !important;
    color: var(--mc-texto-3) !important;
    background: transparent !important;
    border: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    /* El tema apaga los botones deshabilitados; aquí lo impedimos para que el
       punto naranja salga del mismo tono que el del enlace. */
    opacity: 1 !important;
}

/* El aviso se saca del flujo y se apoya a la derecha del propio cajetín, para
   que no añada una línea y el bloque conserve su altura original. */
.metacrilato-theme .bento-thickness {
    position: relative;
}

.metacrilato-theme .bento-thickness .mc-consulta-aviso {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    margin-top: 0 !important;
}

/* Fuera del bento (clon del acordeón de piezas) se queda en flujo. */
.metacrilato-theme .mc-consulta-aviso {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
    font-size: var(--mc-fs-compacto) !important;
    line-height: 18px !important;
}

.metacrilato-theme .mc-consulta-dot {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    opacity: 1 !important;
}

/* Dentro de la píldora el punto va volado, arriba a la derecha del "mm". */
.metacrilato-theme .thickness-btn-consulta .mc-consulta-dot {
    position: relative !important;
    top: -5px !important;
    width: 6px !important;
    height: 6px !important;
    margin-left: 2px !important;
}

.metacrilato-theme .mc-consulta-link {
    color: var(--mc-texto-2) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.metacrilato-theme .mc-consulta-link:hover {
    color: var(--mc-texto) !important;
}

/* Fila interior del bento: horizontal con separación entre botones */
.metacrilato-theme .bento-thickness .configurator-row-flex {
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

/* Etiqueta de título del grosor en modo estándar (sin acordeón).
   gap y white-space se heredan del inline style del PHP; este selector
   queda como anclaje por si futuros estilos del tema lo necesitan. */
#bento-label-thickness {
    white-space: nowrap;
}

#bento-label-shape {
    white-space: nowrap;
}

#bento-label-measures {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 15px;
}

.global-price-box {
    border-top: 4px solid var(--mc-texto);
    background-color: var(--mc-fondo-suave);
}

.global-price-box .price-value {
    color: var(--mc-texto) !important;
}

/* Hide empty label variation list item in WooCommerce */
dd.variation-edit_configurator {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-top: 4px;
}

/* Shipping Selector Options */
/* fusionada (2 definiciones) */ .shipping-options {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* fusionada (2 definiciones) */ .shipping-option {
    flex: 1;
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-bento);
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    background: var(--mc-fondo-suave) !important;
    color: var(--mc-texto) !important;
    font-size: var(--mc-fs-compacto) !important;
    font-weight: var(--mc-peso) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s ease;
    user-select: none;
}

.shipping-option:hover {
    background: var(--mc-fondo-suave) !important;
    border-color: var(--mc-borde-campo) !important;
}

.shipping-option.selected {
    border-color: var(--mc-texto) !important;
    background-color: var(--mc-fondo-suave) !important;
    color: var(--mc-texto) !important;
    font-weight: var(--mc-peso) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shipping-option.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: var(--mc-borde) !important;
    border-color: var(--mc-borde-campo) !important;
    color: var(--mc-texto-3) !important;
}

/* Real-time Configurator Shipping Warning Banner styling */
/* fusionada (2 definiciones) */ .metacrilato-shipping-warning {
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.metacrilato-shipping-warning p {
    margin: 0 !important;
    color: var(--mc-error) !important;
}

.metacrilato-shipping-warning strong {
    font-weight: var(--mc-peso) !important;
}

.metacrilato-shipping-warning a {
    color: var(--mc-error) !important;
    text-decoration: underline !important;
}

/* Cart page overrides for pickup orders */
/* ==========================================================================
   3-COLUMN PRODUCT CONFIGURATOR GRID & DYNAMIC AESTHETICS
   ========================================================================== */
/* Hide WooCommerce native elements on single product page */
/* Reset default Kadence columns structure on single product */
/* fusionada (2 definiciones) */ .single-product .summary.entry-summary {
    float: none !important;
    width: 100% !important;
    clear: both !important;
    margin: 0 !important;
}

/* 3 Column Desktop Grid (20% - 50% - 30% spacing) */
/* fusionada (2 definiciones) */ #metacrilato-configurator-container {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: var(--mc-fondo-suave);
    padding: 20px !important;
    border-radius: var(--mc-radio-tarjeta);
}

/* White cards structure for all three columns */
/* fusionada (2 definiciones) */ .col-1-top-card,
.metacrilato-config-col-2,
.col-3-buy-card {
    box-sizing: border-box;
    background-color: var(--mc-fondo);
    border-radius: var(--mc-radio-tarjeta);
    padding: 20px;
    border: 1px solid var(--mc-borde);
    box-shadow: var(--mc-sombra-tarjeta);
}

/* Bento Blocks Style inside Column 2 and Column 1/3 */
/* fusionada (2 definiciones) */ .metacrilato-bento-block {
    box-sizing: border-box;
    background-color: var(--mc-fondo-suave);
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-bento);
    padding: 14px 20px;
    margin-bottom: 15px;
}

.metacrilato-bento-block:last-child {
    margin-bottom: 0;
}

@media (min-width: 1025px) {
    }

/* Pull the content flush to the web header on single product pages.
   Two rules needed:
   1. Override the Kadence/WooCommerce rule that adds padding-top:10px to
      .content-container — we use the double-class selector (.content-container.site-container)
      for higher specificity (0,3,0) to beat their single-class rule (0,2,0).
   2. The first <p> anchor inside .summary has margin-top:1em from WooCommerce base CSS;
      when empty (as our plugin renders it), that margin collapses upward through every
      overflow:visible/no-border ancestor all the way to the top of the page. Zeroing it
      on empty paragraphs stops the collapse without affecting real content. */
.single-product .content-container.site-container {
    padding-top: 0;
}

.woocommerce div.product .summary p:empty {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hide WooCommerce native subtitle */
/* Column 1 & 3 - Lateral Columns (Transparent background) */
/* fusionada (2 definiciones) */ .metacrilato-config-col-1,
.metacrilato-config-col-3 {
    position: relative;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.col-1-top-card {
    margin-top: 15px;
}

/* fusionada (2 definiciones) */ .metacrilato-config-col-1 .col-1-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Título de producto en Columna 1 */

/* Square Material Thumbnail Box (cajetín cuadrado al 100% de ancho) */
/* fusionada (3 definiciones) */ #configurator-material-thumb-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    position: relative;
    margin-bottom: 0px;
}

/* fusionada (2 definiciones) */ #configurator-material-thumb {
    width: 100%;
    height: auto;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: var(--mc-radio-bento);
    border: none;
    box-shadow: none;
    background-color: var(--mc-fondo-suave);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#configurator-material-thumb:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* fusionada (2 definiciones) */ #configurator-material-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Material Select Group styles */
.material-select-group {
    margin-top: 5px;
    margin-bottom: 0px !important;
}

.material-select-group .metacrilato-label {
    font-size: var(--mc-fs-mini) !important;
    font-weight: var(--mc-peso) !important;
    color: var(--mc-texto-2) !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* fusionada (2 definiciones) */ .material-select-group select#material {
    width: 100%;
    height: 40px;
    border: 1px solid var(--mc-borde-campo);
    border-radius: var(--mc-radio-bento);
    padding: 0 10px;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto);
    background-color: var(--mc-fondo);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* 4-column round swatches Pantone grid */
.metacrilato-config-col-1 #sub-option-group {
    margin-top: 0px;
}

.metacrilato-config-col-1 #sub-option-group .metacrilato-label {
    font-size: var(--mc-fs-mini);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* fusionada (2 definiciones) */ .metacrilato-config-col-1 .color-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    gap: 8px;
}

/* fusionada (2 definiciones) */ .metacrilato-config-col-1 .color-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--mc-radio-bento);
    border: 2px solid transparent;
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.metacrilato-config-col-1 .color-thumb:hover {
    transform: scale(1.1) !important;
}

.metacrilato-config-col-1 .color-thumb.selected {
    border-color: var(--mc-enlace);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-enlace) 20%, transparent);
}

/* Column 2 - Technical configurations */
/* Column 3 - Purchase block wrapper & price */
/* fusionada (2 definiciones) */ .metacrilato-config-col-3 {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* fusionada (2 definiciones) */ .metacrilato-buy-block-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* Styling native WooCommerce qty and add to cart inside Column 3 */
/* fusionada (2 definiciones) */ .metacrilato-buy-block-wrapper .quantity label {
    display: none;
}

/* fusionada (2 definiciones) */ .metacrilato-buy-block-wrapper .quantity input.qty {
    height: 44px;
    width: 90px;
    border: 1px solid var(--mc-borde-campo);
    border-radius: var(--mc-radio-bento);
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
    text-align: center;
    color: var(--mc-texto);
}

/* (v7.3.56) El botón AÑADIR AL CARRITO es ahora el CUARTO GEMELO del botón
   añadir pieza/plancha: su aspecto vive en la ficha "Botón añadir" de
   Apariencia + el bloque pill compartido de más arriba (SUSTITUYE al antiguo
   bloque negro en mayúsculas que vivía aquí). Texto e icono propios en
   Settings → Textos e iconos. */
.metacrilato-buy-block-wrapper .single_add_to_cart_button:active {
    transform: scale(0.98);
}

/* ==========================================================================
   FINAL VISUAL REFINEMENTS (COLUMNS ALIGNMENT & COMPACT DIMENSIONS ROW)
   ========================================================================== */
/* 1. Title and Brand Subtitle Block (Column 1) */
/* fusionada (2 definiciones) */ .metacrilato-title-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-bottom: -5px !important;
}

/* fusionada (2 definiciones) */ .metacrilato-product-title {
    font-size: var(--mc-fs-titulo) !important;
    font-weight: var(--mc-peso) !important;
    color: var(--mc-texto) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
}

.metacrilato-brand-subtitle {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
    margin: 0;
    line-height: 1.2;
    font-family: inherit;
}

/* 2. Compact Dimensions Row (3 Fields inline) for Column 2 */
/* fusionada (2 definiciones) */ .metacrilato-shape-panel .metacrilato-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-end !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}

/* 3. Layout Mathematical Top Alignment (Zero Offsets) */
@media (min-width: 1025px) {
    /* fusionada (4 definiciones) */ #metacrilato-configurator-container {
        display: grid;
        /* Proporción original 1:4:1. minmax(0,…) impide que una columna crezca
           con su contenido (la del total se ensanchaba con importes largos y
           estrechaba la central); si el total no cabe, lo encoge el JS
           (encogeTotal). 23-09-2026. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
        align-items: start;
        gap: 15px;
        margin-top: 0;
        padding: 15px !important;
        padding-top: 0 !important;
    }

    /* fusionada (2 definiciones) */ .metacrilato-config-col-1,
    .metacrilato-config-col-3 {
        position: sticky;
        top: 20px;
        margin-top: 0;
        padding-top: 0;
    }

    .metacrilato-config-col-2 {
        margin-top: 0;
        padding-top: 0;
    }

    .col-1-top-card,
    .col-3-buy-card {
        margin-top: 0;
    }

    .metacrilato-config-col-2 > :first-child,
    .col-1-top-card > :first-child,
    .col-3-buy-card > :first-child,
    #standard-configurator-fields > :first-child,
    #planchas-configurator-fields > :first-child {
        margin-top: 0;
        padding-top: 0;
    }
}

/* ==========================================================================
   COL 1 INTEGRATED BRAND BLOCK & SWITCHER PANELS
   ========================================================================== */
/* fusionada (2 definiciones) */ #configurator-material-thumb-wrapper .metacrilato-brand-block {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    pointer-events: none;
    margin: 0;
}

.metacrilato-brand-block .metacrilato-brand-subtitle {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    margin: 0;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.metacrilato-brand-block.contrast-white .metacrilato-brand-subtitle {
    color: var(--mc-boton-texto) !important;
}

.metacrilato-brand-block.contrast-black .metacrilato-brand-subtitle {
    color: var(--mc-texto) !important;
}

/* Material Switcher Grid Mini Cards styles */
/* fusionada (2 definiciones) */ #material-switcher-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 8px;
}

.material-mini-card {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.2s ease;
}

.material-mini-card:hover {
    transform: scale(1.04) !important;
}

/* fusionada (2 definiciones) */ .material-mini-card .mini-card-thumb-wrapper {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: var(--mc-radio-bento);
    background: transparent;
    border: none;
    box-shadow: none;
}

/* fusionada (2 definiciones) */ .material-mini-card .mini-card-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

/* fusionada (2 definiciones) */ .material-mini-card .mini-card-title {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 10;
    pointer-events: none;
    font-size: var(--mc-fs-mini);
    font-weight: var(--mc-peso);
    line-height: 1.1;
    text-align: left;
    text-transform: capitalize;
    white-space: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.material-mini-card .mini-card-title.contrast-white {
    color: var(--mc-boton-texto) !important;
}

.material-mini-card .mini-card-title.contrast-black {
    color: var(--mc-texto) !important;
}

/* New visual configurator controls (horizontal buttons) */
/* Unified Pill Style for option buttons */
/* fusionada (2 definiciones) */ .metacrilato-theme .finish-btn,
.metacrilato-theme .shape-option {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    min-width: 180px;
    border-radius: var(--mc-radio-pildora);
    padding: 10px 24px;
    text-align: center;
    cursor: pointer;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    transition: all 0.2s ease;
    box-shadow: none;
    background-color: var(--mc-fondo);
    color: var(--mc-texto);
    border: 1px solid var(--mc-borde-campo);
    white-space: nowrap;
}


/* Option SELECCIONADA: Fondo gris antracita oscuro suave, texto blanco */
.metacrilato-theme .finish-btn.selected,
.metacrilato-theme .shape-option.selected {
    background-color: var(--mc-boton);
    color: var(--mc-boton-texto);
    border-color: var(--mc-texto);
    font-weight: var(--mc-peso);
}

/* Disabled option buttons */
.metacrilato-theme .finish-btn.disabled,
.metacrilato-theme .shape-option.disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
    background-color: var(--mc-fondo-suave) !important;
    color: var(--mc-texto-3) !important;
    border-color: var(--mc-borde) !important;
}

/* Planchas Bento Grid Row */
@media (min-width: 769px) {
    /* fusionada (2 definiciones) */ .planchas-bento-grid-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
        box-sizing: border-box;
        gap: 15px;
        margin-top: 15px;
    }
}

/* Dentro de la fila despiece/visor, el bento del despiece pierde el
   margin-bottom genérico de los bentos: se lo comía al estirado del grid y
   dejaba la tarjeta 15px más corta que el visor. Con esto, el despiece mide
   SIEMPRE como mínimo la altura del visor (que es fija) y solo la supera si
   el cliente configura ~5 piezas o más (el visor, con align-self:start, no
   crece). La separación con la fila de subtotal la pone esa fila con su
   margin-top. (20-07-2026) */
.planchas-bento-grid-row > .metacrilato-bento-block {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    /* fusionada (2 definiciones) */ .planchas-bento-grid-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   FASE 10: INLINE FLEX LAYOUTS & COMPACTION
   ========================================================================== */
/* fusionada (2 definiciones) */ .metacrilato-theme .configurator-row-flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    box-sizing: border-box;
    gap: 15px;
    margin-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .flex-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    color: var(--mc-texto);
}

/* fusionada (2 definiciones) */ .metacrilato-theme .finish-buttons-flex,
.metacrilato-theme .shape-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    flex: 1 !important;
    justify-content: center !important;
    gap: 15px !important;
}

@media (min-width: 768px) {
    /* fusionada (2 definiciones) */ .metacrilato-theme .finish-buttons-flex,
    .metacrilato-theme .shape-options {
        grid-auto-flow: column !important;
        grid-auto-columns: 1fr !important;
        grid-template-columns: none !important;
        width: max-content !important;
        max-width: 100% !important;
        flex: none !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

@media (max-width: 767px) {
    /* fusionada (2 definiciones) */ .metacrilato-theme .finish-buttons-flex,
    .metacrilato-theme .shape-options {
        grid-auto-flow: row !important;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
        margin: 0 !important;
    }
}

.metacrilato-theme .shape-selector-wrapper {
    margin-bottom: 20px;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .finish-nav-flex-rows {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
}

/* Dimension inputs inline layout */
/* fusionada (2 definiciones) */ .metacrilato-theme .dimensions-inputs-wrapper {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: none !important;
    gap: 20px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

@media (max-width: 767px) {
    /* fusionada (2 definiciones) */ .metacrilato-theme .dimensions-inputs-wrapper {
        flex-flow: row wrap !important;
        justify-content: center !important;
        width: 100% !important;
        flex: 1 !important;
        margin: 0 !important;
    }
}

/* fusionada (2 definiciones) */ .metacrilato-theme .dimension-input-col {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
}

.metacrilato-theme .inline-label {
    margin-bottom: 0;
    color: var(--mc-texto-2);
    /* Gris Medio Neutro — font-size y font-weight los inyecta applyMedidasStyles() */
    white-space: nowrap;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .dimension-input-col input.metacrilato-field {
    width: 90px !important;
    height: 40px !important;
    text-align: center !important;
    border-radius: var(--mc-radio-bento) !important;
    border: 1px solid var(--mc-borde-campo) !important;
    font-weight: var(--mc-peso) !important;
}

/* fusionada (2 definiciones) */ .metacrilato-shape-panel .metacrilato-row.inline-dimensions-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    gap: 20px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* SVG Panel spacing fixes */
.metacrilato-theme .svg-preview-container {
    margin-left: 15px;
    margin-right: 15px;
}

/* Bento Buy Premium styling inside Col 3 Card */
.bento-buy-premium {
    margin-bottom: 15px;
}

.bento-buy-premium .global-price-box {
    margin: 0;
    padding: 0;
    padding-top: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.bento-buy-premium #total-bento-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Los estilos de #total-label-line, #final-price y #final-price-sin-iva
   los inyecta applyTotalStyles() en JS para que respondan a totalConfig. */

.bento-buy-premium .metacrilato-buy-block-wrapper {
    margin-top: 15px !important;
}

/* Rediseño premium para botones secundarios (añadir pieza / añadir plancha /
   despiece) y — v7.3.56 — el botón AÑADIR AL CARRITO, cuarto gemelo. */
/* Geometría única de botón (bloque I): la misma que buttons.css del Gestor,
   a partir de --mc-icono-boton y --mc-btn-margen (Apariencia → Botones).
   El icono (.apb-icon) queda concéntrico con el semicírculo de la píldora. */
#metacrilato-configurator-container #add-piece-btn,
#metacrilato-configurator-container #add-new-plancha-btn,
#metacrilato-configurator-container .planchas-add-piece-btn,
#metacrilato-configurator-container .metacrilato-buy-block-wrapper .single_add_to_cart_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mc-btn-margen-texto);
    box-sizing: border-box;
    width: fit-content;
    flex: 0 0 auto;
    height: var(--mc-btn-alto);
    min-height: 0;
    padding: 0 var(--mc-btn-margen-texto) 0 var(--mc-btn-margen);
    border: none;
    border-radius: var(--mc-radio-pildora);
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    box-shadow: none;
}
#metacrilato-configurator-container .apb-icon {
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: calc((var(--mc-icono-boton) - var(--mc-icono-glifo)) / 2);
    margin-right: calc((var(--mc-icono-glifo) - var(--mc-icono-boton)) / 2);
    -webkit-mask-origin: content-box;
    mask-origin: content-box;
    -webkit-mask-clip: content-box;
    mask-clip: content-box;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
/* Icono ya redondo (círculo con +): ocupa el círculo entero. */
#metacrilato-configurator-container .apb-icon.apb-icon-redondo {
    padding: 0;
    margin-right: 0;
}


/* Desactivado (solo aplica al del carrito): gris neutro. Apariencia emite el
   suyo también; este es el respaldo. */
.metacrilato-buy-block-wrapper .single_add_to_cart_button:disabled {
    background-color: var(--mc-texto-3) !important;
    color: var(--mc-boton-texto) !important;
    cursor: not-allowed !important;
}

/* fusionada (2 definiciones) */ .add-piece-btn-wrap,
.add-cut-btn-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 25px !important;
}

/* ==========================================================================
   NUEVA MAQUETACIÓN VERTICAL CON BOTONES DE RADIO (DISEÑO BENTO)
   ========================================================================== */
/* fusionada (2 definiciones) */ .metacrilato-theme .configurator-vertical-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    box-sizing: border-box;
    width: 100%;
    gap: 8px;
    margin-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .shape-options-vertical {
    display: flex;
    flex-direction: column;
    width: max-content;
    box-sizing: border-box;
    gap: 8px;
    align-self: center;
}

/* Espaciado vertical título→opciones = padding-top del bento (18px), para simetría visual */
.metacrilato-theme .bento-shape .configurator-vertical-group,
.metacrilato-theme .bento-measures .configurator-vertical-group {
    gap: 18px;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .finish-options-vertical {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding-left: 5px;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .shape-radio-label {
    display: block;
    cursor: pointer;
    color: var(--mc-texto-2);
    margin: 0;
}

/* Botones de Corte y Acabado: diseño tipo bento (misma base que .shape-option) */
/* fusionada (2 definiciones) */ .metacrilato-theme .finish-options-vertical .finish-btn-corte,
.metacrilato-theme .finish-options-vertical .finish-btn-acabado {
    min-width: 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-bento);
    padding: 8px 14px;
    background-color: transparent;
    box-sizing: border-box;
    text-align: center;
}

.metacrilato-theme .finish-btn-corte .finish-btn-icon-name,
.metacrilato-theme .finish-btn-acabado .finish-btn-icon-name {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.metacrilato-theme .finish-btn-corte .finish-btn-price,
.metacrilato-theme .finish-btn-acabado .finish-btn-price {
    display: block;
    /* font-size injected by applyCutsStyles / applyFinishesStyles */
    color: inherit;
    margin-top: 2px;
}

/* Opciones deshabilitadas */
.metacrilato-theme .finish-options-vertical .finish-btn-corte.disabled,
.metacrilato-theme .finish-options-vertical .finish-btn-acabado.disabled {
    opacity: 0.4;
    color: var(--mc-texto-3);
    cursor: not-allowed;
    background-color: transparent;
}

/* Corte: ancho completo del bento + mismo gap título→opciones que Forma */
.metacrilato-theme .bento-corte .configurator-vertical-group {
    width: 100%;
    box-sizing: border-box;
    gap: 18px;
}

/* Corte: anula el padding-left y gap heredados de .finish-options-vertical para igualar a Forma */
.metacrilato-theme .bento-corte .finish-options-vertical {
    padding-left: 0;
    gap: 8px;
}

/* Corte: icono a la izquierda, textos en columna a la derecha, icono alineado abajo con el precio */
.metacrilato-theme .finish-options-vertical .finish-btn-corte {
    flex-direction: row;
    align-items: flex-end;  /* icono y textos se alinean por sus bordes inferiores */
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
}

.metacrilato-theme .finish-btn-corte .finish-btn-icon {
    display: flex;
    flex-shrink: 0;
}

.metacrilato-theme .finish-btn-corte .finish-btn-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.metacrilato-theme .finish-btn-corte .finish-btn-name {
    display: block;
    line-height: 1.2;
}

.metacrilato-theme .finish-btn-corte .finish-btn-price {
    margin-top: 1px;
    line-height: 1;  /* elimina el espacio bajo el precio para alineación precisa */
}

/* ==========================================================================
   ACABADO: mismo diseño que Corte
   ========================================================================== */
.metacrilato-theme .bento-acabado .configurator-vertical-group {
    width: 100%;
    box-sizing: border-box;
    gap: 18px;
}

.metacrilato-theme .bento-acabado .finish-options-vertical {
    padding-left: 0;
    gap: 8px;
}

.metacrilato-theme .finish-options-vertical .finish-btn-acabado {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
}

.metacrilato-theme .finish-btn-acabado .finish-btn-icon {
    display: flex;
    flex-shrink: 0;
}

.metacrilato-theme .finish-btn-acabado .finish-btn-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.metacrilato-theme .finish-btn-acabado .finish-btn-name {
    display: block;
    line-height: 1.2;
}

.metacrilato-theme .finish-btn-acabado .finish-btn-price {
    margin-top: 1px;
    line-height: 1;
}

/* ==========================================================================
   BENTO GRID DE 4 COLUMNAS EN HORIZONTAL
   ========================================================================== */
/* fusionada (2 definiciones) */ .configurator-bento-grid-row {
    display: grid;
    /* 23-09-2026: minmax(0,1fr) = cuatro columnas EXACTAMENTE iguales aunque
       el contenido de una (etiquetas, botones) pida más ancho; con 1fr a
       secas la columna crece hasta su contenido mínimo y descuadra la fila. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    gap: 15px;
    margin-bottom: 15px;
}

/* Make each Bento box stretch vertically to fill the height of the row */
/* fusionada (2 definiciones) */ .configurator-bento-grid-row .metacrilato-bento-block {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 0;
}

/* Etiquetas de título en bentos verticales (forma, medidas, corte, acabado) */
/* fusionada (2 definiciones) */ .metacrilato-theme .vertical-label {
    display: block;
    color: var(--mc-texto);
    margin-top: 0;
    margin-bottom: 0;
}

/* Dimensions vertical stacking layout inside bento-measures */
/* fusionada (2 definiciones) */ .metacrilato-theme .dimensions-vertical-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: 8px;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .dimension-input-col-vertical {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 8px;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .dimension-input-col-vertical label.inline-label {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--mc-texto);
    margin: 0;
    flex: 1;
    justify-content: space-between;
}

/* fusionada (2 definiciones) */ .metacrilato-theme .dimension-input-col-vertical input.metacrilato-field {
    width: 75px;
    max-width: 75px;
    height: 38px;
    box-sizing: border-box;
    margin-left: auto;
    text-align: center;
    border: 1px solid var(--mc-borde-campo);
    border-radius: var(--mc-radio-bento);
    color: var(--mc-texto);
    background-color: var(--mc-fondo);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.metacrilato-theme .dimension-input-col-vertical input.metacrilato-field:focus {
    border-color: var(--mc-enlace) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-enlace) 15%, transparent) !important;
}

/* ==========================================================================
   MEDIDAS: cajetín para Alto y Ancho
   ========================================================================== */

/* Ancho completo del contenedor, igual que Forma y Corte */
.metacrilato-theme .bento-measures .configurator-vertical-group {
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   ALTURA UNIFORME DE FILAS — Forma y Medidas
   Todas las filas (shape options y dimension rows) comparten la misma altura
   de referencia (38px) para que los dos bentos se alineen fila a fila.
   ========================================================================== */

/* Shape options: misma altura de referencia que el input de Unidades */
/* fusionada (2 definiciones) */ .metacrilato-theme .shape-options-vertical .shape-option {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    min-width: 0;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: var(--mc-radio-bento);
    border: 1px solid var(--mc-borde);
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    min-height: 38px;
}

/* Cajetín full-width: Alto y Ancho (rect), Diámetro (circle) — misma altura */
.metacrilato-theme .bento-measures .panel-rect .dimension-input-col-vertical:nth-child(-n+2),
.metacrilato-theme .bento-measures .panel-circle .dimension-input-col-vertical:nth-child(1) {
    background: var(--mc-fondo);
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-bento);
    padding: 0 14px;
    height: 38px;
    width: 100%;
    box-sizing: border-box;
}

/* Etiqueta (icono + texto) alineada a la izquierda dentro del cajetín */
.metacrilato-theme .bento-measures .panel-rect .dimension-input-col-vertical:nth-child(-n+2) label.inline-label,
.metacrilato-theme .bento-measures .panel-circle .dimension-input-col-vertical:nth-child(1) label.inline-label {
    justify-content: flex-start;
    gap: 6px;
}

/* Unidades rect y circle: misma altura, indentado como el interior del cajetín */
.metacrilato-theme .bento-measures .panel-rect .dimension-input-col-vertical:nth-child(3),
.metacrilato-theme .bento-measures .panel-circle .dimension-input-col-vertical:nth-child(2) {
    padding-left: 15px;
    height: 38px;
    box-sizing: border-box;
}

/* Input sin borde propio dentro del cajetín (evita caja dentro de caja) */
.metacrilato-theme .bento-measures .panel-rect .dimension-input-col-vertical:nth-child(-n+2) input.metacrilato-field,
.metacrilato-theme .bento-measures .panel-circle .dimension-input-col-vertical:nth-child(1) input.metacrilato-field {
    border: none;
    box-shadow: none;
    background: transparent;
    text-align: right;
    height: auto;
    padding: 0;
}

/* 26-09-2026: en el cajetín el número cede sitio a la etiqueta. «Diámetro» es
   más ancha que «Alto»/«Ancho» y el campo fijo de 75 px se salía por la
   derecha del cajetín. Ahora encoge (hasta 40 px) en vez de desbordar. */
.metacrilato-theme .bento-measures .panel-rect .dimension-input-col-vertical:nth-child(-n+2) input.metacrilato-field,
.metacrilato-theme .bento-measures .panel-circle .dimension-input-col-vertical:nth-child(1) input.metacrilato-field {
    width: auto;
    flex: 0 1 75px;
    min-width: 40px;
}

/* Forma Libre: file-upload-area con mismo aspecto y altura que los cajetines */
.metacrilato-theme .bento-measures .panel-custom .dimension-input-col-vertical:nth-child(1) {
    height: 38px;
    box-sizing: border-box;
}
.metacrilato-theme .bento-measures .panel-custom .file-upload-area {
    height: 100% !important;
    padding: 0 14px !important;
    border: 1px solid var(--mc-borde) !important;
    border-radius: var(--mc-radio-bento);
    background: var(--mc-fondo);
    justify-content: flex-start !important;
    width: 100%;
    box-sizing: border-box;
}

/* Unidades en forma libre: misma altura, indentado */
.metacrilato-theme .bento-measures .panel-custom .dimension-input-col-vertical:nth-child(2) {
    padding-left: 15px;
    height: 38px;
    box-sizing: border-box;
}

/* Corte info: fila sin recuadro, misma altura que todas las demás filas */
.metacrilato-theme .bento-measures .svg-dimensions-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-left: 15px;
    height: 38px;
    box-sizing: border-box;
    width: 100%;
}

/* Valor de Corte: mismo ancho fijo que el input de Unidades, alineado a la derecha */
.metacrilato-theme .bento-measures .svg-corte-value {
    width: 75px;
    min-width: 75px;
    max-width: 75px;
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
}

/* ==========================================================================
   DISEÑO SIMPLIFICADO DE CABECERA DE MATERIAL (BENTO MATERIAL)
   ========================================================================== */
/* fusionada (2 definiciones) */ .metacrilato-theme .bento-material {
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    padding: 12px 20px !important;
}


/* Visor Bento SVG Grid alignment */
/* fusionada (2 definiciones) */ .bento-svg-visor .svg-preview-container {
    width: 100%;
    height: 100%;
    min-height: 180px;
    margin-left: 0;
    margin-right: 0;
}

/* Force bento blocks to be strictly hidden, overriding display: flex !important */
/* Plancha piece ultra-compact inputs and list row styling */
.plancha-piece-row {
    animation: planchaFadeIn 0.2s ease-in-out;
}

/* fusionada (2 definiciones) */ .plancha-piece-input-num {
    width: 65px;
    max-width: 65px !important;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    padding: 6px 4px;
    font-size: var(--mc-fs-compacto);
    border: 1px solid var(--mc-borde-campo) !important;
    border-radius: var(--mc-radio-bento) !important;
    background-color: var(--mc-fondo);
    color: var(--mc-texto) !important;
    outline: none;
    transition: border-color 0.15s ease-in-out;
}

.plancha-piece-input-num:focus {
    border-color: var(--mc-texto-2) !important;
}

/* fusionada (2 definiciones) */ .plancha-piece-input-qty {
    width: 50px;
    max-width: 50px !important;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    padding: 6px 4px;
    font-size: var(--mc-fs-compacto);
    border: 1px solid var(--mc-borde-campo) !important;
    border-radius: var(--mc-radio-bento) !important;
    background-color: var(--mc-fondo);
    color: var(--mc-texto) !important;
    outline: none;
    transition: border-color 0.15s ease-in-out;
}

.plancha-piece-input-qty:focus {
    border-color: var(--mc-texto-2) !important;
}

.btn-delete-plancha-piece {
    transition: transform 0.1s ease-in-out;
}

.btn-delete-plancha-piece:hover {
    transform: scale(1.15);
}




/* ============================================================
   SELECTOR DE PLANCHAS (v7.3.52) — flechas en lugar de botones
   azules. Iconos en Settings → Visor; tamaños en Apariencia →
   Planchas (selectorPlanchas / selectorFlechas).
   ============================================================ */
.metacrilato-theme .planchas-sheet-arrow {
    background: none;
    border: none;
    box-shadow: none;
    padding: 2px 6px;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-texto-2);
}
.metacrilato-theme .planchas-sheet-arrow:hover:not(:disabled) {
    color: var(--mc-enlace);
    transform: scale(1.15);
}
.metacrilato-theme .planchas-sheet-arrow:disabled {
    cursor: default;
}
.metacrilato-theme .planchas-sheet-arrow img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.metacrilato-theme .planchas-sheet-arrow .sheet-arrow-fallback {
    font-size: var(--mc-fs-subtitulo);
    font-weight: var(--mc-peso-fuerte);
    line-height: 1;
}

/* ============================================================
   BOTÓN EXPANDIR DEL VISOR + VISTA AMPLIADA (v7.3.52) —
   superposición centrada, sin ser pantalla completa. El dibujo
   ampliado reutiliza el mismo SVG (hover de restos incluido).
   ============================================================ */
.metacrilato-theme .planchas-expand-btn {
    /* 24-09-2026: sin marco ni fondo y pegado a la esquina del visor (antes
       14px con recuadro, quedaba encima del dibujo de la plancha). */
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 6;
    background: transparent;
    border: 0;
    border-radius: var(--mc-radio-bento);
    padding: 3px;
    cursor: pointer;
    color: var(--mc-texto-2);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.metacrilato-theme .planchas-expand-btn:hover {
    color: var(--mc-enlace);
}
#mc-visor-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#mc-visor-modal .mc-visor-modal-panel {
    background: var(--mc-fondo);
    border-radius: var(--mc-radio-tarjeta);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    padding: 30px;
    position: relative;
    max-width: 94vw;
    max-height: 92vh;
}
#mc-visor-modal .planchas-svg-container--modal {
    position: relative;
    width: 100%;
}
#mc-visor-modal .mc-visor-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: var(--mc-fs-titulo);
    line-height: 1;
    color: var(--mc-texto-2);
    cursor: pointer;
    padding: 4px;
    z-index: 2;
}
#mc-visor-modal .mc-visor-modal-close:hover {
    color: var(--mc-texto);
}
/* ============================================================
   BENTOS SUBTOTAL Y TOTAL DE PLANCHAS (v7.3.53)
   - Método de entrega SIN radios: la opción elegida se marca
     como los botones de grosor (recuadro blanco + sombra gris).
   - Subtotal arriba + desglose debajo; padding lateral de 15px
     que le faltaba al bento subtotal.
   - El botón "añadir otra plancha" queda a 15px del acordeón
     (el contenedor metía 20px extra de margen inferior).
   Tipografías/colores editables en Apariencia → Planchas.
   ============================================================ */
/* 14-09-2026: sin !important (la regla genérica .finish-option ya no lo
   lleva; esta es más específica y gana por sí sola). El estado seleccionado
   lo pinta Apariencia. */
.metacrilato-theme .section-shipping .finish-option {
    border: none;
    background: transparent;
    border-radius: var(--mc-radio-bento);
    box-shadow: none;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.metacrilato-theme .section-shipping .finish-option:hover:not(.selected) {
    background: var(--mc-fondo-hover);
}
.metacrilato-theme .section-shipping .finish-option.selected {
    background: var(--mc-fondo);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.metacrilato-theme .plancha-price-row > .metacrilato-bento-block {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.metacrilato-theme #planchas-accordion-container {
    margin-bottom: 0;
}

/* Valores de fábrica (Apariencia los pisa con !important) */
.metacrilato-theme .plancha-subtotal-line {
    font-size: var(--mc-fs-subtitulo);
    font-weight: var(--mc-peso-fuerte);
    color: var(--mc-texto);
    line-height: 1.3;
}
.metacrilato-theme .plancha-local-breakdown,
.metacrilato-theme #calculation-details .pricing-breakdown {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
}
/* (v7.3.54) El margen inferior del ÚLTIMO item del acordeón de planchas se
   colaba bajo el contenedor (colapso de márgenes) y sumaba 15px extra al
   hueco del botón "añadir otra plancha". Entre items lo sigue poniendo el
   margen de los no-últimos. */
.metacrilato-theme #planchas-accordion-container .plancha-accordion-item:last-child {
    margin-bottom: 0;
}

/* "Precio no disponible" (09-09-2026): cuando falta una fórmula en el
   administrador no se enseña ningún importe (nunca 0). */
.metacrilato-theme .mc-precio-no-disponible {
    color: var(--mc-error);
    font-weight: var(--mc-peso-fuerte);
}

/* ==========================================================================
   VALORES MAESTROS (bloque G, 14-09-2026)
   Estas reglas las generaba la herramienta Apariencia con números fijos, una
   por sección. Ahora viven aquí y solo usan variables --mc-* (definidas en
   :root por Metacrilato_Appearance). Tocar el valor: panel Apariencia.
   Tocar la estructura: aquí.
   ========================================================================== */
.metacrilato-theme .bento-thickness .metacrilato-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    gap: var(--mc-gap-titulo);
}
.metacrilato-theme .bento-thickness .metacrilato-label img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .thickness-btn {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
    color: var(--mc-texto);
}
.metacrilato-theme .thickness-btn.selected {
    background-color: var(--mc-fondo);
    color: var(--mc-texto);
    border: none;
    box-shadow: var(--mc-sombra-seleccion);
}
.metacrilato-theme .bento-thickness .configurator-row-flex {
    gap: var(--mc-gap-titulo-fila);
}
.metacrilato-theme .bento-thickness .thickness-buttons-flex {
    gap: var(--mc-gap-opciones);
}
.metacrilato-theme .bento-shape .metacrilato-label.vertical-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    gap: var(--mc-gap-titulo);
}
.metacrilato-theme .bento-shape .metacrilato-label.vertical-label > img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .shape-options-vertical .shape-option {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
}
.metacrilato-theme .shape-options-vertical .shape-option img {
    width: var(--mc-icono-opcion);
    height: var(--mc-icono-opcion);
}
.metacrilato-theme .shape-options-vertical .shape-option.selected {
    background-color: var(--mc-fondo);
    color: var(--mc-texto);
    border: none;
    box-shadow: var(--mc-sombra-seleccion);
}
.metacrilato-theme .bento-shape .configurator-vertical-group {
    gap: var(--mc-gap-titulo-opciones);
}
.metacrilato-theme .shape-options-vertical {
    gap: var(--mc-gap-opciones);
}
.metacrilato-theme .bento-measures .metacrilato-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    gap: var(--mc-gap-titulo);
}
.metacrilato-theme .bento-measures .metacrilato-label > img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .bento-measures .inline-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
}
.metacrilato-theme .bento-measures .inline-label img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .bento-measures .field-quantity {
    font-size: var(--mc-fs-base);
}
.metacrilato-theme .bento-measures .configurator-vertical-group {
    gap: var(--mc-gap-titulo-opciones);
}
.metacrilato-theme .bento-measures .dimensions-vertical-stack {
    gap: var(--mc-gap-filas);
}
.metacrilato-theme .bento-measures .panel-rect .dimension-input-col-vertical:nth-child(3), .metacrilato-theme .bento-measures .panel-circle .dimension-input-col-vertical:nth-child(2), .metacrilato-theme .bento-measures .panel-custom .dimension-input-col-vertical:nth-child(2) {
    padding-left: 15px;
}
.metacrilato-theme .bento-measures .svg-dimensions-info {
    padding-left: 15px;
}
.metacrilato-theme .bento-corte .metacrilato-label.vertical-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    gap: var(--mc-gap-titulo);
}
.metacrilato-theme .bento-corte .metacrilato-label.vertical-label > img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .bento-corte .finish-btn-corte {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
}
.metacrilato-theme .bento-corte .finish-btn-corte img {
    height: var(--mc-icono-opcion-ancho);
    width: auto;
}
.metacrilato-theme .bento-corte .finish-btn-corte .finish-btn-price {
    font-size: var(--mc-fs-mini);
}
.metacrilato-theme .bento-corte .finish-btn-corte.selected {
    background-color: var(--mc-fondo);
    color: var(--mc-texto);
    border: none;
    box-shadow: var(--mc-sombra-seleccion);
}
.metacrilato-theme .bento-corte .configurator-vertical-group {
    gap: var(--mc-gap-titulo-opciones);
}
.metacrilato-theme .bento-corte .finish-options-vertical {
    gap: var(--mc-gap-opciones);
}
.metacrilato-theme .mc-cut-warning, .metacrilato-theme .plancha-piece-error {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-error);
}
.metacrilato-theme .bento-acabado .metacrilato-label.vertical-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    gap: var(--mc-gap-titulo);
}
.metacrilato-theme .bento-acabado .metacrilato-label.vertical-label > img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .bento-acabado .finish-btn-acabado {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
}
.metacrilato-theme .bento-acabado .finish-btn-acabado img {
    height: var(--mc-icono-opcion);
    width: auto;
}
.metacrilato-theme .bento-acabado .finish-btn-acabado .finish-btn-price {
    font-size: var(--mc-fs-mini);
}
.metacrilato-theme .bento-acabado .finish-btn-acabado.selected {
    background-color: var(--mc-fondo);
    color: var(--mc-texto);
    border: none;
    box-shadow: var(--mc-sombra-seleccion);
}
.metacrilato-theme .bento-acabado .configurator-vertical-group {
    gap: var(--mc-gap-titulo-opciones);
}
.metacrilato-theme .bento-acabado .finish-options-vertical {
    gap: var(--mc-gap-opciones);
}
.piece-accordion-header .piece-title, .plancha-accordion-header .plancha-title {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
}
.piece-accordion-header .piece-title-icon img, .plancha-accordion-header .piece-title-icon img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.piece-accordion-header .piece-details-text, .plancha-accordion-header .plancha-summary-text {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
}
.piece-accordion-header .piece-header-price, .plancha-accordion-header .plancha-price-badge {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
}
.piece-accordion-header .btn-delete-piece img, .plancha-accordion-header .btn-delete-plancha img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.piece-accordion-header .piece-chevron img, .plancha-accordion-header .plancha-chevron img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.piece-accordion-header, .piece-accordion-item.active .piece-accordion-header, .plancha-accordion-header, .plancha-accordion-item.active .plancha-accordion-header {
    background-color: var(--mc-fondo-suave);
    gap: var(--mc-gap-titulo);
    padding-top: var(--mc-bento-pad-v);
    padding-bottom: var(--mc-bento-pad-v);
    padding-left: var(--mc-bento-pad-h);
    padding-right: var(--mc-bento-pad-h);
}
.piece-header-right, .plancha-header-right {
    gap: 12px;
}
.metacrilato-theme .bento-price .piece-price-box {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: var(--mc-bento-pad-v);
    padding-bottom: var(--mc-bento-pad-v);
    padding-left: var(--mc-bento-pad-h);
    padding-right: var(--mc-bento-pad-h);
}
.metacrilato-theme .bento-price .st-main {
    white-space: pre-wrap;
}
.metacrilato-theme .bento-price .piece-subtotal-price-value {
    font-size: var(--mc-fs-subtotal);
    font-weight: var(--mc-peso-titulo);
    line-height: 1.1;
    margin: 0;
}
.metacrilato-theme .bento-price .piece-subtotal-price-value .st-iva {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
}
.metacrilato-theme .bento-price .piece-unit-price-display {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
    color: var(--mc-texto);
    line-height: 1.1;
    margin-bottom: 0;
}
.metacrilato-theme .bento-price .piece-unit-price-display .st-iva {
    font-size: var(--mc-fs-mini);
    font-weight: var(--mc-peso);
}
.metacrilato-theme .bento-buy-premium #total-bento-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.metacrilato-theme .bento-buy-premium #total-label-line {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto);
    margin: 0;
}
.metacrilato-theme .bento-buy-premium #final-price {
    font-size: var(--mc-fs-total);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto);
    line-height: 1.1;
    margin: 0;
}
.metacrilato-theme .bento-buy-premium #final-price .total-sufijo {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
}
.metacrilato-theme .bento-buy-premium #final-price-sin-iva {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto-2);
    line-height: 1.1;
    margin: 0;
}
.metacrilato-theme .bento-buy-premium #final-price-sin-iva .total-sufijo {
    font-size: var(--mc-fs-mini);
    font-weight: var(--mc-peso-titulo);
}
#add-piece-btn, #add-new-plancha-btn, #metacrilato-configurator-container .planchas-add-piece-btn, #metacrilato-configurator-container .metacrilato-buy-block-wrapper .single_add_to_cart_button {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-fuerte);
    color: var(--mc-boton-texto);
    background-color: var(--mc-boton);
}
#add-piece-btn .apb-icon, #add-new-plancha-btn .apb-icon, #metacrilato-configurator-container .planchas-add-piece-btn .apb-icon, #metacrilato-configurator-container .metacrilato-buy-block-wrapper .single_add_to_cart_button .apb-icon {
    width: var(--mc-icono-boton);
    height: var(--mc-icono-boton);
    background-color: var(--mc-boton-texto);
}
#add-piece-btn:hover:not(:disabled), #add-new-plancha-btn:hover:not(:disabled), #metacrilato-configurator-container .planchas-add-piece-btn:hover:not(:disabled), #metacrilato-configurator-container .metacrilato-buy-block-wrapper .single_add_to_cart_button:hover:not(:disabled) {
    background-color: var(--mc-boton-hover);
    color: var(--mc-boton-texto);
}
#add-piece-btn:hover:not(:disabled) .apb-icon, #add-new-plancha-btn:hover:not(:disabled) .apb-icon, #metacrilato-configurator-container .planchas-add-piece-btn:hover:not(:disabled) .apb-icon, #metacrilato-configurator-container .metacrilato-buy-block-wrapper .single_add_to_cart_button:hover:not(:disabled) .apb-icon {
    background-color: var(--mc-boton-texto);
}
#metacrilato-configurator-container .metacrilato-buy-block-wrapper .single_add_to_cart_button:disabled {
    background-color: var(--mc-texto-3);
    cursor: not-allowed;
}
.mc-aviso {
    box-sizing: border-box;
    overflow: hidden;
    text-align: justify;
    background-color: var(--mc-aviso);
    padding: var(--mc-bento-pad-v);
}
.mc-aviso .mc-aviso-texto {
    line-height: 1.5;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-boton-texto);
}
.mc-aviso .mc-aviso-icono {
    float: left;
    width: var(--mc-icono-aviso);
    height: var(--mc-icono-aviso);
    margin-left: -6px;
    margin-top: -6px;
    margin-right: 10px;
    margin-bottom: 4px;
}
.mc-aviso-detallado {
    height: 100%;
}
.mc-aviso-corto {
    border-radius: var(--mc-radio-bento);
    margin-top: 20px;
    margin-bottom: 20px;
}
.metacrilato-overlimit-dot {
    width: 10px;
    height: 10px;
    background-color: var(--mc-error);
}
.metacrilato-theme .panel-custom .file-upload-area .file-name {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
}
.metacrilato-theme .panel-custom .file-upload-area .file-name img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .bento-svg-visor .visor-placeholder {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-3);
}
.metacrilato-theme .svg-dimensions-info span {
    font-size: var(--mc-fs-base);
}
.metacrilato-theme .svg-dimensions-info .svg-perimeter-display {
    font-size: var(--mc-fs-base);
}
#selected-material-text {
    font-size: var(--mc-fs-subtitulo);
    font-weight: var(--mc-peso-fuerte);
    color: var(--mc-texto);
}
#change-material-btn {
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-fuerte);
    color: var(--mc-enlace);
}
.metacrilato-brand-subtitle {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto);
}
#sub-option-group > label.metacrilato-label {
    font-size: var(--mc-fs-mini);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
}
#confirm-change-material-btn {
    width: 100%;
    text-align: center;
    border: none;
    border-radius: var(--mc-radio-pildora);
    height: var(--mc-btn-alto);
    padding: 0 var(--mc-btn-margen-texto);
    cursor: pointer;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-fuerte);
    color: var(--mc-boton-texto);
    background-color: var(--mc-boton);
}
#add-new-piece-material-btn {
    width: 100%;
    text-align: center;
    border: none;
    border-radius: var(--mc-radio-pildora);
    height: var(--mc-btn-alto);
    padding: 0 var(--mc-btn-margen-texto);
    cursor: pointer;
    margin-top: 8px;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-fuerte);
    color: var(--mc-boton-texto);
    background-color: var(--mc-boton);
}
#discard-change-material-btn {
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
}
.metacrilato-change-material-warning {
    line-height: 1.4;
    padding: 10px;
    border-radius: var(--mc-radio-bento);
    margin-bottom: 10px;
    border: 1px solid transparent;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-error);
    background-color: color-mix(in srgb, var(--mc-error) 6%, var(--mc-fondo));
    border-color: color-mix(in srgb, var(--mc-error) 25%, var(--mc-fondo));
}
.metacrilato-theme .planchas-despiece-wrapper .plancha-despiece-header-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto);
}
.metacrilato-theme .planchas-despiece-texto {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
}
.metacrilato-theme .plancha-piece-label {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto);
}
.metacrilato-theme .section-shipping .shipping-title {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto-2);
}
.metacrilato-theme .section-shipping .shipping-option-label {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-titulo);
}
/* 23-09-2026: el importe («+30,00 €», «0,00 €») nunca se parte ni se
   estrecha; la etiqueta es la que cede y salta de línea si hace falta. */
.metacrilato-theme .section-shipping .shipping-option-cost {
    font-size: var(--mc-fs-mini);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto-2);
    white-space: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
}
.metacrilato-theme .section-shipping .shipping-option-label {
    flex: 1 1 auto;
    min-width: 0;
}
/* Desglose del total de planchas: «Corte (20,63 m)» — lo del paréntesis va
   junto; si no cabe, baja entero (el JS lo envuelve en .mc-nobreak). */
.plancha-desglose-row .mc-nobreak { white-space: nowrap; }
.metacrilato-theme .planchas-sheet-controls .sheet-info-text {
    font-size: var(--mc-fs-base);
    font-weight: var(--mc-peso-fuerte);
    color: var(--mc-texto);
}
.metacrilato-theme .plancha-subtotal-line {
    font-size: var(--mc-fs-subtotal);
    font-weight: var(--mc-peso-titulo);
    color: var(--mc-texto);
}
.metacrilato-theme .plancha-despiece-header-label img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .btn-delete-plancha-piece img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .planchas-sheet-arrow img {
    width: var(--mc-icono);
    height: var(--mc-icono);
}
.metacrilato-theme .planchas-sheet-arrow .sheet-arrow-fallback {
    font-size: var(--mc-fs-subtitulo);
}
.metacrilato-theme .section-shipping .finish-option.selected {
    background-color: var(--mc-fondo);
}
.metacrilato-theme .plancha-local-breakdown {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
}
.metacrilato-theme #calculation-details .pricing-breakdown {
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso);
    color: var(--mc-texto-2);
}
.metacrilato-theme .planchas-pieces-list-container {
    gap: var(--mc-gap-filas);
}
.metacrilato-theme .section-shipping .shipping-options-container {
    gap: var(--mc-gap-opciones);
}

/* Estado hover de todas las opciones (grosor, forma, corte, acabado, envío):
   un único criterio. Antes había cuatro reglas distintas con !important. */
.metacrilato-theme .thickness-btn:hover:not(.disabled):not(.selected),
.metacrilato-theme .shape-options-vertical .shape-option:hover:not(.selected):not(.disabled),
.metacrilato-theme .finish-options-vertical .finish-btn-corte:hover:not(.selected):not(.disabled),
.metacrilato-theme .finish-options-vertical .finish-btn-acabado:hover:not(.selected):not(.disabled),
.metacrilato-theme .section-shipping .finish-option:hover:not(.selected) {
    background-color: var(--mc-fondo-hover);
    border-color: var(--mc-borde-campo);
    color: var(--mc-texto);
}

/* Rejillas de colores y de materiales: hueco entre celdas (las columnas las
   fija la pestaña Disposición de Apariencia). Título de las mini-tarjetas. */
.metacrilato-config-col-1 .color-grid,
#material-switcher-grid {
    gap: var(--mc-gap-opciones);
}
.material-mini-card .mini-card-title {
    font-size: var(--mc-fs-mini);
    font-weight: var(--mc-peso);
}

/* Total del configurador (23-09-2026): una sola línea; si no cabe, el JS
   (encogeTotal) reduce el tamaño del importe desde el de Apariencia hasta 14px. */
#final-price { white-space: nowrap; display: block; overflow: hidden; }
/* La columna del total y sus cajas no pueden ensancharse con el contenido
   (min-width:auto de flex las dejaba crecer y desbordar la rejilla). */
.metacrilato-config-col-3,
.metacrilato-config-col-3 .col-3-buy-card,
.metacrilato-config-col-3 .bento-buy-premium,
.metacrilato-config-col-3 .global-price-box,
.metacrilato-config-col-3 .total-bento-inner { min-width: 0; max-width: 100%; box-sizing: border-box; }
#final-price-sin-iva .total-sufijo { white-space: nowrap; }

/* Fila «Cargo» del desglose (26-09-2026): el mismo punto azul que el aviso de
   la franja de migas (color de enlace de Apariencia). */
.mc-cargo-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mc-enlace); margin-right:6px; vertical-align:middle; position:relative; top:-1px; }

/* Aviso de paso automático a láser (26-09-2026): bajo las medidas, en el
   color de los avisos informativos (enlace), con × para cerrarlo. */
.metacrilato-theme .mc-cut-auto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-titulo);
    line-height: 1.4;
    color: var(--mc-enlace);
}
.metacrilato-theme .mc-cut-auto-txt { flex: 1 1 auto; }
.metacrilato-theme .mc-cut-auto-x {
    flex: 0 0 auto;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 2px !important;
    margin: 0;
    min-height: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--mc-texto-2) !important;
    cursor: pointer;
}
.metacrilato-theme .mc-cut-auto-x:hover { color: var(--mc-texto) !important; }

/* Cuadraditos de color (27-09-2026): el marco del elegido se veía bajo en el
   iPhone. La imagen va ahora ANCLADA a los cuatro lados de su cuadro
   (posición absoluta), así que no depende de la altura de línea ni de cómo
   calcule Safari una altura en % dentro de una caja con aspect-ratio: el
   color queda centrado en el marco en todos los navegadores. */
.color-thumb,
.metacrilato-config-col-1 .color-thumb {
    position: relative;
    display: block;
    line-height: 0;
    font-size: 0;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    height: auto;
}
.color-thumb img,
.metacrilato-config-col-1 .color-thumb img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
}