/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   Reemplazo CSS puro de scrollBar.min.js (elimina forced reflow).
   100vw incluye scrollbar, 100% no → la resta = ancho del scrollbar.
   En móvil (overlay scrollbar) ambos son iguales → 0px.
   ========================================================================== */

:root {
    --wd-scroll-w: calc(100vw - 100%);
}

/* ==========================================================================
   WooCommerce: Mover atributo "Color" arriba del título en móvil
   Técnica CSS pura con display:contents + Flexbox
   ========================================================================== */

@media (max-width: 767px) {
    /* Convertir summary-inner en flex column */
    .single-product .summary.entry-summary .summary-inner {
        display: flex;
        flex-direction: column;
    }

    /* "Aplanar" el form y la tabla para que sus hijos sean flex-items */
    .single-product .summary.entry-summary .summary-inner > form.variations_form {
        display: contents;
    }
    .single-product .summary.entry-summary form.variations_form > table.variations {
        display: contents;
    }
    .single-product .summary.entry-summary form.variations_form table.variations > tbody {
        display: contents;
    }

    /* Cada fila de atributo como bloque (orden DOM por defecto) */
    .single-product .summary.entry-summary form.variations_form table.variations tr {
        display: block;
        margin: 0 0 .75rem 0;
    }
    .single-product .summary.entry-summary form.variations_form table.variations tr th.label {
        display: block;
        margin: 0 0 .35rem 0;
    }
    .single-product .summary.entry-summary form.variations_form table.variations tr td.value {
        display: block;
    }

    /* Subir SOLO la fila del atributo Color (detectado por select o swatches) */
    .single-product .summary.entry-summary form.variations_form table.variations tr:has(
        select[id*="color" i],
        select[name*="color" i],
        .wd-swatches-product[data-id*="color" i]
    ) {
        order: -5;
    }
}

/* Centrar swatches de color en móvil */
@media (max-width: 767px) {
    .single-product .wd-swatches-product[data-id*="color"] {
        justify-content: center !important;
    }
    .single-product table.variations tr {
        text-align: center !important;
    }
    .single-product table.variations th.label {
        text-align: center !important;
    }
    .single-product table.variations td.with-swatches {
        display: flex !important;
        justify-content: center !important;
    }
}