/* =========================================================
   THE PHONE GARDEN
   PRODUCT CATALOG
   REIZ Diseño y Publicidad
========================================================= */


/* =========================================================
   1. BASE
========================================================= */

.tpg-products-grid,
.tpg-products-grid *,
.tpg-buy-modal,
.tpg-buy-modal * {
    box-sizing: border-box;
}


/* =========================================================
   2. PRODUCT GRID
========================================================= */

.tpg-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
}


/* =========================================================
   3. PRODUCT CARD
========================================================= */

.tpg-product {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* =========================================================
   4. PRODUCT SLIDER
========================================================= */

.tpg-product-slider {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #f3f1ed;

    border-radius: 20px;
}


/* TRACK */

.tpg-product-slider__track {
    position: relative;

    width: 100%;
    height: 100%;
}


/* SLIDE */

.tpg-product-slider__slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}


.tpg-product-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
}


/* PRODUCT IMAGE */

.tpg-product__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s cubic-bezier(.2, .7, .2, 1);
}


.tpg-product:hover .tpg-product__image {
    transform: scale(1.025);
}


/* =========================================================
   5. SLIDER ARROWS
========================================================= */

.tpg-product-slider .tpg-slider-arrow {
    position: absolute !important;

    top: 50% !important;

    z-index: 5;

    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    max-width: 42px !important;
    max-height: 42px !important;

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

    border:
        1px solid
        rgba(0, 0, 0, .08) !important;

    border-radius: 50% !important;

    background:
        rgba(255, 255, 255, .94) !important;

    color:
        #181818 !important;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, .06);

    font-size: 0 !important;
    line-height: 0 !important;

    transform:
        translateY(-50%);

    opacity: 0;

    cursor: pointer;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        opacity .25s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* MOSTRAR FLECHAS */

.tpg-product-slider:hover
.tpg-slider-arrow {
    opacity: 1;
}


/* POSICIONES */

.tpg-product-slider
.tpg-slider-arrow--prev {
    left: 14px !important;
}

.tpg-product-slider
.tpg-slider-arrow--next {
    right: 14px !important;
}


/* =========================================================
   ICONO
========================================================= */

.tpg-product-slider
.tpg-slider-arrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 17px;
    height: 17px;

    background:
        currentColor;

    transform:
        translate(-50%, -50%);

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;
}


/* FLECHA IZQUIERDA */

.tpg-product-slider
.tpg-slider-arrow--prev::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* FLECHA DERECHA */

.tpg-product-slider
.tpg-slider-arrow--next::before {

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ELIMINAR EL ANTIGUO SEGUNDO PSEUDOELEMENTO */

.tpg-product-slider
.tpg-slider-arrow::after {
    display: none !important;
    content: none !important;
}


/* HOVER */

.tpg-product-slider
.tpg-slider-arrow:hover {

    background:
        #181818 !important;

    color:
        #ffffff !important;

    transform:
        translateY(-50%)
        scale(1.06);
}

/* =========================================================
   6. SLIDER DOTS
========================================================= */

.tpg-slider-dots {
    position: absolute;

    bottom: 16px;
    left: 50%;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 7px;

    transform:
        translateX(-50%);
}


.tpg-slider-dot {
    width: 7px !important;
    height: 7px !important;

    min-width: 7px !important;
    min-height: 7px !important;

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

    border: 0 !important;
    border-radius: 50% !important;

    background:
        rgba(255, 255, 255, .55) !important;

    box-shadow:
        0 0 0 1px
        rgba(0, 0, 0, .05);

    cursor: pointer;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        transform .2s ease,
        background .2s ease;
}


.tpg-slider-dot.is-active {
    background:
        #ffffff !important;

    transform:
        scale(1.3);
}


/* =========================================================
   7. PRODUCT CONTENT
========================================================= */

.tpg-product__content {
    padding-top: 18px;
}


/* PRODUCT TITLE */

.tpg-product__title {
    margin:
        0 0 8px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 30px;
    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -.02em;

    color: #181818;
}


/* PRODUCT DESCRIPTION */

.tpg-product__description {
    max-width: 330px;

    margin:
        0 0 18px;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.6;

    color: #6b6b6b;
}


/* =========================================================
   8. BUY BUTTON
========================================================= */

.tpg-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;

    padding:
        13px 24px !important;

    margin: 0;

    border:
        1px solid
        #181818 !important;

    border-radius:
        999px !important;

    background:
        #181818 !important;

    color:
        #ffffff !important;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    text-decoration:
        none;

    cursor:
        pointer;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.tpg-buy-button:hover {
    background:
        transparent !important;

    color:
        #181818 !important;

    transform:
        translateY(-2px);
}


.tpg-buy-button:focus-visible {
    outline:
        2px solid
        #181818;

    outline-offset:
        3px;
}


/* =========================================================
   9. MODAL
========================================================= */

body.tpg-modal-open {
    overflow: hidden;
}


.tpg-buy-modal {
    position: fixed;

    inset: 0;

    z-index: 999999;

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

    padding: 24px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.tpg-buy-modal.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   10. MODAL BACKDROP
========================================================= */

.tpg-buy-modal__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, .55);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* =========================================================
   11. MODAL PANEL
========================================================= */
.tpg-buy-modal__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.tpg-buy-modal__panel {
    position: relative;

    z-index: 2;

    width:
        min(100%, 920px);

    padding:
        48px;

    background:
        #f6f2eb;

    border-radius:
        24px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .18);
}


/* =========================================================
   12. MODAL CLOSE BUTTON
========================================================= */

.tpg-buy-modal .tpg-buy-modal__close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    max-width: 40px !important;
    max-height: 40px !important;

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

    border:
        1px solid
        rgba(0, 0, 0, .15) !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    color:
        #181818 !important;

    font-size: 0 !important;

    line-height:
        0 !important;

    box-sizing:
        border-box !important;

    cursor:
        pointer;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


/*
   Dibujamos la X con CSS.
   Esto evita problemas de centrado
   del carácter tipográfico ×.
*/

.tpg-buy-modal__close::before,
.tpg-buy-modal__close::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 13px;
    height: 1.5px;

    background:
        currentColor;

    transform-origin:
        center;
}


.tpg-buy-modal__close::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.tpg-buy-modal__close::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


.tpg-buy-modal__close:hover {
    background:
        #181818 !important;

    color:
        #ffffff !important;

    border-color:
        #181818 !important;

    transform:
        scale(1.05);
}


/* =========================================================
   13. MODAL TYPOGRAPHY
========================================================= */


/* EYEBROW */

.tpg-buy-modal__eyebrow {
    display: block;

    margin-bottom:
        12px;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    color:
        #181818;
}


/* TITLE */

.tpg-buy-modal h2 {
    max-width:
        440px;

    margin:
        0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        48px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.03em;

    color:
        #181818;
}


/* PRODUCT NAME */

.tpg-buy-modal__product {
    margin:
        15px 0 28px;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.5;

    color:
        #777777;
}


/* =========================================================
   14. MARKETPLACE OPTIONS
========================================================= */

.tpg-buy-modal__options {
    display: grid;

    gap: 10px;
}


.tpg-market {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap: 16px;

    padding:
        17px 18px;

    border:
        1px solid
        rgba(0, 0, 0, .15);

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        #181818;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif !important;

    text-decoration:
        none !important;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.tpg-market:hover {
    border-color:
        #181818;

    color:
        #181818;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .05);

    text-decoration:
        none;
}


/* FLAG */

.tpg-market__flag {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size:
        25px;

    line-height:
        1;
}


/* MARKET CONTENT */

.tpg-market__content {
    min-width: 0;
}


.tpg-market__content strong {
    display: block;

    margin: 0;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        15px;

    font-weight:
        600 !important;

    line-height:
        1.3;

    color:
        #181818;
}


.tpg-market__content small {
    display: block;

    margin-top:
        2px;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.4;

    color:
        #777777;
}


/* MARKET ARROW */

.tpg-market__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        18px;

    line-height:
        1;
}


/* =========================================================
   15. ACCESSIBILITY
========================================================= */

.tpg-slider-arrow:focus-visible,
.tpg-slider-dot:focus-visible,
.tpg-buy-modal__close:focus-visible,
.tpg-market:focus-visible {
    outline:
        2px solid
        #181818;

    outline-offset:
        3px;
}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1024px) {

    .tpg-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /*
       En dispositivos táctiles es mejor
       mantener visibles las flechas.
    */

    .tpg-product-slider
    .tpg-slider-arrow {
        opacity: 1;
    }

}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 767px) {
    
      .tpg-buy-modal__body {
        grid-template-columns: 1fr;
        gap: 24px;
    }


    .tpg-products-grid {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    /* PRODUCT */

    .tpg-product__title {
        font-size:
            28px;
    }


    .tpg-product__description {
        max-width:
            none;
    }


    /* SLIDER */

    .tpg-product-slider
    .tpg-slider-arrow {

        width:
            38px !important;

        height:
            38px !important;

        min-width:
            38px !important;

        min-height:
            38px !important;

        max-width:
            38px !important;

        max-height:
            38px !important;
    }


    .tpg-product-slider
    .tpg-slider-arrow--prev {

        left:
            10px !important;
    }


    .tpg-product-slider
    .tpg-slider-arrow--next {

        right:
            10px !important;
    }


    .tpg-slider-dots {
        bottom:
            12px;
    }


    /* MODAL */

    .tpg-buy-modal {
        padding:
            14px;
    }


    .tpg-buy-modal__panel {
        width:
            100%;

        padding:
            42px 22px 24px;

        border-radius:
            20px;
    }


    .tpg-buy-modal h2 {
        max-width:
            330px;

        font-size:
            38px;
    }


    .tpg-buy-modal__product {
        margin-bottom:
            22px;
    }


    .tpg-buy-modal
    .tpg-buy-modal__close {

        top:
            14px;

        right:
            14px;

        width:
            36px !important;

        height:
            36px !important;

        min-width:
            36px !important;

        min-height:
            36px !important;

        max-width:
            36px !important;

        max-height:
            36px !important;
    }


    /* MARKET */

    .tpg-market {
        padding:
            15px 14px;

        gap:
            12px;
    }

}


/* =========================================================
   18. TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .tpg-product-slider
    .tpg-slider-arrow {

        opacity: 1;
    }


    .tpg-product:hover
    .tpg-product__image {

        transform:
            none;
    }

}


/* =========================================================
   19. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tpg-product__image,
    .tpg-product-slider__slide,
    .tpg-slider-arrow,
    .tpg-slider-dot,
    .tpg-buy-button,
    .tpg-market,
    .tpg-buy-modal,
    .tpg-buy-modal__close {

        transition:
            none !important;
    }


    .tpg-product:hover
    .tpg-product__image {

        transform:
            none;
    }

}

/* =========================================================
   FIX ELEMENTOR — CATALOG HEIGHT / MOBILE OVERFLOW
========================================================= */


/* CONTENEDOR GENERAL */

.tpg-catalog-section {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


/* CONTENEDOR INTERNO */

.tpg-catalog-inner {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    display: flex !important;
    flex-direction: column !important;
}


/* WIDGET SHORTCODE */

.tpg-catalog-shortcode {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    transform: none !important;

    flex: 0 0 auto !important;
}


/* CONTENEDOR INTERNO QUE CREA ELEMENTOR
   DENTRO DEL WIDGET SHORTCODE */

.tpg-catalog-shortcode > .elementor-widget-container {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


/* NUESTRO CATÁLOGO */

.tpg-catalog-shortcode .tpg-products-grid {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
}


/* CADA PRODUCTO */

.tpg-catalog-shortcode .tpg-product {
    position: relative;

    width: 100%;

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

    flex: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .tpg-catalog-section,
    .tpg-catalog-inner,
    .tpg-catalog-shortcode,
    .tpg-catalog-shortcode > .elementor-widget-container,
    .tpg-catalog-shortcode .tpg-products-grid {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    .tpg-catalog-shortcode
    .tpg-products-grid {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 40px !important;
    }
}