/*
 Theme Name:   Twentynine Skincare Child
 Theme URI:    http://www.grouweb.com
 Description:  Tema hijo para Twentynine Skincare (Proyecto Twenty Nine)
 Author:       Grouweb
 Author URI:   http://www.grouweb.com
 Template:     Divi
 Version:      1.0.0
*/

/* Aquí irán tus personalizaciones CSS futuras */
/* =================================================
   MENÚ VERTICAL (PANEL OCULTO)
   Objetivo: Convertir la fila horizontal en lista vertical
   ================================================= */

/* 1. Cambiar la dirección de la lista a Columna (Vertical) */
.menu-overlay .et_pb_menu__menu nav ul {
    display: flex !important;
    flex-direction: column !important; /* Esto pone uno debajo del otro */
    align-items: flex-start !important; /* Alineado a la izquierda */
    justify-content: flex-start !important;
}

/* 2. Darle aire entre cada enlace (Estética Lujo) */
.menu-overlay .et_pb_menu__menu nav ul li {
    margin-bottom: 25px !important; /* Espacio vertical */
    margin-left: 0 !important;      /* Quitar espacio lateral */
    display: block !important;
}

/* 3. Asegurar que los enlaces se vean grandes y clicables */
.menu-overlay .et_pb_menu__menu nav ul li a {
    font-size: 24px !important; /* Ajusta según tu gusto */
    padding-bottom: 5px;
}
/* ============================================= 
   FIX HEADER TABLET/MÓVIL
   ============================================= */
@media only screen and (max-width: 980px) {
    
    .et_pb_section.header-principal {
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_row.twentynine-header-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .twentynine-header-row .et_pb_code {
        display: none !important;
    }

    .et_pb_row.twentynine-header-row > .et_pb_column {
        margin: 0 !important;
        padding: 0 !important;
    }

    .et_pb_row.twentynine-header-row > .et_pb_column:first-child {
        width: 50px !important;
        max-width: 50px !important;
        min-width: 50px !important;
        flex: 0 0 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .et_pb_row.twentynine-header-row > .et_pb_column:nth-child(2) {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .et_pb_row.twentynine-header-row > .et_pb_column:last-child {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
        flex: 0 0 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    .twentynine-header-row .et_pb_image {
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .twentynine-header-row .et_pb_image img {
        max-width: 130px !important;
        height: auto !important;
    }

    .twentynine-header-row .et_pb_module {
        margin-bottom: 0 !important;
    }
}
/* FIX POSICIÓN X CERRAR MENÚ */
.et-db #et-boc .et-l #twentynine-menu-overlay .close-menu.et_pb_module {
    position: absolute !important;
    top: 25px !important;
    right: 15px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 10001 !important;
}

.et-db #et-boc .et-l #twentynine-menu-overlay .close-menu.et_pb_module:hover {
    position: absolute !important;
    top: 25px !important;
    right: 15px !important;
    left: auto !important;
    bottom: auto !important;
}

/* =============================================
   BANNER COOKIES COMPLIANZ - ESTILO TWENTYNINE
   Pegar en style.css del tema hijo
   ============================================= */

/* Contenedor del banner */
.cmplz-cookiebanner .cmplz-message {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    color: #5C3A2E !important;
    line-height: 1.6 !important;
}

/* Título del banner */
.cmplz-cookiebanner .cmplz-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #5C3A2E !important;
}

/* Fondo del banner */
.cmplz-cookiebanner {
    background-color: #F9F4EF !important;
    border: 1px solid #F29ABA !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Botón Aceptar todo */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
    background-color: #F29ABA !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    transition: background 0.3s ease !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
    background-color: #e8849f !important;
}

/* Botón Rechazar */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
    background-color: transparent !important;
    color: #5C3A2E !important;
    border: 1px solid #5C3A2E !important;
    border-radius: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
    background-color: #5C3A2E !important;
    color: #ffffff !important;
}

/* Botón Ver preferencias */
.cmplz-cookiebanner .cmplz-btn.cmplz-manage {
    background-color: transparent !important;
    color: #5C3A2E !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-manage:hover {
    border-color: #F29ABA !important;
    color: #F29ABA !important;
}

/* X cerrar del banner */
.cmplz-cookiebanner .cmplz-close {
    color: #5C3A2E !important;
}

.cmplz-cookiebanner .cmplz-close:hover {
    color: #F29ABA !important;
}

/* Links dentro del banner */
.cmplz-cookiebanner a {
    color: #F29ABA !important;
    text-decoration: none !important;
}

.cmplz-cookiebanner a:hover {
    text-decoration: underline !important;
}
/* =============================================
  Estilos botones finalizar compra
   Pegar en style.css del tema hijo
   ============================================= */
.woocommerce-order-received a.order-actions-button {
    background: #F29ABA !important;
    border: 1px solid #F29ABA !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.3s ease !important;
}

.woocommerce-order-received a.order-actions-button:hover {
    background: #e8849f !important;
    border-color: #e8849f !important;
}