/*
 Theme Name:   Divi Child
 Description:  Tema hijo personalizado para maquetar correos y funciones.
 Author:       Pastry Foods
 Template:     Divi
 Version:      1.1.0
*/


/* ==========================================================
   ÍNDICE
   ==========================================================

   01. FICHA DE PRODUCTO
       01.1 Variaciones
       01.2 Precio dinámico
       01.3 Selector de formato

   02. TABLA DE INFORMACIÓN NUTRICIONAL

   03. CHECKOUT - ORDER DELIVERY DATE PRO
       03.1 Franjas horarias
       03.2 Calendario
       03.3 Campo de fecha

   04. CARRITO VACÍO
       04.1 Contenedor
       04.2 Tarjeta
       04.3 Título y textos
       04.4 Botones
       04.5 Responsive

   05. FICHA DE PRODUCTO - AVISO PRODUCTO AÑADIDO
       05.1 Card del aviso
       05.2 Botón
       05.3 Responsive

   06. CATÁLOGO - OVERLAY "VER DETALLES"
       06.1 Escritorio / tablet
       06.2 Módulo de catálogo móvil

   ========================================================== */



/* ==========================================================
   01. FICHA DE PRODUCTO
   ========================================================== */


/* ----------------------------------------------------------
   01.1 VARIACIONES
   ---------------------------------------------------------- */


/*
 * Oculta "Limpiar" de forma general.
 *
 * IMPORTANTE:
 * Más abajo se vuelve a mostrar específicamente dentro de
 * .pm-producto-add-cart.
 */
.single-product .reset_variations {
    display: none !important;
}


/*
 * Divi añade una flecha/pseudoelemento adicional
 * en el selector de variaciones.
 *
 * Esta regla solo afecta al módulo personalizado:
 * .pm-producto-add-cart
 */
.pm-producto-add-cart.et_pb_wc_add_to_cart
form.cart
.variations
td.value
span::after,

.pm-producto-add-cart
.variations
td.value
span::after {

    display: none !important;
    content: none !important;
    border: 0 !important;
}



/* ----------------------------------------------------------
   01.2 PRECIO DINÁMICO DE LA VARIACIÓN
   ---------------------------------------------------------- */

body.single-product .woocommerce-variation-price,
body.single-product .woocommerce-variation-price * {

    color: #19aabd !important;

    font-size: 32px !important;
    line-height: 1.5em !important;
    font-weight: 700 !important;
}


body.single-product .woocommerce-variation-price {
    margin-bottom: 12px !important;
}


/* Móvil */
@media only screen and (max-width: 767px) {

    body.single-product .woocommerce-variation-price,
    body.single-product .woocommerce-variation-price * {

        font-size: 22px !important;
    }

}



/* ----------------------------------------------------------
   01.3 SELECTOR DE FORMATO
   ---------------------------------------------------------- */


/*
 * Convierte la tabla estándar de variaciones de WooCommerce
 * en una disposición vertical.
 */
.pm-producto-add-cart table.variations,
.pm-producto-add-cart table.variations tbody,
.pm-producto-add-cart table.variations tr,
.pm-producto-add-cart table.variations th,
.pm-producto-add-cart table.variations td {

    display: block;
    width: 100%;
}


/* Etiqueta "Formato" */
.pm-producto-add-cart table.variations th.label {

    padding: 0 0 8px;

    text-align: left;
}


/* Celda que contiene el selector */
.pm-producto-add-cart table.variations td.value {
    padding: 0;
}


/* Selector desplegable */
.pm-producto-add-cart table.variations select {

    display: block;

    width: 100%;
    min-height: 44px;

    padding: 8px 38px 8px 12px;

    border: 1px solid #d8d8d8;

    background-color: #ffffff;
}


/*
 * EXCEPCIÓN:
 * Aunque .reset_variations está oculto globalmente,
 * dentro de este módulo se vuelve a mostrar.
 *
 * Si en el futuro se decide ocultar definitivamente
 * el enlace "Limpiar", eliminar esta regla.
 */
.pm-producto-add-cart .reset_variations {

    display: block;

    width: 100%;

    margin-top: 6px;

    text-align: right;
}



/* ==========================================================
   02. TABLA DE INFORMACIÓN NUTRICIONAL
   ========================================================== */


/*
 * Clase personalizada utilizada en las fichas de producto:
 * .pm-tabla-nutricional
 */

.pm-tabla-nutricional {

    width: 100%;
    max-width: 620px;

    margin: 0;

    border-collapse: collapse;

    background-color: #ffffff;

    font-size: 15px;
    line-height: 1.4;
}


.pm-tabla-nutricional th,
.pm-tabla-nutricional td {

    padding: 11px 15px;

    border: 1px solid #d9d9d9;

    vertical-align: middle;
}


/* Cabecera */
.pm-tabla-nutricional thead th {

    background-color: #f4f4f4;

    font-weight: 700;
    text-align: left;
}


/* Columna de valores */
.pm-tabla-nutricional th:last-child,
.pm-tabla-nutricional td:last-child {

    width: 32%;

    text-align: right;
}


/* Filas alternas */
.pm-tabla-nutricional tbody tr:nth-child(even) {
    background-color: #fafafa;
}


/* Móvil */
@media only screen and (max-width: 767px) {

    .pm-tabla-nutricional {
        font-size: 14px;
    }


    .pm-tabla-nutricional th,
    .pm-tabla-nutricional td {

        padding: 9px 10px;
    }

}



/* ==========================================================
   03. CHECKOUT - ORDER DELIVERY DATE PRO
   ==========================================================

   Personalizaciones del plugin Order Delivery Date Pro.

   Incluye:
   - Franjas horarias.
   - Calendario.
   - Campo de fecha de recogida.

   ========================================================== */


/* ----------------------------------------------------------
   03.1 FRANJAS HORARIAS
   ---------------------------------------------------------- */


/* Ocultar opción redundante "Select a time slot" */
#orddd_time_slot
.orddd_list_view_select
> .list-view:first-child {

    display: none !important;
}


/* Distribuir las franjas disponibles por todo el ancho */
#orddd_time_slot .orddd_list_view_select {

    display: flex !important;

    gap: 8px;
}


#orddd_time_slot
.orddd_list_view_select
> .list-view:not(:first-child) {

    flex: 1 1 0;

    width: auto !important;
}


/* Quitar espacio inferior del bloque */
#orddd_time_slot {
    margin-bottom: 0 !important;
}


/* Lista de franjas */
#orddd_time_slot
ul.wc-block-components-combobox-list.ordd-list-view {

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}



/* ----------------------------------------------------------
   03.2 CALENDARIO
   ---------------------------------------------------------- */


/*
 * El plugin muestra el texto "Clear".
 * Visualmente lo sustituimos por "Cerrar".
 */
#ui-datepicker-div .ui-datepicker-close {

    margin-top: 5px !important;
    margin-bottom: 5px !important;

    border: 0 !important;

    font-family:
        'Work Sans',
        Helvetica,
        Arial,
        Lucida,
        sans-serif !important;

    font-size: 0 !important;
}


#ui-datepicker-div .ui-datepicker-close::after {

    content: "Cerrar";

    border: 0 !important;

    background-color: #ffffff !important;

    font-family:
        'Work Sans',
        Helvetica,
        Arial,
        Lucida,
        sans-serif !important;

    font-size: 12px;
}



/* ----------------------------------------------------------
   03.3 CAMPO DE FECHA
   ---------------------------------------------------------- */


/* Contenedor */
.orddd-datepicker-fields
.orddd-datepicker.wc-block-components-text-input {

    position: relative !important;
}


/* Fecha seleccionada */
.orddd-datepicker-fields
.orddd-datepicker.wc-block-components-text-input
> input[id^="e_deliverydate_"] {

    min-height: 58px !important;

    padding: 29px 12px 8px 16px !important;

    line-height: 1.3 !important;
}


/* Etiqueta/pregunta situada sobre la fecha */
.orddd-datepicker-fields
.orddd-datepicker.wc-block-components-text-input
> label[for^="e_deliverydate_"] {

    position: absolute !important;

    top: 8px !important;
    left: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    font-size: 12px !important;
    line-height: 1.2 !important;

    pointer-events: none;
}



/* ==========================================================
   04. CARRITO VACÍO
   ==========================================================

   Diseño personalizado que solo aparece cuando el carrito
   no contiene productos.

   Clases personalizadas:
   .tk-empty-cart
   .tk-empty-cart__hero
   .tk-empty-cart__title
   .tk-empty-cart__text
   .tk-empty-cart__actions

   NO afecta al carrito cuando contiene productos.

   ========================================================== */


/* ----------------------------------------------------------
   04.1 CONTENEDOR GENERAL
   ---------------------------------------------------------- */

.tk-empty-cart {

    width: 100%;

    padding-top: 0;
}



/* ----------------------------------------------------------
   04.2 TARJETA PRINCIPAL
   ---------------------------------------------------------- */

.tk-empty-cart__hero {

    box-sizing: border-box;

    width: 100% !important;
    max-width: 1400px !important;

    padding: 90px !important;

    background: #fff0f0;

    border: none;
    border-radius: 14px;

    text-align: center !important;
}



/* ----------------------------------------------------------
   04.3 CORRECCIONES GUTENBERG / WOOCOMMERCE
   ---------------------------------------------------------- */

.tk-empty-cart__hero > *,
.tk-empty-cart__hero .wp-block-heading,
.tk-empty-cart__hero p,
.tk-empty-cart__hero .wp-block-buttons {

    box-sizing: border-box;

    margin-left: auto !important;
    margin-right: auto !important;

    float: none !important;

    text-align: center !important;
}



/* ----------------------------------------------------------
   04.4 ICONO
   ---------------------------------------------------------- */


/* El icono existente en el HTML no se muestra */
.tk-empty-cart__icon {
    display: none !important;
}



/* ----------------------------------------------------------
   04.5 TÍTULO
   ---------------------------------------------------------- */

.tk-empty-cart__title {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 18px !important;
    padding: 0 !important;

    color: #25aeba !important;

    font-family: inherit;
    font-size: 38px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;

    text-align: center !important;
}



/* ----------------------------------------------------------
   04.6 ANTETÍTULO "TU ENCARGO"
   ---------------------------------------------------------- */

.tk-empty-cart__title::before {

    content: "TU ENCARGO";

    display: block !important;

    width: 100% !important;

    margin: 0 auto 18px !important;
    padding: 0 !important;

    color: #c80000;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center !important;
}



/* ----------------------------------------------------------
   04.7 TEXTO DESCRIPTIVO
   ---------------------------------------------------------- */

.tk-empty-cart__text {

    display: block !important;

    width: 100% !important;
    max-width: 680px !important;

    margin: 0 auto 30px !important;
    padding: 0 !important;

    color: #252525;

    font-family: inherit;
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400;

    text-align: center !important;
}



/* ----------------------------------------------------------
   04.8 CONTENEDOR DE BOTONES
   ---------------------------------------------------------- */

.tk-empty-cart__actions {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    gap: 14px;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
}



/* ----------------------------------------------------------
   04.9 BOTONES - BASE
   ---------------------------------------------------------- */

.tk-empty-cart__button {
    margin: 0 !important;
}


.tk-empty-cart__button .wp-block-button__link {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    padding: 13px 28px !important;

    border-radius: 999px !important;

    font-family: inherit;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-align: center !important;
    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}



/* ----------------------------------------------------------
   04.10 BOTÓN "PRODUCTOS DULCES"
   ---------------------------------------------------------- */

.tk-empty-cart__button--primary
.wp-block-button__link {

    background: #25aeba !important;

    border: 1px solid #25aeba !important;

    color: #ffffff !important;
}


.tk-empty-cart__button--primary
.wp-block-button__link:hover {

    background: #1e98a3 !important;

    border-color: #1e98a3 !important;

    color: #ffffff !important;
}



/* ----------------------------------------------------------
   04.11 BOTÓN "PRODUCTOS SALADOS"
   ---------------------------------------------------------- */

.tk-empty-cart__button--secondary
.wp-block-button__link {

    background: #dc7979 !important;

    border: 1px solid #dc7979 !important;

    color: #ffffff !important;
}


.tk-empty-cart__button--secondary
.wp-block-button__link:hover {

    background: #c96868 !important;

    border-color: #c96868 !important;

    color: #ffffff !important;
}



/* ----------------------------------------------------------
   04.12 TABLET
   ---------------------------------------------------------- */

@media only screen and (max-width: 980px) {

    .tk-empty-cart__hero {

        width: calc(100% - 40px) !important;
        max-width: none !important;

        margin: 10px auto 35px !important;

        padding: 45px 30px !important;
    }


    .tk-empty-cart__title {
        font-size: 34px !important;
    }

}



/* ----------------------------------------------------------
   04.13 MÓVIL
   ---------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    /* Tarjeta */

    .tk-empty-cart__hero {

        width: calc(100% - 30px) !important;

        margin: 10px auto 30px !important;

        padding: 38px 20px !important;

        border-radius: 12px;
    }


    /* Antetítulo */

    .tk-empty-cart__title::before {

        margin-bottom: 14px !important;

        font-size: 11px !important;

        letter-spacing: 2.5px;
    }


    /* Título */

    .tk-empty-cart__title {

        margin-bottom: 15px !important;

        font-size: 29px !important;
        line-height: 1.2 !important;
    }


    /* Texto */

    .tk-empty-cart__text {

        max-width: 100% !important;

        margin-bottom: 26px !important;

        font-size: 15px !important;
        line-height: 1.65 !important;
    }


    .tk-empty-cart__text br {
        display: none;
    }


    /* Contenedor de botones */

    .tk-empty-cart__actions {

        flex-direction: column !important;

        width: 100% !important;

        gap: 10px;
    }


    /* Botones */

    .tk-empty-cart__button {
        width: 100% !important;
    }


    .tk-empty-cart__button
    .wp-block-button__link {

        width: 100% !important;

        padding: 13px 20px !important;

        text-align: center !important;
    }

}



/* ==========================================================
   05. FICHA DE PRODUCTO
   AVISO "PRODUCTO AÑADIDO AL ENCARGO"
   ==========================================================

   Aviso estándar de WooCommerce mostrado después de añadir
   un producto.

   Solo afecta a:
   body.single-product

   ========================================================== */


/* ----------------------------------------------------------
   05.1 CONTENEDOR DEL AVISO
   ---------------------------------------------------------- */

.single-product .woocommerce-notices-wrapper {

    width: 80% !important;
    max-width: 1400px !important;

    margin: 18px auto 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}



/* ----------------------------------------------------------
   05.2 CARD DEL MENSAJE
   ---------------------------------------------------------- */

.single-product
.woocommerce-notices-wrapper
.woocommerce-message {

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 24px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 17px 20px !important;

    box-sizing: border-box !important;

    background: #fdf5f6 !important;

    border: 0 !important;
    border-left: 3px solid #25aeba !important;

    border-radius: 0 10px 10px 0 !important;

    box-shadow: none !important;

    color: #292929 !important;

    font-family:
        'Work Sans',
        Helvetica,
        Arial,
        sans-serif !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}



/* ----------------------------------------------------------
   05.3 OCULTAR ICONO ESTÁNDAR
   ---------------------------------------------------------- */

.single-product
.woocommerce-notices-wrapper
.woocommerce-message::before {

    display: none !important;

    content: none !important;
}



/* ----------------------------------------------------------
   05.4 BOTÓN "VER ENCARGO"
   ----------------------------------------------------------

   Normal y hover mantienen exactamente las mismas
   dimensiones para evitar saltos visuales de Divi.

   ---------------------------------------------------------- */

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.button,

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.wc-forward,

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.button:hover,

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.wc-forward:hover {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    align-self: center !important;

    float: none !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 0 0 auto !important;

    padding: 11px 20px !important;

    box-sizing: border-box !important;

    font-size: 14px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;

    transform: none !important;
}



/* ----------------------------------------------------------
   05.5 EVITAR ICONOS EXTRA DE DIVI EN EL BOTÓN
   ---------------------------------------------------------- */

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.button::before,

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.button::after,

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.wc-forward::before,

.single-product
.woocommerce-notices-wrapper
.woocommerce-message
.wc-forward::after {

    display: none !important;

    content: none !important;
}



/* ----------------------------------------------------------
   05.6 TABLET
   768px - 980px
   ---------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 980px) {

    .single-product
    .woocommerce-notices-wrapper {

        width: 85% !important;
        max-width: none !important;

        margin-top: 16px !important;
    }


    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message {

        gap: 18px !important;

        padding: 16px 18px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .button,

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .wc-forward,

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .button:hover,

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .wc-forward:hover {

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 0 0 auto !important;

        padding: 10px 17px !important;

        font-size: 13px !important;
        line-height: 1.2 !important;

        transform: none !important;
    }

}



/* ----------------------------------------------------------
   05.7 MÓVIL
   Hasta 767px
   ---------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    .single-product
    .woocommerce-notices-wrapper {

        width: 90% !important;
        max-width: none !important;

        margin: 14px auto 0 !important;
    }


    /* Card vertical */

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message {

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 12px !important;

        padding: 15px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /*
     * Botón abajo a la derecha.
     *
     * translateY() lo baja visualmente sin aumentar
     * la altura de la card.
     */

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .button,

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .wc-forward,

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .button:hover,

    .single-product
    .woocommerce-notices-wrapper
    .woocommerce-message
    .wc-forward:hover {

        align-self: flex-end !important;

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 !important;

        padding: 8px 14px !important;

        font-size: 12px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;

        transform: translateY(8px) !important;
    }

}



/* ==========================================================
   06. CATÁLOGO
   OVERLAY "VER DETALLES"
   ==========================================================

   Añade el texto "Ver detalles" debajo del icono de ojo
   mostrado al pasar sobre la imagen del producto.

   Antes existían DOS bloques distintos para este mismo
   selector:
   - "Ver producto"
   - "Ver detalles"

   Se han fusionado aquí en una única definición.

   ========================================================== */


/* ----------------------------------------------------------
   06.1 ESCRITORIO / TABLET
   ---------------------------------------------------------- */

.et_pb_shop
.et_shop_image
.et_overlay::after {

    content: "Ver detalles" !important;

    position: absolute !important;
    z-index: 20 !important;

    top: calc(50% + 32px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    display: inline-block !important;

    width: max-content !important;
    max-width: 90% !important;

    margin: 0 !important;
    padding: 7px 15px !important;

    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;

    background: #25aeba !important;

    border-radius: 999px !important;

    color: #ffffff !important;

    font-family:
        'Work Sans',
        Helvetica,
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: 0 !important;

    text-align: center !important;
    text-transform: none !important;

    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none !important;
}



/* ----------------------------------------------------------
   06.2 MÓDULO DE CATÁLOGO MÓVIL
   ----------------------------------------------------------

   Este ajuste solo se aplica al módulo Divi que tiene
   asignada la clase:

   catalogo-movil

   ---------------------------------------------------------- */

.et_pb_shop.catalogo-movil
.et_shop_image
.et_overlay::after {

    top: calc(50% + 28px) !important;

    padding: 6px 12px !important;

    font-size: 11px !important;
}