/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Text Domain:  hello-elementor-child
 Version:      1.0.0
*/

/* ── Footer anclado al final de la página ── */
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
 * El elemento de contenido crece para empujar el footer hacia abajo.
 * Cubre tres casos:
 *   1. main#content / main.site-main  → páginas del tema (404, carrito, etc.)
 *   2. div.elementor (que no sea header ni footer de Elementor Pro)
 */
body > main,
body > .site-main,
body > .elementor:not(.elementor-location-header):not(.elementor-location-footer) {
    flex: 1 0 auto;
}


/* ── Productos WooCommerce: mismo ancho de contenedor que las páginas Elementor (1440px) ── */
/*
 * Hello Elementor limita body:not([class*=elementor-page-]) .site-main a 1140px en ≥1200px.
 * Los productos no son páginas Elementor, así que heredan ese límite.
 * Lo sobreescribimos aquí para todas las páginas WooCommerce.
 *
 * Caso A: producto sin Elementor → .site-main (tema padre) limitado a 1140px
 * Caso B: producto editado con Elementor → .elementor-section-wrap o .e-con es el contenedor
 */
@media (min-width: 1200px) {
    body.woocommerce .site-main,
    body.woocommerce-page .site-main {
        max-width: 1440px !important;
    }

    /* Productos con Elementor directo (body.single-product.elementor-page-NNN) */
    body.single-product .elementor-section-wrap,
    body.single-product > .elementor > .elementor-inner > .elementor-sections-wrapper {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* Productos con template Elementor full-width (elementor-template-full-width):
     * la anchura la fija el .elementor-container de secciones "boxed", no el .site-main */
    body.single-product.elementor-template-full-width .elementor-section.elementor-section-boxed > .elementor-container,
    body.single-product.elementor-template-full-width .e-con {
        max-width: 1440px !important;
    }

    /* Elementor Pro fuerza max-width:1140px en el .e-con-inner del template WooCommerce
     * (regla en elementor-pro/assets/css/frontend.css).
     * La sobreescribimos con el mismo selector para que el kit controle el ancho. */
    body.single-product.woocommerce div[data-elementor-type="product"] .e-con-boxed > .e-con-inner {
        max-width: min(100%, var(--container-max-width, 1440px));
    }
}

/* Limitar y centrar el aviso de "Añadido al carrito" cuando se abre al ancho completo */
.woocommerce-notices-wrapper {
    max-width: 1440px; /* Ajusta este número al ancho de tu contenedor de Elementor (ej. 1140px o 1200px) */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;  /* Evita que toque los bordes en móviles */
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Opcional: Darle un aspecto un poco más limpio al mensaje interno */
.woocommerce-notices-wrapper .woocommerce-message {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Centrar de forma global todas las páginas nativas del sistema de WooCommerce */
body.woocommerce .site-main, 
body.woocommerce-page .site-main {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Metadatos de item (carrito, checkout, pedido): etiqueta y valor en la misma línea */
dl.variation dt,
dl.variation dd {
    display: inline;
    float: none;
    margin: 0;
}
dl.variation dd {
    margin-left: 0.25em;
}
dl.variation dd p {
    display: inline;
    margin: 0;
}
dl.variation dd::after {
    content: '';
    display: block;
}