/* ==========================================================================
   MatzApp - Ficha de producto (se carga solo en is_product())
   Paleta MATZ: navy #2e448e / acero #476faa
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Etiqueta del atributo en PRODUCTOS VARIABLES ("Talla", "Color"...)
   BUG: Bootstrap 3 define `.label` como una insignia con `color:#fff;
   display:inline`. WooCommerce pone class="label" en el <th> de la tabla de
   variaciones -> el texto quedaba BLANCO SOBRE BLANCO (invisible) y la celda
   colapsada. El CSS del tema no lo cubre porque solo estiliza `td.label`,
   que es el markup viejo de WooCommerce (hoy es <th>).
   -------------------------------------------------------------------------- */
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.label {
    display: table-cell;
    /* Alineado ARRIBA, no al medio: la celda de opciones contiene además el
       enlace "Limpiar", que WooCommerce oculta con visibility:hidden pero sigue
       ocupando alto. Con vertical-align:middle la etiqueta quedaba más baja que
       los botones de talla. */
    vertical-align: top;
    text-align: left;
    white-space: normal;
    padding: 0 1em 0 0;
    border-radius: 0;
    background: none;
    width: 1%;              /* la celda se ajusta al texto */
    /* También en el <th>: si algún día WooCommerce deja el texto sin el <label>
       hijo, seguiría siendo blanco por la regla .label de Bootstrap. */
    color: #333;
    font-size: 13px;
}
.woocommerce div.product form.cart table.variations th.label label,
.woocommerce div.product form.cart table.variations td.label label {
    display: block;
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    /* Igual al alto de los botones de talla para que queden a la misma línea. */
    line-height: 34px;
    white-space: nowrap;
}
/* La celda de opciones también arriba, para que ambas coincidan. */
.woocommerce div.product form.cart table.variations td.value {
    vertical-align: top;
}

/* Botones de talla/color (swatches de sw_wooswatches): estado normal,
   hover y seleccionado con el color de marca. */
.woocommerce div.product form.cart .sw-custom-variation .radio-label {
    border-radius: 3px;
    transition: all .2s;
}
.woocommerce div.product form.cart .sw-custom-variation .radio-label:hover {
    border-color: #476faa;
}
.woocommerce div.product form.cart .sw-custom-variation .radio-label.active,
.woocommerce div.product form.cart .sw-custom-variation .radio-label.selected {
    border-color: #2e448e;
    box-shadow: inset 0 0 0 1px #2e448e;
}

/* --------------------------------------------------------------------------
   2) Logo de la marca ("Marca: [logo]")
   BUG: el tema imprimía la MINIATURA recortada de WordPress (tamaño
   `thumbnail`, recorte duro), que a un logo ancho como SOEFEC (234x89) le
   cortaba la primera letra. El child ahora sirve la imagen completa; aquí
   solo se limita el tamaño de presentación.
   -------------------------------------------------------------------------- */
.product_detail .content_product_detail .item-brand > a img,
.item-brand .matz-brand__logo {
    max-width: 150px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.product_detail .content_product_detail .item-brand > a {
    padding: 2px 0;
    line-height: 0;         /* evita el hueco bajo la imagen */
}
.item-brand .matz-brand__label {
    margin-right: 8px;
}
.item-brand .matz-brand__name {
    color: #2e448e;
    font-weight: 600;
    line-height: normal;
}
.item-brand .matz-brand__name:hover {
    color: #476faa;
}

/* --------------------------------------------------------------------------
   3) Atributos informativos en el resumen (productos SIMPLES)
   Antes solo aparecían en la pestaña "Información adicional", que exige un
   clic. Ahora también se listan junto al precio.
   -------------------------------------------------------------------------- */
.matz-specs {
    clear: both;
    margin: 0 0 18px;
    padding: 12px 15px;
    background: #f7f8fa;
    border-left: 3px solid #2e448e;
    border-radius: 3px;
}
.matz-specs__row {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
}
.matz-specs__row + .matz-specs__row {
    margin-top: 4px;
}
.matz-specs__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .3px;
    color: #2e448e;
}
.matz-specs__value {
    color: #333;
}

/* Código de producto (SKU). Solo se pinta si el producto tiene uno. */
.matz-sku {
    clear: both;
    margin: 0 0 12px;
    font-size: 13px;
    color: #666;
}
.matz-sku__label {
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
}

/* --------------------------------------------------------------------------
   4) Pestañas de la ficha: hacer visible que hay más información
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   5) Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* La tabla de variaciones se apila: etiqueta arriba, opciones abajo. */
    .woocommerce div.product form.cart table.variations,
    .woocommerce div.product form.cart table.variations tbody,
    .woocommerce div.product form.cart table.variations tr {
        display: block;
        width: 100%;
    }
    .woocommerce div.product form.cart table.variations th.label,
    .woocommerce div.product form.cart table.variations td.label,
    .woocommerce div.product form.cart table.variations td.value {
        display: block;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .woocommerce div.product form.cart table.variations th.label label,
    .woocommerce div.product form.cart table.variations td.label label {
        line-height: 1.6;
    }
    .matz-specs {
        padding: 10px 12px;
    }
    .matz-specs__row {
        font-size: 13px;
    }
}