/*
Theme Name: DYMADEL Hello Elementor Child Theme
Theme URI: https://dev.dymadel.gceo.mx/
Author: Rafael Amador
Author URI: https://www.gceo.mx
Template: hello-elementor
Version: 3.5.4
Updated: 2026-08-13 22:40
Text Domain: dymadel-hello-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Description: Tema hijo de Hello Elementor adaptado para Dymadel de México, S.A. de C.V.
*/

/* =========================================================
 * DYMADEL - Galerías opcionales de producto vía shortcodes
 * Shortcodes:
 * [dymadel_galeria_producto]
 * [dymadel_esquemas_adicionales]
 * ========================================================= */

body.single-producto .dymadel-img-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

body.single-producto .dymadel-img-group .dymadel-img-item {
    margin: 0;
    flex: 0 1 220px;
    max-width: 220px;
}

body.single-producto .dymadel-img-group img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/* Variante superior: imágenes adicionales del producto */
body.single-producto .dymadel-galeria-producto {
    margin-top: 12px;
}

/* Variante de esquemas adicionales */
body.single-producto .dymadel-esquemas-adicionales {
    margin-top: 16px;
}

@media (max-width: 767px) {
    body.single-producto .dymadel-img-group {
        gap: 10px;
    }

    body.single-producto .dymadel-img-group .dymadel-img-item {
        flex: 0 1 31%;
        max-width: 31%;
    }
}

@media (max-width: 480px) {
    body.single-producto .dymadel-img-group .dymadel-img-item {
        flex: 0 1 46%;
        max-width: 46%;
    }
}

/* =========================================================
 * DYMADEL - Corrección de alineación para shortcodes de imágenes
 * Hace que el widget Shortcode ocupe todo el ancho disponible
 * ========================================================= */

body.single-producto .elementor-widget-shortcode:has(.dymadel-img-group) {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

body.single-producto .elementor-widget-shortcode:has(.dymadel-img-group) .elementor-widget-container,
body.single-producto .elementor-widget-shortcode:has(.dymadel-img-group) .elementor-shortcode {
    width: 100%;
    max-width: 100%;
}

body.single-producto .dymadel-img-group {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
 * DYMADEL - Barra lateral inspirada en el catálogo
 *
 * La clase .dymadel-catalog-sidebar se añade desde functions.php
 * únicamente a las páginas seleccionadas.
 * ========================================================= */

/*
 * Variables generales.
 */
body.dymadel-catalog-sidebar {
    --dymadel-sidebar-width: 70px;

    /*
     * Reservamos físicamente el espacio de la barra.
     *
     * Esta solución no depende de #content, .site-main
     * ni de la estructura interna que Elementor utilice.
     */
    padding-left: var(--dymadel-sidebar-width) !important;
    box-sizing: border-box;
}

/*
 * Barra visual fija.
 */
body.dymadel-catalog-sidebar::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    width: var(--dymadel-sidebar-width);

    background-image:
        linear-gradient(
            to bottom,
            rgba(139, 63, 30, 0.87) 0%,
            rgba(216, 132, 35, 0.81) 50%,
            rgba(225, 161, 96, 0.83) 88%,
            rgba(240, 240, 240, 0.93) 100%
        ),
        var(--dymadel-sidebar-image);

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        center,
        center top;

    background-size:
        cover,
        cover;

    pointer-events: none;
    z-index: 20;
}

/*
 * El padding del body también desplazaría el encabezado y el pie.
 *
 * Estas reglas compensan exactamente ese desplazamiento para que
 * ambos vuelvan a ocupar el ancho completo de la ventana.
 */
body.dymadel-catalog-sidebar .elementor-location-header,
body.dymadel-catalog-sidebar .elementor-location-footer {
    position: relative;
    z-index: 30;

    margin-left: calc(-1 * var(--dymadel-sidebar-width)) !important;
    width: calc(100% + var(--dymadel-sidebar-width)) !important;
    max-width: none !important;
}

/*
 * Evita que algún elemento principal conserve una anchura basada
 * en 100vw y vuelva a invadir el espacio reservado para la barra.
 */
body.dymadel-catalog-sidebar main,
body.dymadel-catalog-sidebar .site-main,
body.dymadel-catalog-sidebar .elementor-location-single,
body.dymadel-catalog-sidebar
    .elementor[data-elementor-type="wp-page"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================================
 * Tabletas
 * ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    body.dymadel-catalog-sidebar {
        --dymadel-sidebar-width: 48px;
    }
}

/* =========================================================
 * Celulares
 * ========================================================= */

@media (max-width: 767px) {

    body.dymadel-catalog-sidebar {
        --dymadel-sidebar-width: 24px;
    }
}

/* Corrección de posición de las flechas de navegación
   en la Lightbox de Elementor */
.elementor-lightbox .elementor-swiper-button-next {
    position: absolute !important;
    right: 20px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

.elementor-lightbox .elementor-swiper-button-prev {
    position: absolute !important;
    left: 20px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

/* En móvil las imágenes de producto no abren Lightbox */
@media (max-width: 767px) {

    .dymadel-lightbox-principal-imagen a,
    .dymadel-lightbox-principal-diagrama a,
    .dymadel-galeria-producto a,
    .dymadel-esquemas-adicionales a {
        cursor: default;
    }
}