/* 
 Theme Name:   TFD Customs
 Theme URI:    
 Description:  
 Author:       admin
 Author URI:   https://staging.tfdcustoms.com
 Template:     kadence
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

/* ==========================================================
   TFD HOME - Showcase principal
   ========================================================== */



/* ==========================================================
   SHORTCODES WOO — CONTENEDOR
   ========================================================== */

.tfd-dtf-products {
    max-width:
        1160px;

    margin:
        0 auto !important;

    padding:
        12px 24px 72px;

    background:
        transparent;
}


/*
 * En algunas instalaciones Woo pone nuestra clase
 * en el wrapper exterior y en otras puede combinarla
 * con .woocommerce.
 */

.tfd-dtf-products ul.products,
.woocommerce.tfd-dtf-products ul.products {
    display:
        grid !important;

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

    gap:
        22px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.tfd-dtf-products ul.products::before,
.tfd-dtf-products ul.products::after {
    display:
        none !important;
}


/* ==========================================================
   CARD PRODUCTO
   ========================================================== */

.tfd-dtf-products ul.products li.product {
    position:
        relative;

    width:
        100% !important;

    height:
        100%;

    float:
        none !important;

    display:
        flex !important;

    flex-direction:
        column;

    overflow:
        hidden;

    margin:
        0 !important;

    padding:
        12px 12px 17px !important;

    background:
        #ffffff;

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

    border-radius:
        12px;

    box-shadow:
        0 9px 27px rgba(0,0,0,.065);

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


.tfd-dtf-products ul.products li.product:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(255,177,0,.70);

    box-shadow:
        0 16px 38px rgba(0,0,0,.11);
}


/* ==========================================================
   BARRITA SUPERIOR
   ========================================================== */

.tfd-dtf-products ul.products li.product::before {
    content: "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    z-index:
        5;

    height:
        4px;
}


/* Zakeke */

.tfd-dtf-products-customize
ul.products
li.product::before {
    background:
        linear-gradient(
            90deg,
            #6e27d9,
            #8d3df0,
            #ffb100
        );
}


/* Upload */

.tfd-dtf-products-upload
ul.products
li.product::before {
    background:
        linear-gradient(
            90deg,
            #ffb100,
            #0b2a4a
        );
}


/* ==========================================================
   BADGE AUTOMÁTICO
   ========================================================== */

.tfd-dtf-products
ul.products
li.product::after {
    position:
        absolute;

    z-index:
        8;

    left:
        22px;

    top:
        22px;

    padding:
        7px 10px;

    border-radius:
        100px;

    font-size:
        9px;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    box-shadow:
        0 4px 12px rgba(0,0,0,.16);

    pointer-events:
        none;
}


.tfd-dtf-products-customize
ul.products
li.product::after {
    content:
        "PERSONALIZA ONLINE";

    background:
        #6e27d9;

    color:
        #ffffff;
}


.tfd-dtf-products-upload
ul.products
li.product::after {
    content:
        "SUBE TU ARCHIVO";

    background:
        #ffb100;

    color:
        #080808;
}


/* ==========================================================
   LINK DEL PRODUCTO
   ========================================================== */

.tfd-dtf-products
.woocommerce-loop-product__link {
    display:
        block;

    color:
        inherit;

    text-decoration:
        none !important;
}


/* ==========================================================
   IMAGEN
   ========================================================== */

.tfd-dtf-products
li.product
.woocommerce-loop-product__link img,

.tfd-dtf-products
li.product
img {
    display:
        block;

    width:
        100% !important;

    height:
        auto;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    margin:
        0 0 17px !important;

    border-radius:
        8px;

    transition:
        transform .32s ease,
        filter .32s ease;
}


.tfd-dtf-products
li.product:hover
img {
    transform:
        scale(1.025);

    filter:
        contrast(1.02)
        saturate(1.03);
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.tfd-dtf-products
.woocommerce-loop-product__title {
    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 !important;

    padding:
        0 7px 9px !important;

    color:
        #101317 !important;

    font-size:
        17px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

    text-align:
        center;
}


/* ==========================================================
   PRECIO
   ========================================================== */

.tfd-dtf-products
li.product
.price {
    display:
        block !important;

    margin:
        0 0 16px !important;

    padding:
        0 8px !important;

    color:
        #0b2a4a !important;

    font-size:
        20px !important;

    font-weight:
        850 !important;

    line-height:
        1.2 !important;

    text-align:
        center;
}


.tfd-dtf-products
li.product
.price
.amount {
    color:
        inherit !important;

    font-weight:
        inherit !important;
}


/* ==========================================================
   BOTÓN
   ========================================================== */

.tfd-dtf-products
li.product
.button,

.tfd-dtf-products
li.product
.add_to_cart_button,

.tfd-dtf-products
li.product
.product_type_simple,

.tfd-dtf-products
li.product
.product_type_variable {
    width:
        calc(100% - 4px) !important;

    min-height:
        47px;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    margin:
        auto 2px 0 !important;

    padding:
        11px 15px !important;

    border:
        2px solid #ffb100 !important;

    border-radius:
        6px !important;

    color:
        #ffffff !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    line-height:
        1.2 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;

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


/* ZAKEKE BUTTON */

.tfd-dtf-products-customize
li.product
.button,

.tfd-dtf-products-customize
li.product
.add_to_cart_button,

.tfd-dtf-products-customize
li.product
.product_type_simple,

.tfd-dtf-products-customize
li.product
.product_type_variable {
    background:
        #6e27d9 !important;
}


/* UPLOAD BUTTON */

.tfd-dtf-products-upload
li.product
.button,

.tfd-dtf-products-upload
li.product
.add_to_cart_button,

.tfd-dtf-products-upload
li.product
.product_type_simple,

.tfd-dtf-products-upload
li.product
.product_type_variable {
    background:
        #0b2a4a !important;
}


/* HOVER */

.tfd-dtf-products
li.product
.button:hover,

.tfd-dtf-products
li.product
.add_to_cart_button:hover,

.tfd-dtf-products
li.product
.product_type_simple:hover,

.tfd-dtf-products
li.product
.product_type_variable:hover {
    background:
        #ffb100 !important;

    border-color:
        #ffb100 !important;

    color:
        #080808 !important;

    transform:
        translateY(-2px);
}


/* ==========================================================
   ONSALE, RATINGS, ETC.
   ========================================================== */

.tfd-dtf-products
li.product
.star-rating {
    margin:
        0 auto 10px !important;
}


.tfd-dtf-products
li.product
.onsale {
    z-index:
        10;

    background:
        #ffb100 !important;

    color:
        #080808 !important;
}


/* ==========================================================
   FONDO DE LA ZONA
   ========================================================== */

/*
 * Puedes poner ambos shortcodes dentro de un Row Kadence
 * con esta clase para que tengan el fondo completo.
 */

.tfd-dtf-products-zone {
    background:
        linear-gradient(
            180deg,
            #eef3f7 0%,
            #f7f9fb 100%
        ) !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .tfd-dtf-products ul.products,
    .woocommerce.tfd-dtf-products ul.products {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }


    /*
     * El tercero centrado abajo.
     */

    .tfd-dtf-products
    ul.products
    li.product:nth-child(3) {
        grid-column:
            1 / -1;

        max-width:
            460px;

        width:
            100% !important;

        justify-self:
            center;
    }

}


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

@media (max-width: 600px) {

    .tfd-dtf-product-heading {
        padding:
            52px 16px 25px;
    }


    .tfd-dtf-product-heading h2 {
        font-size:
            34px;
    }


    .tfd-dtf-product-heading p {
        font-size:
            15px;
    }


    .tfd-dtf-product-heading-tags {
        flex-direction:
            column;

        align-items:
            stretch;

        max-width:
            330px;

        margin:
            0 auto;
    }


    .tfd-dtf-product-heading-tags span {
        text-align:
            center;
    }


    .tfd-dtf-products {
        padding:
            8px 16px 55px;
    }


    .tfd-dtf-products ul.products,
    .woocommerce.tfd-dtf-products ul.products {
        grid-template-columns:
            1fr !important;
    }


    .tfd-dtf-products
    ul.products
    li.product:nth-child(3) {
        grid-column:
            auto;

        max-width:
            none;
    }


    .tfd-dtf-products
    .woocommerce-loop-product__title {
        min-height:
            0;

        font-size:
            17px !important;
    }

}

/* ==========================================================
   TFD CUSTOMS — SHOP HERO (VERSIÓN CENTRADA)
   ========================================================== */

.tfd-shop-hero,
.tfd-shop-hero * {
    box-sizing: border-box;
}

.tfd-shop-hero {
    --navy: #0b2a4a;
    --navy-dark: #06182a;
    --yellow: #ffb100;
    --white: #ffffff;

    position: relative;
    width: 100%;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px 24px 24px;
    background:
        radial-gradient(circle at 78% 43%, rgba(45,99,167,.35) 0%, transparent 31%),
        radial-gradient(circle at 10% 110%, rgba(255,177,0,.10) 0%, transparent 35%),
        linear-gradient(135deg, #06182a 0%, #0b2a4a 54%, #071a2d 100%);
    border-bottom: 3px solid var(--yellow);
}

/* decoración */
.tfd-shop-hero::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -200px;
    top: -200px;
    border: 1px solid rgba(255,255,255,.08);
    transform: rotate(45deg);
    pointer-events: none;
}

.tfd-shop-hero::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -180px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255,177,0,.14);
    border-radius: 50%;
    pointer-events: none;
}

/* INNER - CENTRADO */
.tfd-shop-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* COPY - CENTRADO */
.tfd-shop-hero-copy {
    max-width: 700px;
    text-align: center;
    width: 100%;
}

.tfd-shop-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 15px;
    color: var(--yellow);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tfd-shop-hero-eyebrow::before {
    content: "";
    width: 29px;
    height: 2px;
    background: var(--yellow);
}

.tfd-shop-hero h1 {
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: clamp(32px,4vw,32px) !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: -.04em !important;
}

.tfd-shop-hero h1 strong {
    color: var(--yellow);
    font-weight: inherit;
}

.tfd-shop-hero-copy > p {
    max-width: 600px;
    margin: 0 auto 25px;
    color: rgba(255,255,255,.73);
    font-size: 15px;
    line-height: 1.6;
}

/* SEARCH - CENTRADO */
.tfd-shop-search {
    width: 100%;
    max-width: 650px;
    min-height: 52px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 auto 20px;
    padding: 5px 5px 5px 18px;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.tfd-shop-search svg {
    width: 20px;
    height: 20px;
    color: #0b2a4a;
}

.tfd-shop-search input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0 !important;
    padding: 5px 6px !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: #17202a;
    font-family: inherit;
    font-size: 14px;
}

.tfd-shop-search input[type="search"]::placeholder {
    color: #7a8490;
}

.tfd-shop-search button {
    min-height: 42px;
    padding: 8px 20px;
    background: #ffb100;
    border: 0;
    border-radius: 6px;
    color: #080808;
    font-family: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.tfd-shop-search button:hover {
    background: #0b2a4a;
    color: #ffffff;
}

/* ACTIONS - CENTRADO */
.tfd-shop-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px;
}

.tfd-shop-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none !important;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.tfd-shop-btn-primary {
    background: #ffb100;
    border: 2px solid #ffb100;
    color: #080808 !important;
}

.tfd-shop-btn-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0b2a4a !important;
    transform: translateY(-2px);
}

.tfd-shop-btn-secondary {
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.38);
    color: #ffffff !important;
}

.tfd-shop-btn-secondary:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0b2a4a !important;
    transform: translateY(-2px);
}

/* TAGS - CENTRADO */
.tfd-shop-hero-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.tfd-shop-hero-tags span {
    padding: 6px 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 100px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
    font-weight: 700;
}

/* ANCHOR */
.tfd-shop-products-anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

/* QUITAMOS EL ESPACIO SUPERIOR */
.woocommerce-shop .content-area {
    padding-top: 30px !important;
}

/* MOBILE */
@media (max-width: 767px) {
    .tfd-shop-hero {
        min-height: 0;
        padding: 45px 18px 40px;
    }

    .tfd-shop-hero h1 {
        font-size: 28px !important;
    }

    .tfd-shop-hero h1 br {
        display: none;
    }

    .tfd-shop-hero-copy > p {
        font-size: 14px;
    }

    .tfd-shop-search {
        grid-template-columns: auto minmax(0,1fr);
    }

    .tfd-shop-search button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 3px;
    }

    .tfd-shop-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .tfd-shop-btn {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
}