:root{
    --yellow:var(--tm-primary,#ff7b00);
    --yellow-dark:#e9c400;
    --blue:#0062bd;
    --text:#333e48;
    --muted:#878787;
    --line:#e5e5e5;
    --light:#f5f5f5;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    background:#fff;
    color:var(--text);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    font-size:14px;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

button,
input,
select{
    font:inherit;
}

.electro-container{
    width:1170px;
    max-width:calc(100% - 30px);
    margin:0 auto;
}


/* TOP */

.electro-topbar{
    border-bottom:1px solid #eee;
    font-size:12px;
}

.topbar-inner{
    height:38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#777;
}

.topbar-inner nav{
    display:flex;
    gap:0;
}

.topbar-inner nav a{
    padding:0 13px;
    border-right:1px solid #ddd;
}

.topbar-inner nav a:last-child{
    border-right:0;
}


/* HEADER */

.header-main{
    height:108px;
    display:flex;
    align-items:center;
    gap:22px;
}

.electro-logo{
    width:155px;
}

.electro-logo img{
    width:100%;
    max-height:52px;
    object-fit:contain;
}

.hamburger{
    width:25px;
    border:0;
    background:transparent;
    padding:0;
}

.hamburger span{
    display:block;
    width:18px;
    height:2px;
    margin:4px 0;
    background:#333e48;
}

.electro-search{
    flex:1;
    height:44px;
    display:flex;
    overflow:hidden;
    border:2px solid var(--yellow);
    border-radius:24px;
}

.electro-search input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    padding:0 20px;
}

.electro-search select{
    width:175px;
    border:0;
    border-left:1px solid #eee;
    background:#fff;
    padding:0 12px;
    outline:0;
    font-size:12px;
}

.electro-search button{
    width:55px;
    border:0;
    background:var(--yellow);
    cursor:pointer;
    font-size:21px;
}

.header-icons{
    display:flex;
    align-items:center;
    gap:18px;
    font-size:21px;
}

.cart-link{
    display:flex;
    align-items:center;
    gap:7px;
}

.cart-link strong{
    font-size:13px;
}


/* YELLOW NAV */

.yellow-menu{
    background:var(--yellow);
}

.yellow-inner{
    min-height:49px;
    display:flex;
    align-items:stretch;
}

.yellow-inner>a{
    display:flex;
    align-items:center;
    padding:0 14px;
    font-size:12px;
    font-weight:600;
}

.yellow-inner>a:hover{
    background:rgba(255,255,255,.28);
}

.departments-link{
    min-width:250px;
    padding-left:0 !important;
}


/* HERO */

.hero-v3{
    background:#f6f6f6;
}

.hero-layout{
    min-height:390px;
    display:grid;
    grid-template-columns:250px 1fr;
}

.hero-departments{
    background:#fff;
    border:1px solid #e5e5e5;
    border-top:0;
}

.hero-departments a{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    border-bottom:1px solid #efefef;
    font-size:12px;
}

.hero-departments a:last-child{
    border-bottom:0;
}

.hero-departments a:hover{
    color:var(--blue);
}

.hero-slider{
    position:relative;
    min-height:390px;
    display:grid;
    grid-template-columns:48% 52%;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(
            110deg,
            #f6f6f6,
            #fff
        );
}

.hero-copy{
    padding-left:65px;
}

.hero-small{
    margin-bottom:8px;
    font-size:17px;
    font-weight:300;
}

.hero-copy h1{
    max-width:460px;
    margin:0 0 10px;
    font-size:42px;
    line-height:1.05;
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:-1.4px;
}

.hero-copy p{
    margin:0 0 20px;
    color:#777;
}

.from{
    display:block;
    color:#777;
    font-size:12px;
}

.hero-price{
    margin:3px 0 18px;
    font-size:31px;
    font-weight:600;
}

.yellow-button{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 25px;
    border-radius:8px;
    background:var(--yellow);
    font-size:12px;
    font-weight:600;
}

.hero-product-image{
    height:340px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-product-image img{
    width:90%;
    height:90%;
    object-fit:contain;
}

.slider-dots{
    position:absolute;
    left:50%;
    bottom:20px;
    display:flex;
    gap:7px;
}

.slider-dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#c8c8c8;
}

.slider-dots .active{
    width:28px;
    border-radius:5px;
    background:var(--yellow);
}


/* PROMOS */

.promos{
    padding:20px 0;
}

.promo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.promo-card{
    min-height:130px;
    padding:13px;
    display:grid;
    grid-template-columns:43% 57%;
    background:#f5f5f5;
    align-items:center;
}

.promo-img{
    height:105px;
}

.promo-img img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.promo-text{
    padding-left:8px;
}

.promo-text small{
    display:block;
    color:#777;
    font-size:10px;
}

.promo-text strong{
    display:block;
    max-height:46px;
    overflow:hidden;
    margin:5px 0 12px;
    font-size:14px;
    line-height:17px;
    text-transform:uppercase;
}

.promo-text span{
    font-size:11px;
    font-weight:600;
}


/* FEATURES */

.features-strip{
    margin-bottom:24px;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border:1px solid #ddd;
}

.features-grid>div{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:10px;
    border-right:1px solid #e4e4e4;
}

.features-grid>div:last-child{
    border-right:0;
}

.features-grid b{
    color:#e0b800;
    font-size:23px;
}

.features-grid span{
    color:#777;
    font-size:10px;
}

.features-grid strong{
    display:block;
    margin-bottom:2px;
    color:#333e48;
    font-size:11px;
}


/* TABS */

.products-tabs-section{
    padding-bottom:38px;
}

.product-tabs{
    height:55px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:30px;
    border-bottom:1px solid #e7e7e7;
}

.product-tabs button{
    height:55px;
    position:relative;
    border:0;
    padding:0 2px 14px;
    background:transparent;
    cursor:pointer;
    color:#666;
}

.product-tabs .active{
    color:#333e48;
    font-weight:600;
}

.product-tabs .active:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:var(--yellow);
}

.products-six{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    padding-top:20px;
}

.product-column{
    min-width:0;
    padding:0 14px;
    border-right:1px solid #e8e8e8;
}

.product-column:last-child{
    border-right:0;
}

.product-column small{
    color:#999;
    font-size:9px;
}

.product-name{
    height:38px;
    display:block;
    overflow:hidden;
    margin:5px 0;
    color:var(--blue);
    font-size:11px;
    line-height:15px;
    font-weight:600;
}

.product-image{
    height:165px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.product-bottom{
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.product-bottom strong{
    font-size:15px;
    font-weight:400;
}

.product-bottom>a{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#e5e5e5;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
}

.product-column:hover .product-bottom>a{
    background:var(--yellow);
    color:#333;
}


/* DEAL */

.deal-area{
    padding:32px 0;
    background:#f6f6f6;
}

.deal-layout{
    display:grid;
    grid-template-columns:270px 1fr;
    gap:28px;
}

.big-deal{
    padding:20px;
    background:#fff;
    border:2px solid var(--yellow);
    border-radius:20px;
}

.deal-title{
    font-size:20px;
}

.deal-title span{
    display:block;
    color:#dc3545;
    font-weight:600;
}

.deal-image{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.deal-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.deal-name{
    min-height:38px;
    display:block;
    color:var(--blue);
    font-weight:600;
    font-size:12px;
    line-height:17px;
}

.deal-price{
    margin:10px 0;
    font-size:23px;
}

.deal-progress{
    height:8px;
    border-radius:10px;
    overflow:hidden;
    background:#eee;
}

.deal-progress span{
    display:block;
    width:65%;
    height:100%;
    background:var(--yellow);
}

.deal-stock{
    margin-top:8px;
    color:#777;
    font-size:10px;
}

.section-title-line{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ddd;
}

.section-title-line h2{
    position:relative;
    margin:0;
    padding-bottom:12px;
    font-size:19px;
    font-weight:400;
}

.section-title-line h2:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:115px;
    height:2px;
    background:var(--yellow);
}

.section-title-line>a{
    color:#777;
    font-size:11px;
}

.deal-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:#fff;
}

.deal-grid article{
    padding:16px;
    border-right:1px solid #eee;
    border-bottom:1px solid #eee;
}

.deal-small-img{
    height:145px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.deal-small-img img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.deal-grid small{
    color:#999;
    font-size:8px;
}

.small-name{
    height:34px;
    display:block;
    overflow:hidden;
    margin:5px 0 8px;
    color:var(--blue);
    font-size:10px;
    line-height:14px;
    font-weight:600;
}

.deal-grid strong{
    font-size:14px;
    font-weight:400;
}


/* CATEGORIES */

.category-showcase{
    padding:35px 0;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    padding-top:22px;
}

.category-card{
    min-height:165px;
    display:grid;
    grid-template-columns:45% 55%;
    grid-template-rows:auto auto;
    align-items:center;
    padding:16px;
    border:1px solid #eee;
}

.category-image{
    grid-row:1 / span 2;
    height:125px;
}

.category-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.category-card strong{
    align-self:end;
    padding-left:14px;
    font-size:13px;
}

.category-card small{
    align-self:start;
    padding:5px 0 0 14px;
    color:#999;
    font-size:10px;
}


/* LARGE BANNER */

.entertainment-banner{
    background:#f5f5f5;
}

.entertainment-inner{
    min-height:370px;
    display:grid;
    grid-template-columns:45% 55%;
    align-items:center;
}

.entertainment-copy{
    padding-left:65px;
}

.entertainment-copy small{
    color:#777;
    font-size:12px;
}

.entertainment-copy h2{
    max-width:430px;
    margin:8px 0 12px;
    font-size:37px;
    line-height:1.08;
    font-weight:300;
    text-transform:uppercase;
}

.entertainment-copy p{
    max-width:430px;
    margin-bottom:20px;
    color:#777;
    line-height:1.7;
}

.entertainment-image{
    height:330px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.entertainment-image img{
    width:86%;
    height:86%;
    object-fit:contain;
}


/* 20 API SECTIONS */

.category-products-section{
    padding:28px 0 15px;
}

.category-product-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding-top:18px;
}

.category-product-row article{
    min-width:0;
    padding:0 16px 15px;
    border-right:1px solid #eee;
}

.category-product-row article:last-child{
    border-right:0;
}

.category-product-row small{
    color:#999;
    font-size:8px;
}

.row-product-name{
    height:36px;
    display:block;
    overflow:hidden;
    margin:4px 0 8px;
    color:var(--blue);
    font-size:10px;
    line-height:14px;
    font-weight:600;
}

.row-product-image{
    height:165px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.row-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.row-price{
    margin-top:7px;
    font-size:15px;
}


/* WIDE PROMO */

.wide-promo{
    padding:18px 0;
}

.wide-promo-inner{
    min-height:145px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:25px 50px;
    background:
        linear-gradient(
            100deg,
            #f4f4f4,
            #ececec
        );
}

.wide-promo small{
    color:#777;
}

.wide-promo h2{
    margin:5px 0;
    font-size:27px;
    font-weight:300;
    text-transform:uppercase;
}

.wide-promo p{
    margin:0;
    color:#777;
}


/* RECOMMENDED */

.recommended{
    padding:35px 0;
}

.recommended-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding-top:20px;
}

.recommended-grid article{
    padding:15px 20px;
    border-right:1px solid #eee;
    border-bottom:1px solid #eee;
}

.recommended-image{
    height:175px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.recommended-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.recommended-grid small{
    color:#999;
    font-size:8px;
}

.recommended-name{
    min-height:36px;
    display:block;
    margin:5px 0 10px;
    color:var(--blue);
    font-size:10px;
    line-height:14px;
    font-weight:600;
}

.recommended-grid strong{
    font-size:15px;
    font-weight:400;
}


/* BRANDS */

.brands-section{
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

.brands-track{
    min-height:105px;
    display:grid;
    grid-template-columns:repeat(10,1fr);
    align-items:center;
}

.brands-track a{
    height:65px;
    padding:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid #eee;
    color:#777;
    text-align:center;
}

.brands-track a:last-child{
    border-right:0;
}

.brands-track img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:grayscale(1);
}


/* NEWSLETTER */

.newsletter{
    background:var(--yellow);
}

.newsletter-inner{
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.newsletter-inner>div{
    display:flex;
    align-items:center;
    gap:20px;
}

.newsletter-inner strong{
    font-size:19px;
    font-weight:400;
}

.newsletter-inner span{
    font-size:12px;
}

.newsletter form{
    width:470px;
    height:42px;
    display:flex;
    overflow:hidden;
    border-radius:24px;
}

.newsletter input{
    flex:1;
    border:0;
    outline:0;
    padding:0 20px;
}

.newsletter button{
    width:125px;
    border:0;
    background:#333e48;
    color:#fff;
}


/* FOOTER */

.electro-footer{
    background:#f7f7f7;
}

.footer-grid{
    min-height:270px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
    padding-top:50px;
    padding-bottom:40px;
}

.footer-brand img{
    width:160px;
    max-height:55px;
    object-fit:contain;
}

.footer-brand p{
    max-width:280px;
    margin-top:25px;
    color:#777;
    line-height:1.8;
}

.footer-grid h3{
    margin:0 0 18px;
    font-size:15px;
}

.footer-grid>div:not(.footer-brand) a{
    display:block;
    margin-bottom:11px;
    color:#666;
    font-size:12px;
}

.footer-bottom{
    border-top:1px solid #ddd;
    padding:18px 0;
    color:#888;
    font-size:11px;
}


/* RESPONSIVE */

@media(max-width:1050px){

    .yellow-inner{
        overflow-x:auto;
    }

    .hero-layout{
        grid-template-columns:210px 1fr;
    }

    .departments-link{
        min-width:210px;
    }

    .products-six{
        grid-template-columns:repeat(3,1fr);
    }

    .category-product-row{
        grid-template-columns:repeat(3,1fr);
    }

    .category-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .deal-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .brands-track{
        grid-template-columns:repeat(5,1fr);
    }

}

@media(max-width:760px){

    .electro-topbar{
        display:none;
    }

    .header-main{
        height:auto;
        flex-wrap:wrap;
        padding:15px 0;
    }

    .electro-logo{
        width:125px;
    }

    .header-icons{
        margin-left:auto;
    }

    .electro-search{
        order:10;
        width:100%;
        flex-basis:100%;
    }

    .electro-search select{
        display:none;
    }

    .yellow-inner{
        white-space:nowrap;
    }

    .hero-layout{
        grid-template-columns:1fr;
    }

    .hero-departments{
        display:none;
    }

    .hero-slider{
        grid-template-columns:1fr;
    }

    .hero-copy{
        padding:35px 20px 5px;
        text-align:center;
    }

    .hero-copy h1{
        margin-left:auto;
        margin-right:auto;
        font-size:31px;
    }

    .hero-product-image{
        height:260px;
    }

    .promo-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .features-grid{
        grid-template-columns:1fr 1fr;
    }

    .products-six{
        grid-template-columns:1fr 1fr;
    }

    .deal-layout{
        grid-template-columns:1fr;
    }

    .category-grid{
        grid-template-columns:1fr 1fr;
    }

    .entertainment-inner{
        grid-template-columns:1fr;
    }

    .entertainment-copy{
        padding:35px 20px 5px;
        text-align:center;
    }

    .entertainment-copy h2{
        margin-left:auto;
        margin-right:auto;
        font-size:29px;
    }

    .entertainment-copy p{
        margin-left:auto;
        margin-right:auto;
    }

    .category-product-row{
        grid-template-columns:1fr 1fr;
    }

    .recommended-grid{
        grid-template-columns:1fr 1fr;
    }

    .brands-track{
        grid-template-columns:repeat(2,1fr);
    }

    .newsletter-inner{
        padding:20px 0;
        flex-direction:column;
        align-items:stretch;
    }

    .newsletter-inner>div{
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }

    .newsletter form{
        width:100%;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:480px){

    .promo-grid{
        grid-template-columns:1fr;
    }

    .products-six{
        grid-template-columns:1fr 1fr;
    }

    .category-grid{
        grid-template-columns:1fr;
    }

    .deal-grid{
        grid-template-columns:1fr;
    }

    .category-product-row{
        grid-template-columns:1fr 1fr;
    }

    .recommended-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* ==========================================================
   TIENDA MOYA - INTERACTIVE V3
========================================================== */


/* HEADER */

.electro-header{
    position:relative;
    z-index:200;
    transition:
        box-shadow .25s ease,
        transform .25s ease;
}

.electro-header.header-scrolled{
    box-shadow:
        0 5px 25px rgba(0,0,0,.08);
}


/* ==========================================================
   MEGA MENU
========================================================== */

.yellow-menu{
    position:relative;
    z-index:190;
}

.yellow-inner{
    overflow:visible;
}

.mega-nav-item{
    position:relative;
    display:flex;
}

.mega-trigger{
    min-height:49px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 14px;
    border:0;
    background:transparent;
    color:#333e48;
    white-space:nowrap;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.mega-trigger span{
    font-size:10px;
    transition:transform .2s ease;
}

.mega-nav-item:hover
.mega-trigger span,
.mega-nav-item.open
.mega-trigger span{
    transform:rotate(180deg);
}

.mega-panel{
    position:absolute;
    top:49px;
    left:0;
    width:650px;
    padding:25px;
    visibility:hidden;
    opacity:0;
    transform:
        translateY(15px)
        scale(.985);
    transform-origin:top left;
    background:#fff;
    border:1px solid #e5e5e5;
    box-shadow:
        0 18px 45px rgba(0,0,0,.14);
    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
    pointer-events:none;
}

.mega-nav-item:hover
.mega-panel,
.mega-nav-item.open
.mega-panel{
    visibility:visible;
    opacity:1;
    transform:
        translateY(0)
        scale(1);
    pointer-events:auto;
}

.mega-nav-item:nth-last-child(-n+3)
.mega-panel{
    left:auto;
    right:0;
}

.mega-panel-wide{
    width:900px;
}

.mega-columns{
    display:grid;
    grid-template-columns:
        repeat(4,1fr);
    gap:25px;
}

.mega-column{
    display:flex;
    flex-direction:column;
}

.mega-column a{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #f1f1f1;
    font-size:12px;
}

.mega-column small{
    color:#aaa;
    font-size:9px;
}

.mega-content{
    display:grid;
    grid-template-columns:1fr 250px;
    gap:25px;
}

.mega-links{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:0 20px;
}

.mega-links h4{
    grid-column:1/-1;
    margin:0 0 12px;
    font-size:15px;
}

.mega-links a{
    padding:7px 0;
    font-size:12px;
}

.mega-links a:hover{
    color:#0062bd;
}

.mega-feature{
    display:flex;
    flex-direction:column;
    min-height:200px;
    padding:16px;
    background:#f6f6f6;
}

.mega-feature span{
    color:#888;
    font-size:9px;
}

.mega-feature strong{
    margin:5px 0 10px;
    color:#0062bd;
    font-size:12px;
    line-height:1.4;
}

.mega-feature img{
    width:100%;
    height:150px;
    object-fit:contain;
}


/* ==========================================================
   HERO
========================================================== */

.hero-full{
    position:relative;
    overflow:hidden;
    background:#f4f4f4;
}

.hero-carousel{
    position:relative;
    min-height:520px;
    overflow:hidden;
}

.hero-track{
    position:relative;
    min-height:520px;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.015);
    transition:
        opacity .75s ease,
        transform 1s ease,
        visibility .75s ease;
    background:
        radial-gradient(
            circle at 70% 45%,
            #fff 0,
            #f5f5f5 47%,
            #ededed 100%
        );
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

.hero-slide-inner{
    min-height:520px;
    display:grid;
    grid-template-columns:
        46% 54%;
    align-items:center;
}

.hero-slide .hero-copy{
    padding-left:45px;
}

.hero-slide .hero-copy h1{
    max-width:500px;
    font-size:
        clamp(38px,4vw,60px);
    line-height:.98;
}

.hero-slide.active
.hero-animate-copy{
    animation:
        heroCopyIn .75s
        cubic-bezier(.22,.61,.36,1)
        both;
}

.hero-slide.active
.hero-animate-image{
    animation:
        heroImageIn .9s
        cubic-bezier(.22,.61,.36,1)
        both;
}

@keyframes heroCopyIn{

    from{
        opacity:0;
        transform:translateX(-80px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes heroImageIn{

    from{
        opacity:0;
        transform:
            translateX(100px)
            scale(.88);
    }

    to{
        opacity:1;
        transform:
            translateX(0)
            scale(1);
    }
}

.hero-slide
.hero-product-image{
    height:430px;
}

.hero-slide
.hero-product-image img{
    max-width:92%;
    max-height:92%;
    filter:
        drop-shadow(
            0 25px 25px
            rgba(0,0,0,.12)
        );
    transition:
        transform .4s ease;
}

.hero-slide
.hero-product-image:hover img{
    transform:
        scale(1.04)
        rotate(-1deg);
}

.hero-arrow{
    position:absolute;
    top:50%;
    z-index:20;
    width:46px;
    height:46px;
    margin-top:-23px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:
        0 8px 20px rgba(0,0,0,.1);
    font-size:30px;
    cursor:pointer;
    opacity:.2;
    transition:
        opacity .2s,
        transform .2s,
        background .2s;
}

.hero-carousel:hover
.hero-arrow{
    opacity:1;
}

.hero-arrow:hover{
    transform:scale(1.08);
    background:var(--tm-primary,#ff7b00);
}

.hero-prev{
    left:24px;
}

.hero-next{
    right:24px;
}

.hero-dots{
    position:absolute;
    z-index:20;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
}

.hero-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:999px;
    background:#aaa;
    cursor:pointer;
    transition:
        width .25s ease,
        background .25s ease;
}

.hero-dots button.active{
    width:32px;
    background:var(--tm-primary,#ff7b00);
}

.hero-buy span{
    margin-left:8px;
    transition:transform .2s;
}

.hero-buy:hover span{
    transform:translateX(5px);
}


/* ==========================================================
   GENERIC SLIDERS
========================================================== */

.tab-slider-panel,
.category-carousel-wrap,
.api-slider-wrap,
.flash-slider-wrap{
    position:relative;
}

.tab-slider-panel{
    display:none;
    padding-top:20px;
}

.tab-slider-panel.active{
    display:block;
    animation:
        tabIn .35s ease both;
}

@keyframes tabIn{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.product-slider,
.category-slider,
.category-products-slider,
.flash-slider{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
}

.product-slider::-webkit-scrollbar,
.category-slider::-webkit-scrollbar,
.category-products-slider::-webkit-scrollbar,
.flash-slider::-webkit-scrollbar{
    display:none;
}

.slider-track{
    display:flex !important;
    width:max-content;
}

.slider-arrow{
    position:absolute;
    z-index:20;
    top:50%;
    width:38px;
    height:38px;
    margin-top:-19px;
    border:1px solid #e5e5e5;
    border-radius:50%;
    background:#fff;
    color:#333e48;
    box-shadow:
        0 5px 15px rgba(0,0,0,.08);
    font-size:25px;
    cursor:pointer;
    transition:
        background .2s,
        transform .2s,
        opacity .2s;
}

.slider-arrow:hover{
    background:var(--tm-primary,#ff7b00);
    transform:scale(1.07);
}

.slider-prev{
    left:-19px;
}

.slider-next{
    right:-19px;
}


/* PRODUCT SLIDER */

.slider-product{
    width:195px;
    flex:0 0 195px;
    scroll-snap-align:start;
    padding:8px 16px 14px;
    border-right:1px solid #eee;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.slider-product:hover{
    z-index:2;
    transform:translateY(-5px);
    background:#fff;
    box-shadow:
        0 12px 28px rgba(0,0,0,.09);
}

.slider-product-image{
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slider-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .3s ease;
}

.slider-product:hover
.slider-product-image img{
    transform:scale(1.06);
}


/* ==========================================================
   CATEGORY CAROUSEL
========================================================== */

.category-slider{
    padding:20px 0;
}

.category-slider
.category-grid{
    padding:0;
    gap:14px;
}

.category-slider
.category-card{
    width:280px;
    flex:0 0 280px;
    scroll-snap-align:start;
    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

.category-slider
.category-card:hover{
    transform:translateY(-5px);
    border-color:var(--tm-primary,#ff7b00);
    box-shadow:
        0 12px 30px rgba(0,0,0,.08);
}


/* ==========================================================
   API CATEGORY SLIDERS
========================================================== */

.category-products-slider{
    padding:18px 0 12px;
}

.category-products-slider
.category-product-row{
    padding:0;
}

.category-products-slider
.category-product-row article{
    width:224px;
    flex:0 0 224px;
    scroll-snap-align:start;
    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.category-products-slider
.category-product-row article:hover{
    transform:translateY(-5px);
    background:#fff;
    box-shadow:
        0 10px 28px rgba(0,0,0,.08);
}

.row-product-image img{
    transition:transform .3s ease;
}

.category-product-row article:hover
.row-product-image img{
    transform:scale(1.055);
}


/* ==========================================================
   FLASH DEALS
========================================================== */

.flash-deals{
    padding:35px 0;
    background:
        linear-gradient(
            180deg,
            #fff,
            #fafafa
        );
}

.flash-title{
    align-items:center;
}

.flash-countdown{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13px;
}

.flash-countdown span{
    margin-right:5px;
    color:#888;
}

.flash-countdown b{
    min-width:32px;
    padding:7px 6px;
    border-radius:5px;
    background:#333e48;
    color:#fff;
    text-align:center;
    font-size:12px;
}

.flash-slider{
    padding:22px 0 10px;
}

.flash-card{
    position:relative;
    width:220px;
    flex:0 0 220px;
    padding:15px;
    border-right:1px solid #eee;
    background:#fff;
    scroll-snap-align:start;
    transition:
        transform .25s,
        box-shadow .25s;
}

.flash-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 13px 30px rgba(0,0,0,.09);
}

.discount-badge{
    position:absolute;
    z-index:4;
    top:10px;
    left:10px;
    padding:6px 9px;
    border-radius:14px;
    background:#dc3545;
    color:white;
    font-size:11px;
    font-weight:700;
}

.flash-image{
    height:175px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.flash-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .3s;
}

.flash-card:hover
.flash-image img{
    transform:scale(1.07);
}

.flash-card small{
    color:#999;
    font-size:8px;
}

.flash-name{
    display:block;
    height:36px;
    overflow:hidden;
    margin:5px 0 10px;
    color:#0062bd;
    font-size:11px;
    line-height:15px;
    font-weight:600;
}

.flash-price{
    display:flex;
    align-items:center;
    gap:8px;
}

.flash-price strong{
    font-size:16px;
    font-weight:500;
}

.flash-price del{
    color:#aaa;
    font-size:10px;
}


/* ==========================================================
   HOVER EFFECTS
========================================================== */

.promo-card,
.category-card,
.recommended-grid article,
.deal-grid article{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.promo-card:hover,
.recommended-grid article:hover,
.deal-grid article:hover{
    transform:translateY(-5px);
    box-shadow:
        0 12px 30px rgba(0,0,0,.08);
}

.promo-card img,
.recommended-grid img,
.deal-grid img{
    transition:transform .3s ease;
}

.promo-card:hover img,
.recommended-grid article:hover img,
.deal-grid article:hover img{
    transform:scale(1.05);
}

.yellow-button{
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.yellow-button:hover{
    transform:translateY(-2px);
    box-shadow:
        0 8px 20px rgba(254,215,0,.35);
    background:#ffe23a;
}


/* ==========================================================
   REVEAL EFFECT
========================================================== */

.reveal,
.category-products-section,
.category-showcase,
.deal-area,
.entertainment-banner,
.recommended,
.brands-section{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .65s ease,
        transform .65s ease;
}

.reveal.is-visible,
.category-products-section.is-visible,
.category-showcase.is-visible,
.deal-area.is-visible,
.entertainment-banner.is-visible,
.recommended.is-visible,
.brands-section.is-visible{
    opacity:1;
    transform:none;
}


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

@media(max-width:1000px){

    .mega-panel{
        display:none !important;
    }

    .hero-carousel,
    .hero-track,
    .hero-slide-inner{
        min-height:480px;
    }

    .hero-slide .hero-copy{
        padding-left:25px;
    }

    .hero-slide .hero-copy h1{
        font-size:42px;
    }

}

@media(max-width:760px){

    .hero-carousel,
    .hero-track{
        min-height:650px;
    }

    .hero-slide-inner{
        min-height:650px;
        grid-template-columns:1fr;
        align-content:center;
    }

    .hero-slide .hero-copy{
        padding:35px 30px 0;
        text-align:center;
    }

    .hero-slide .hero-copy h1{
        margin-left:auto;
        margin-right:auto;
        font-size:34px;
    }

    .hero-slide
    .hero-product-image{
        height:300px;
    }

    .hero-arrow{
        width:38px;
        height:38px;
    }

    .hero-prev{
        left:8px;
    }

    .hero-next{
        right:8px;
    }

    .slider-prev{
        left:2px;
    }

    .slider-next{
        right:2px;
    }

    .slider-product{
        width:175px;
        flex-basis:175px;
    }

    .category-slider
    .category-card{
        width:240px;
        flex-basis:240px;
    }

    .category-products-slider
    .category-product-row article{
        width:180px;
        flex-basis:180px;
    }

    .flash-card{
        width:180px;
        flex-basis:180px;
    }

    .flash-countdown span{
        display:none;
    }

}


/* ==========================================================
   POLISH V4
========================================================== */


/* HERO BLANCO */

.hero-full,
.hero-carousel,
.hero-slide{
    background:#fff !important;
}

.hero-slide{
    background-image:none !important;
}


/* DRAG */

.drag-scroll,
.js-slider{
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    overscroll-behavior-x:contain;
}

.drag-scroll.is-dragging,
.js-slider.is-dragging{
    cursor:grabbing;
    scroll-behavior:auto !important;
}

.drag-scroll img,
.js-slider img{
    user-drag:none;
    -webkit-user-drag:none;
    pointer-events:none;
}


/* ==========================================================
   CATEGORY HUB / TABS
========================================================== */

.category-tabs-hub{
    padding:40px 0 45px;
    background:#fff;
}

.category-hub-title{
    margin-bottom:18px;
}

.category-hub-title>div{
    display:block;
}

.section-eyebrow{
    display:block;
    margin-bottom:4px;
    color:#999;
    font-size:9px;
    letter-spacing:.13em;
}

.category-tab-nav{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 0 18px;
    overflow-x:auto;
    scrollbar-width:none;
}

.category-tab-nav::-webkit-scrollbar{
    display:none;
}

.category-tab-nav button{
    flex:0 0 auto;
    min-height:38px;
    padding:0 17px;
    border:1px solid #e5e5e5;
    border-radius:20px;
    background:#fff;
    color:#59636c;
    cursor:pointer;
    transition:
        background .2s,
        border-color .2s,
        color .2s,
        transform .2s;
}

.category-tab-nav button:hover{
    border-color:var(--tm-primary,#ff7b00);
    transform:translateY(-1px);
}

.category-tab-nav button.active{
    border-color:var(--tm-primary,#ff7b00);
    background:var(--tm-primary,#ff7b00);
    color:#333e48;
    font-weight:600;
}

.category-tab-panel{
    display:none;
}

.category-tab-panel.active{
    display:block;
    animation:
        categoryTabIn .35s ease both;
}

@keyframes categoryTabIn{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.category-panel-head{
    min-height:50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 4px;
    border-bottom:1px solid #eee;
}

.category-panel-head>div{
    display:flex;
    align-items:baseline;
    gap:12px;
}

.category-panel-head span{
    font-size:18px;
}

.category-panel-head small{
    color:#999;
    font-size:10px;
}

.category-panel-head>a{
    color:#0062bd;
    font-size:11px;
}

.category-tab-slider-wrap{
    position:relative;
}

.quick-product-link{
    display:inline-flex;
    margin-top:10px;
    padding:7px 10px;
    border-radius:5px;
    background:#f2f2f2;
    font-size:9px;
    font-weight:600;
    transition:
        background .2s,
        transform .2s;
}

.quick-product-link:hover{
    background:var(--tm-primary,#ff7b00);
    transform:translateY(-1px);
}


/* ==========================================================
   MORE PROFESSIONAL MEGA MENU
========================================================== */

.mega-panel{
    border:0;
    border-radius:0 0 9px 9px;
    box-shadow:
        0 22px 55px rgba(0,0,0,.15);
}

.mega-panel:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:var(--tm-primary,#ff7b00);
}

.mega-column a{
    min-height:37px;
    align-items:center;
    padding:8px 7px;
    border-radius:5px;
    border-bottom:0;
    transition:
        background .18s,
        color .18s,
        padding .18s;
}

.mega-column a:hover{
    padding-left:11px;
    background:#f7f7f7;
    color:#0062bd;
}

.mega-feature{
    position:relative;
    overflow:hidden;
    border-radius:8px;
}

.mega-feature:after{
    content:"";
    position:absolute;
    inset:auto -50px -60px auto;
    width:130px;
    height:130px;
    border-radius:50%;
    background:var(--tm-primary,#ff7b00);
    opacity:.14;
}


/* ==========================================================
   FOOTER PROFESSIONAL
========================================================== */

.pro-footer{
    margin-top:45px;
    background:#fff;
    color:#333e48;
}

.footer-news{
    background:var(--tm-primary,#ff7b00);
}

.footer-news-inner{
    min-height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.footer-news-copy{
    display:flex;
    align-items:center;
    gap:15px;
}

.footer-news-icon{
    font-size:34px;
}

.footer-news-copy strong{
    display:block;
    margin-bottom:4px;
    font-size:18px;
    font-weight:500;
}

.footer-news-copy span{
    font-size:11px;
}

.footer-news-form{
    width:470px;
    height:45px;
    display:flex;
    overflow:hidden;
    border-radius:30px;
    background:#fff;
}

.footer-news-form input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    padding:0 20px;
}

.footer-news-form button{
    width:135px;
    border:0;
    background:#333e48;
    color:#fff;
    cursor:pointer;
    transition:
        transform .12s,
        opacity .2s;
}

.button-pressed{
    transform:scale(.97) !important;
}

.footer-main{
    background:#f8f8f8;
}

.footer-main-grid{
    display:grid;
    grid-template-columns:
        2fr 1fr 1fr 1.2fr;
    gap:55px;
    padding-top:55px;
    padding-bottom:55px;
}

.footer-logo img{
    width:165px;
    max-height:58px;
    object-fit:contain;
}

.footer-company>p{
    max-width:360px;
    margin:23px 0;
    color:#72777c;
    line-height:1.75;
    font-size:12px;
}

.contact-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:430px;
}

.contact-card{
    min-height:74px;
    padding:12px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid #e4e4e4;
    border-radius:8px;
    background:#fff;
    transition:
        transform .2s,
        box-shadow .2s,
        border-color .2s;
}

.contact-card:hover{
    transform:translateY(-3px);
    border-color:var(--tm-primary,#ff7b00);
    box-shadow:
        0 10px 25px rgba(0,0,0,.06);
}

.contact-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    border-radius:50%;
    background:var(--tm-primary,#ff7b00);
    font-size:18px;
}

.contact-card small{
    display:block;
    color:#999;
    font-size:8px;
}

.contact-card strong{
    display:block;
    margin-top:3px;
    font-size:11px;
}

.social-icons{
    display:flex;
    gap:9px;
    margin-top:19px;
}

.social-icons a{
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#333e48;
    color:#fff;
    font-weight:700;
    transition:
        transform .2s,
        background .2s,
        color .2s;
}

.social-icons a:hover{
    transform:translateY(-3px);
    background:var(--tm-primary,#ff7b00);
    color:#333e48;
}

.footer-column h3{
    position:relative;
    margin:0 0 22px;
    padding-bottom:11px;
    font-size:14px;
}

.footer-column h3:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:35px;
    height:2px;
    background:var(--tm-primary,#ff7b00);
}

.footer-column>a{
    display:block;
    margin:0 0 11px;
    color:#676d73;
    font-size:11px;
    transition:
        color .18s,
        transform .18s;
}

.footer-column>a:hover{
    color:#0062bd;
    transform:translateX(3px);
}

.footer-feature{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:43px;
    padding:8px 0;
    border-bottom:1px solid #e5e5e5;
    color:#666;
    font-size:11px;
}

.footer-feature b{
    width:27px;
    flex:0 0 27px;
    color:#d2ad00;
    font-size:16px;
    text-align:center;
}

.footer-bottom-pro{
    border-top:1px solid #e5e5e5;
    background:#eee;
}

.footer-bottom-inner{
    min-height:55px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#777;
    font-size:10px;
}

.footer-legal{
    display:flex;
    gap:20px;
}


/* MOBILE FOOTER */

@media(max-width:900px){

    .footer-main-grid{
        grid-template-columns:1fr 1fr;
    }

    .footer-news-inner{
        padding:20px 0;
        flex-direction:column;
        align-items:stretch;
    }

    .footer-news-form{
        width:100%;
    }

}

@media(max-width:560px){

    .footer-main-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .contact-cards{
        grid-template-columns:1fr;
    }

    .footer-bottom-inner{
        padding:15px 0;
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }

}


/* ==========================================================
   TIENDA MOYA V5
   HERO BLANCO + CATEGORY TABS + FOOTER
========================================================== */


/* HERO BLANCO TOTAL */

.hero-v3,
.hero-full,
.hero-carousel,
.hero-track,
.hero-slide,
.hero-slide.active{
    background:#fff !important;
    background-image:none !important;
}


/* SLIDER DRAG */

.js-slider,
.drag-scroll{
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
}

.js-slider::-webkit-scrollbar,
.drag-scroll::-webkit-scrollbar{
    display:none;
}

.js-slider.dragging,
.drag-scroll.dragging{
    cursor:grabbing;
    scroll-behavior:auto !important;
}

.js-slider img,
.drag-scroll img{
    -webkit-user-drag:none;
    pointer-events:none;
}


/* CATEGORY TABS */

.category-tabs-hub{
    padding:42px 0 50px;
    background:#fff;
}

.category-tabs-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
    margin-bottom:15px;
    padding-bottom:16px;
    border-bottom:1px solid #e5e5e5;
}

.category-tabs-heading small{
    display:block;
    margin-bottom:4px;
    color:#999;
    font-size:9px;
    letter-spacing:.12em;
}

.category-tabs-heading h2{
    margin:0;
    font-size:22px;
    font-weight:400;
}

.category-tabs-heading>a{
    color:#0062bd;
    font-size:11px;
}

.category-tab-nav{
    display:flex;
    gap:8px;
    width:100%;
    overflow-x:auto;
    padding:5px 0 20px;
}

.category-tab-nav button{
    flex:0 0 auto;
    min-height:38px;
    padding:0 15px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #e4e4e4;
    border-radius:20px;
    background:#fff;
    color:#56606a;
    cursor:pointer;
    transition:
        transform .18s,
        border-color .18s,
        background .18s;
}

.category-tab-nav button span{
    min-width:24px;
    padding:2px 6px;
    border-radius:10px;
    background:#f1f1f1;
    color:#888;
    font-size:9px;
}

.category-tab-nav button:hover{
    transform:translateY(-2px);
    border-color:var(--tm-primary,#ff7b00);
}

.category-tab-nav button.active{
    background:var(--tm-primary,#ff7b00);
    border-color:var(--tm-primary,#ff7b00);
    color:#333e48;
    font-weight:600;
}

.category-tab-nav button.active span{
    background:#fff;
}

.category-tab-panel{
    display:none;
}

.category-tab-panel.active{
    display:block;
    animation:
        tabCategoryOpen .35s ease both;
}

@keyframes tabCategoryOpen{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.category-panel-head{
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.category-panel-head>div{
    display:flex;
    align-items:baseline;
    gap:12px;
}

.category-panel-head h3{
    margin:0;
    font-size:18px;
    font-weight:400;
}

.category-panel-head span{
    color:#999;
    font-size:10px;
}

.category-panel-head>a{
    color:#0062bd;
    font-size:11px;
}

.tab-product-slider-shell{
    position:relative;
}

.tab-product-slider{
    overflow-x:auto;
    overflow-y:hidden;
    padding:15px 0;
}

.tab-product-track{
    display:flex !important;
    width:max-content;
}

.tab-product-card{
    width:220px;
    flex:0 0 220px;
    padding:8px 16px 15px;
    border-right:1px solid #eee;
    transition:
        transform .22s,
        box-shadow .22s,
        background .22s;
}

.tab-product-card:hover{
    z-index:2;
    transform:translateY(-5px);
    background:#fff;
    box-shadow:
        0 12px 28px rgba(0,0,0,.08);
}

.tab-product-meta{
    min-height:14px;
    overflow:hidden;
    color:#999;
    font-size:8px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.tab-product-title{
    height:37px;
    display:block;
    overflow:hidden;
    margin:5px 0 7px;
    color:#0062bd;
    font-size:10px;
    font-weight:600;
    line-height:14px;
}

.tab-product-image{
    height:175px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.tab-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .3s;
}

.tab-product-card:hover
.tab-product-image img{
    transform:scale(1.06);
}

.tab-product-bottom{
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.tab-product-bottom strong{
    font-size:15px;
    font-weight:400;
}

.tab-product-button{
    width:29px;
    height:29px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e5e5e5;
    color:#fff;
    font-size:22px;
    transition:
        background .2s,
        color .2s;
}

.tab-product-card:hover
.tab-product-button{
    background:var(--tm-primary,#ff7b00);
    color:#333;
}


/* MEGA MENU POLISH */

.mega-panel{
    overflow:hidden;
    border:0 !important;
    border-radius:0 0 10px 10px;
    box-shadow:
        0 20px 55px rgba(0,0,0,.15) !important;
}

.mega-panel::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:var(--tm-primary,#ff7b00);
}

.mega-column a{
    padding:9px 8px !important;
    border:0 !important;
    border-radius:5px;
}

.mega-column a:hover{
    background:#f5f5f5;
    color:#0062bd;
}

.mega-feature{
    border-radius:8px;
}


/* FOOTER */

.pro-footer{
    margin-top:30px;
    color:#333e48;
}

.footer-newsletter{
    background:var(--tm-primary,#ff7b00);
}

.footer-newsletter-inner{
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.footer-newsletter-title{
    display:flex;
    align-items:center;
    gap:16px;
}

.footer-mail-icon{
    font-size:32px;
}

.footer-newsletter-title strong{
    display:block;
    margin-bottom:4px;
    font-size:19px;
    font-weight:500;
}

.footer-newsletter-title span{
    font-size:11px;
}

.footer-subscribe{
    width:475px;
    height:45px;
    display:flex;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
}

.footer-subscribe input{
    flex:1;
    min-width:0;
    padding:0 20px;
    border:0;
    outline:0;
}

.footer-subscribe button{
    width:135px;
    border:0;
    background:#333e48;
    color:#fff;
    cursor:pointer;
}

.footer-body{
    background:#f7f7f7;
}

.footer-pro-grid{
    display:grid;
    grid-template-columns:
        2fr 1fr 1fr 1.35fr;
    gap:50px;
    padding-top:55px;
    padding-bottom:55px;
}

.footer-logo img{
    width:165px;
    max-height:55px;
    object-fit:contain;
}

.footer-about>p{
    max-width:370px;
    margin:22px 0;
    color:#70777d;
    font-size:12px;
    line-height:1.75;
}

.footer-contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:430px;
}

.footer-contact-card{
    min-height:72px;
    padding:11px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid #e5e5e5;
    border-radius:8px;
    background:#fff;
    transition:
        transform .2s,
        box-shadow .2s,
        border-color .2s;
}

.footer-contact-card:hover{
    transform:translateY(-3px);
    border-color:var(--tm-primary,#ff7b00);
    box-shadow:
        0 10px 25px rgba(0,0,0,.07);
}

.footer-contact-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--tm-primary,#ff7b00);
}

.footer-contact-card small{
    display:block;
    color:#999;
    font-size:8px;
}

.footer-contact-card strong{
    display:block;
    margin-top:3px;
    font-size:11px;
}

.footer-social{
    display:flex;
    gap:8px;
    margin-top:18px;
}

.footer-social a{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#333e48;
    color:#fff;
    font-weight:bold;
    transition:
        transform .2s,
        background .2s,
        color .2s;
}

.footer-social a:hover{
    transform:translateY(-3px);
    background:var(--tm-primary,#ff7b00);
    color:#333e48;
}

.footer-pro-column h3,
.footer-service h3{
    position:relative;
    margin:0 0 22px;
    padding-bottom:10px;
    font-size:14px;
}

.footer-pro-column h3::after,
.footer-service h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:34px;
    height:2px;
    background:var(--tm-primary,#ff7b00);
}

.footer-pro-column>a{
    display:block;
    margin-bottom:11px;
    color:#697078;
    font-size:11px;
    transition:
        color .2s,
        transform .2s;
}

.footer-pro-column>a:hover{
    transform:translateX(3px);
    color:#0062bd;
}

.footer-service-item{
    min-height:54px;
    display:flex;
    align-items:center;
    gap:11px;
    border-bottom:1px solid #e3e3e3;
}

.footer-service-item>span{
    width:30px;
    flex:0 0 30px;
    color:#d1ae00;
    text-align:center;
    font-size:17px;
}

.footer-service-item strong{
    display:block;
    font-size:11px;
}

.footer-service-item small{
    display:block;
    margin-top:2px;
    color:#999;
    font-size:8px;
}

.footer-bottom-pro{
    background:#ececec;
    border-top:1px solid #ddd;
}

.footer-bottom-pro-inner{
    min-height:57px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#777;
    font-size:10px;
}

.footer-bottom-pro nav{
    display:flex;
    gap:20px;
}


/* RESPONSIVE */

@media(max-width:900px){

    .footer-newsletter-inner{
        flex-direction:column;
        align-items:stretch;
        padding:22px 0;
    }

    .footer-subscribe{
        width:100%;
    }

    .footer-pro-grid{
        grid-template-columns:
            1fr 1fr;
    }

}

@media(max-width:560px){

    .category-tabs-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .tab-product-card{
        width:180px;
        flex-basis:180px;
    }

    .footer-pro-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    .footer-contact-grid{
        grid-template-columns:1fr;
    }

    .footer-bottom-pro-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding:16px 0;
    }

}


/* ==========================================================
   SLIDER DRAG FIX
   Touch = nativo del navegador
   Mouse = drag manual
========================================================== */

.product-slider,
.category-slider,
.category-products-slider,
.flash-slider,
.tab-product-slider,
.related-slider,
.js-slider,
.drag-scroll{
    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:none !important;
    scroll-behavior:auto;

    touch-action:auto !important;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior-x:auto;

    cursor:grab;
}

.product-slider *,
.category-slider *,
.category-products-slider *,
.flash-slider *,
.tab-product-slider *,
.related-slider *,
.js-slider *,
.drag-scroll *{
    scroll-snap-align:none !important;
}

.js-slider.mouse-dragging,
.drag-scroll.mouse-dragging{
    cursor:grabbing !important;
    scroll-behavior:auto !important;
}

.js-slider img,
.drag-scroll img{
    -webkit-user-drag:none;
    user-select:none;
}

/*
 * Mientras el usuario arrastra con mouse,
 * evitamos selección accidental de texto.
 */
body.slider-mouse-dragging{
    user-select:none !important;
    -webkit-user-select:none !important;
}



/* ==========================================================
   SLIDER HARD BOUNDARY FIX
========================================================== */

/*
 * Nunca permitir que el documento completo
 * se desplace horizontalmente.
 */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}


/*
 * Todos los shells exteriores:
 * NO deben ser scrollables.
 * Solo contienen y recortan al slider real.
 */
.tab-slider-panel,
.flash-slider-wrap,
.category-carousel-wrap,
.api-slider-wrap,
.category-tab-slider-wrap,
.tab-product-slider-shell{
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden !important;
}


/*
 * El slider visible es el UNICO elemento
 * con overflow horizontal.
 */
.product-slider,
.flash-slider,
.category-slider,
.category-products-slider,
.tab-product-slider,
.js-slider{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:none !important;
    overscroll-behavior-x:contain;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-x pan-y;

    box-sizing:border-box;
}


/*
 * drag-scroll NO debe convertir wrappers
 * que no son sliders en áreas desplazables.
 */
.drag-scroll:not(.js-slider){
    max-width:100%;
}


/*
 * El track puede ser largo,
 * pero únicamente dentro del viewport.
 */
.slider-track{
    display:flex !important;
    flex-wrap:nowrap !important;

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

    max-width:none !important;
}


/*
 * Evitar que hijos ensanchen el documento.
 */
.electro-container,
.category-tabs-hub,
.products-tabs-section,
.flash-deals,
.category-showcase,
.category-products-section,
.recommended{
    min-width:0;
    max-width:100%;
}


/*
 * Flechas siempre DENTRO del área.
 */
.slider-prev{
    left:6px !important;
}

.slider-next{
    right:6px !important;
}

.slider-arrow{
    z-index:30;
}


/*
 * Durante mouse drag.
 */
.js-slider.mouse-dragging{
    cursor:grabbing !important;
}

body.slider-drag-active{
    user-select:none !important;
    -webkit-user-select:none !important;
}


.category-tab-nav{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;

    touch-action:pan-x pan-y;

    -webkit-overflow-scrolling:touch;
}



/* ==========================================================
   FULL CARD DRAG AREA
========================================================== */

/*
 * Toda la superficie visual del producto
 * pertenece al gesto del carrusel.
 */
.js-slider,
.js-slider article,
.js-slider .slider-product,
.js-slider .flash-card,
.js-slider .category-card,
.js-slider .tab-product-card,
.js-slider .category-product-row article{
    cursor:grab;
}


/*
 * Links siguen siendo clickeables,
 * pero Chrome no puede arrastrarlos
 * como enlaces.
 */
.js-slider a,
.js-slider img{
    -webkit-user-drag:none !important;
    user-drag:none !important;
}


/*
 * Imágenes no crean su propia capa de interacción.
 * El evento llega al link/tarjeta/slider.
 */
.js-slider img{
    pointer-events:none !important;
}


/*
 * Mientras arrastramos, TODO muestra grabbing.
 */
.js-slider.mouse-dragging,
.js-slider.mouse-dragging *,
.js-slider.slider-dragging,
.js-slider.slider-dragging *{
    cursor:grabbing !important;
}


/*
 * Evitar selección de título/precio durante drag.
 */
.js-slider article,
.js-slider article *,
.js-slider .slider-product,
.js-slider .slider-product *,
.js-slider .flash-card,
.js-slider .flash-card *,
.js-slider .tab-product-card,
.js-slider .tab-product-card *{
    -webkit-user-select:none;
    user-select:none;
}



/* ==========================================================
   MEGA MENU - THUMBNAILS
========================================================== */

.mega-thumb-link{
    min-height:56px !important;

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

    gap:11px !important;

    padding:7px 8px !important;

    border-radius:7px;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}


.mega-thumb-link:hover{
    padding-left:8px !important;

    background:#f7f7f7 !important;

    transform:translateX(3px);

    box-shadow:
        0 5px 15px rgba(0,0,0,.04);
}


.mega-thumb{
    width:42px;
    height:42px;

    flex:0 0 42px;

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

    overflow:hidden;

    border:1px solid #ededed;
    border-radius:7px;

    background:#fff;
}


.mega-thumb img{
    width:100%;
    height:100%;

    padding:3px;

    object-fit:contain;

    pointer-events:none;
}


.mega-thumb-fallback{
    width:100%;
    height:100%;

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

    background:var(--tm-primary,#ff7b00);

    color:#333e48;

    font-size:15px;
    font-weight:700;
}


.mega-thumb-text{
    min-width:0;

    flex:1;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    line-height:1.2;
}


.mega-thumb-text strong{
    width:100%;

    overflow:hidden;

    color:#333e48;

    font-size:11px;
    font-weight:600;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.mega-thumb-text small{
    margin-top:4px;

    color:#999;

    font-size:8px;
    font-weight:400;
}


/* Mega menús secundarios */

.mega-links{
    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:5px 14px !important;
}


.mega-links
.mega-thumb-link-small{
    min-height:50px !important;

    padding:5px 6px !important;
}


.mega-links
.mega-thumb-link-small
.mega-thumb{
    width:36px;
    height:36px;

    flex-basis:36px;
}


.mega-links
.mega-thumb-link-small
.mega-thumb-text strong{
    font-size:10px;
}


/* Departamentos grandes */

.mega-columns{
    gap:18px !important;
}


.mega-column{
    gap:3px;
}


/*
 * Mantener la imagen principal grande
 * mucho más destacada.
 */

.mega-feature{
    min-height:270px !important;

    padding:18px !important;
}


.mega-feature img{
    height:190px !important;

    margin-top:auto;

    object-fit:contain !important;

    transition:transform .3s ease;
}


.mega-feature:hover img{
    transform:scale(1.05);
}


.mega-feature strong{
    font-size:13px !important;
    line-height:1.45 !important;
}


/* escritorio ancho */

@media(min-width:1200px){

    .mega-panel-wide{
        width:1040px !important;
    }

    .mega-panel{
        width:720px;
    }

}


/* móvil/tablet */

@media(max-width:1000px){

    .mega-thumb{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

}



/* ==========================================================
   TIENDA MOYA - UI GLOBAL LIMPIA
   SOURCE OF TRUTH
========================================================== */

:root{
    --tm-yellow:var(--tm-primary,#ff7b00);
    --tm-dark:#333e48;
    --tm-gray:#70757a;
    --tm-border:#e4e4e4;
    --tm-radius:7px;
}


/* ==========================================================
   BOXED WIDE
========================================================== */

.electro-container{
    width:1360px !important;
    max-width:calc(100% - 36px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


@media(max-width:1449px){

    .electro-container{
        width:auto !important;
        max-width:calc(100% - 30px) !important;
    }

}


@media(max-width:760px){

    .electro-container{
        max-width:calc(100% - 22px) !important;
    }

}


/* ==========================================================
   BOTONES
========================================================== */

.yellow-button,
.quick-product-link,
.add-cart,
.mega-trigger,
.category-tab-nav button,
.product-tabs button,
.footer-subscribe,
.footer-subscribe button{
    border-radius:var(--tm-radius) !important;
}


/* Categorías */

.category-tab-nav button{
    border-radius:var(--tm-radius) !important;

    padding-left:15px !important;
    padding-right:15px !important;
}


.category-tab-nav button span{
    border-radius:4px !important;
}


.category-tab-nav button.active{
    border-radius:var(--tm-radius) !important;
}


/*
 * Acciones de producto:
 * semiredondas, no círculo.
 */

.tab-product-button,
.product-bottom a{
    border-radius:6px !important;
}


/*
 * Flechas de sliders permanecen circulares.
 */

.slider-arrow,
.hero-arrow{
    border-radius:50% !important;
}


/* ==========================================================
   ICONOS PLANOS
========================================================== */

.tm-icon{
    position:relative;

    display:inline-block;

    width:20px;
    height:20px;

    flex:0 0 20px;

    color:var(--tm-dark) !important;

    vertical-align:middle;
}


/* CARRITO */

.tm-cart::before{
    content:"";

    position:absolute;

    left:3px;
    top:4px;

    width:12px;
    height:9px;

    border:
        1.6px solid currentColor;
}


.tm-cart::after{
    content:"••";

    position:absolute;

    left:3px;
    top:8px;

    color:currentColor;

    font-size:13px;
    line-height:10px;
    letter-spacing:3px;
}


/* USUARIO */

.tm-user::before{
    content:"";

    position:absolute;

    left:7px;
    top:2px;

    width:6px;
    height:6px;

    border:
        1.5px solid currentColor;

    border-radius:50%;
}


.tm-user::after{
    content:"";

    position:absolute;

    left:4px;
    top:10px;

    width:12px;
    height:7px;

    border:
        1.5px solid currentColor;

    border-radius:
        6px 6px 2px 2px;
}


/* CORREO */

.tm-mail::before{
    content:"";

    position:absolute;

    left:2px;
    top:5px;

    width:15px;
    height:10px;

    border:
        1.5px solid currentColor;
}


.tm-mail::after{
    content:"";

    position:absolute;

    left:5px;
    top:3px;

    width:8px;
    height:8px;

    border-left:
        1.4px solid currentColor;

    border-bottom:
        1.4px solid currentColor;

    transform:
        rotate(-45deg);
}


/* CAMION */

.tm-truck::before{
    content:"";

    position:absolute;

    left:1px;
    top:5px;

    width:11px;
    height:8px;

    border:
        1.5px solid currentColor;
}


.tm-truck::after{
    content:"→";

    position:absolute;

    right:0;
    top:0;

    color:currentColor;

    font-size:15px;
}


/* TELEFONO */

.tm-phone::before{
    content:"☎";

    position:absolute;

    left:1px;
    top:-1px;

    color:currentColor;

    font-size:17px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* Header */

.header-icons a,
.header-icons span,
.cart-link,
.cart-link *{
    color:var(--tm-dark) !important;
}


.header-icons a,
.cart-link{
    background:transparent !important;
}


/* ==========================================================
   FOOTER
========================================================== */

.pro-footer{
    margin-top:45px !important;

    border-top:
        1px solid var(--tm-border) !important;
}


.footer-newsletter{
    background:
        var(--tm-yellow) !important;
}


.footer-newsletter-inner{
    min-height:100px !important;
}


.footer-newsletter-title strong{
    color:var(--tm-dark) !important;

    font-size:19px !important;
    font-weight:600 !important;
}


.footer-newsletter-title span{
    color:#555 !important;
}


/* Form */

.footer-subscribe{
    overflow:hidden;

    border-radius:
        var(--tm-radius) !important;
}


.footer-subscribe input{
    border-radius:
        var(--tm-radius) 0 0 var(--tm-radius) !important;
}


.footer-subscribe button{
    border-radius:
        0 var(--tm-radius) var(--tm-radius) 0 !important;
}


/* Cuerpo */

.footer-main,
.footer-body{
    background:#f7f7f7 !important;
}


.footer-pro-grid,
.footer-main-grid{
    padding-top:55px !important;
    padding-bottom:55px !important;
}


/* Contacto */

.footer-contact-card{
    background:#fff !important;

    border:
        1px solid #dedede !important;

    border-radius:
        var(--tm-radius) !important;

    box-shadow:none !important;
}


.footer-contact-card:hover{
    border-color:
        var(--tm-yellow) !important;
}


.footer-contact-icon{
    color:
        var(--tm-dark) !important;

    background:
        var(--tm-yellow) !important;

    border-radius:
        var(--tm-radius) !important;
}


/* Redes */

.footer-social a,
.social-icons a{
    background:transparent !important;

    color:
        var(--tm-dark) !important;

    border:
        1px solid #d8d8d8 !important;

    border-radius:
        var(--tm-radius) !important;
}


.footer-social a:hover,
.social-icons a:hover{
    background:
        var(--tm-yellow) !important;

    color:
        var(--tm-dark) !important;

    border-color:
        var(--tm-yellow) !important;
}


/* Footer inferior */

.footer-bottom-pro{
    background:#ececec !important;
}


/* ==========================================================
   MEGA MENU
========================================================== */

.mega-thumb,
.mega-thumb-link,
.mega-feature{
    border-radius:
        var(--tm-radius) !important;
}


.mega-panel{
    border-radius:
        0 0 8px 8px !important;
}


/* ==========================================================
   TARJETAS
========================================================== */

.slider-product,
.flash-card,
.category-card,
.tab-product-card,
.recommended-grid article{
    border-radius:4px !important;
}



/* ==========================================================
   CONTENIDO
========================================================== */

.mega-content{
    gap:18px !important;

    padding:20px !important;
}


/* títulos */

.mega-content h3,
.mega-column h3{
    position:relative;

    margin:
        0 0 12px !important;

    padding-bottom:
        9px !important;

    color:#333e48 !important;

    font-size:13px !important;
    font-weight:700 !important;
}


.mega-content h3::after,
.mega-column h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:34px;
    height:2px;

    background:var(--tm-primary,#ff7b00);
}


/* ==========================================================
   LINKS CON THUMBNAILS
========================================================== */

.mega-links{
    gap:7px 12px !important;
}


.mega-thumb-link{
    min-height:52px !important;

    padding:
        6px 8px !important;

    border:
        1px solid transparent;

    border-radius:
        7px !important;

    background:#fff;

    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease !important;
}


.mega-thumb-link:hover{
    border-color:#e4e4e4;

    background:#f7f7f7 !important;

    transform:
        translateX(3px);
}


.mega-thumb{
    width:39px !important;
    height:39px !important;

    flex:
        0 0 39px !important;

    border:
        1px solid #e7e7e7 !important;

    border-radius:
        6px !important;

    background:#fff !important;
}


.mega-thumb img{
    width:100% !important;
    height:100% !important;

    padding:4px !important;

    object-fit:contain !important;
}


.mega-thumb-text strong{
    color:#333e48 !important;

    font-size:10px !important;
    font-weight:600 !important;
}


.mega-thumb-text small{
    color:#8a8f94 !important;

    font-size:8px !important;
}


/* ==========================================================
   FEATURE SLIDER
========================================================== */

.mega-feature-slider{
    position:relative;

    min-height:280px !important;

    overflow:hidden;

    padding:0 !important;

    border:
        1px solid #e4e4e4 !important;

    border-radius:
        8px !important;

    background:#f7f7f7 !important;

    text-decoration:none;
}


/* cabecera */

.mega-feature-topline{
    position:absolute;

    z-index:5;

    left:14px;
    right:14px;
    top:12px;

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

    pointer-events:none;
}


.mega-feature-kicker{
    display:inline-flex;

    padding:
        5px 8px;

    border:
        1px solid #333e48;

    border-radius:5px;

    background:#fff;

    color:#333e48;

    font-size:8px;
    font-weight:700;

    letter-spacing:.45px;

    text-transform:uppercase;
}


.mega-feature-counter{
    color:#777;

    font-size:9px;
    font-weight:600;
}


/* slides */

.mega-feature-slides{
    position:relative;

    width:100%;
    height:280px;
}


.mega-feature-slide{
    position:absolute;

    inset:0;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(120px,.95fr);

    align-items:center;

    gap:8px;

    padding:
        48px 17px 43px;

    opacity:0;
    visibility:hidden;

    transform:
        translateX(14px);

    pointer-events:none;

    transition:
        opacity .28s ease,
        transform .28s ease,
        visibility .28s ease;

    color:#333e48 !important;

    text-decoration:none !important;
}


.mega-feature-slide.active{
    opacity:1;
    visibility:visible;

    transform:
        translateX(0);

    pointer-events:auto;
}


/* copy */

.mega-feature-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:7px;
}


.mega-feature-copy small{
    color:#888;

    font-size:8px;

    letter-spacing:.3px;

    text-transform:uppercase;
}


.mega-feature-copy strong{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    color:#333e48 !important;

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


.mega-feature-price{
    color:#333e48;

    font-size:15px;
    font-weight:700;
}


.mega-feature-link{
    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:2px;

    padding:
        6px 9px;

    border-radius:6px;

    background:var(--tm-primary,#ff7b00);

    color:#333e48;

    font-size:9px;
    font-weight:700;
}


.mega-feature-link i{
    color:#333e48 !important;

    font-size:8px;
}


/* imagen */

.mega-feature-picture{
    position:relative;

    height:170px;

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

    background:#fff;

    border:
        1px solid #ededed;

    border-radius:7px;
}


.mega-feature-picture::after{
    content:"";

    position:absolute;

    left:10px;
    right:10px;
    bottom:8px;

    height:2px;

    background:var(--tm-primary,#ff7b00);
}


.mega-feature-picture img{
    width:100% !important;
    height:100% !important;

    max-width:150px !important;

    padding:12px !important;

    object-fit:contain !important;

    transform:none !important;
}


.mega-feature-noimage{
    color:#777;

    font-size:30px;
}


/* controles */

.mega-feature-controls{
    position:absolute;

    z-index:7;

    left:14px;
    right:14px;
    bottom:11px;

    display:flex;

    align-items:center;
    justify-content:space-between;
}


.mega-feature-dots{
    display:flex;

    align-items:center;

    gap:5px;
}


.mega-feature-dots button{
    width:6px;
    height:6px;

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

    padding:0 !important;

    border:0 !important;

    border-radius:2px !important;

    background:#bbb !important;

    cursor:pointer;
}


.mega-feature-dots button.active{
    width:18px;

    background:var(--tm-primary,#ff7b00) !important;
}


.mega-feature-arrows{
    display:flex;

    gap:5px;
}


.mega-feature-arrows button{
    width:25px;
    height:25px;

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

    display:flex;

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

    padding:0 !important;

    border:
        1px solid #d8d8d8 !important;

    border-radius:5px !important;

    background:#fff !important;

    color:#333e48 !important;

    cursor:pointer;
}


.mega-feature-arrows button:hover{
    border-color:var(--tm-primary,#ff7b00) !important;

    background:var(--tm-primary,#ff7b00) !important;
}


.mega-feature-arrows i{
    color:inherit !important;

    font-size:9px;
}


/* ==========================================================
   4 FORMAS DIFERENTES
========================================================== */


/*
 * TIPO 1
 * columnas izquierda / destacado derecha
 */

.mega-layout-1 .mega-content{
    grid-template-columns:
        minmax(0,1fr)
        310px !important;
}


/*
 * TIPO 2
 * destacado más grande
 */

.mega-layout-2 .mega-content{
    grid-template-columns:
        minmax(0,.9fr)
        350px !important;
}


.mega-layout-2 .mega-feature-slider{
    background:#fff !important;
}


.mega-layout-2 .mega-feature-slide{
    grid-template-columns:
        1fr !important;

    text-align:center;
}


.mega-layout-2 .mega-feature-copy{
    align-items:center;
}


.mega-layout-2 .mega-feature-picture{
    height:115px;

    width:100%;
}


.mega-layout-2 .mega-feature-picture img{
    max-width:120px !important;
}


/*
 * TIPO 3
 * destacado horizontal inferior
 */

.mega-layout-3 .mega-content{
    grid-template-columns:
        1fr !important;
}


.mega-layout-3 .mega-feature-slider{
    min-height:175px !important;
}


.mega-layout-3 .mega-feature-slides{
    height:175px;
}


.mega-layout-3 .mega-feature-slide{
    grid-template-columns:
        minmax(0,1fr)
        190px;

    padding:
        42px 55px 35px 18px;
}


.mega-layout-3 .mega-feature-picture{
    height:105px;
}


.mega-layout-3 .mega-feature-picture img{
    max-width:125px !important;
}


/*
 * TIPO 4
 * destacado visual amplio
 */

.mega-layout-4 .mega-content{
    grid-template-columns:
        minmax(0,1.15fr)
        300px !important;
}


.mega-layout-4 .mega-feature-slider{
    border-left:
        4px solid var(--tm-primary,#ff7b00) !important;
}


.mega-layout-4 .mega-feature-picture{
    border:0;

    background:#fff;
}


/* ==========================================================
   MEGA MENU WIDE / TODOS LOS DEPARTAMENTOS
========================================================== */

.mega-panel-wide{
    padding:
        21px !important;

    border-top:
        3px solid var(--tm-primary,#ff7b00) !important;
}


.mega-panel-wide .mega-columns{
    gap:
        20px !important;
}


.mega-panel-wide .mega-column{
    padding:
        4px 10px;

    border-right:
        1px solid #ededed;
}


.mega-panel-wide .mega-column:last-child{
    border-right:0;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1050px){

    .mega-layout-1 .mega-content,
    .mega-layout-2 .mega-content,
    .mega-layout-4 .mega-content{
        grid-template-columns:
            minmax(0,1fr)
            270px !important;
    }

}


@media(max-width:760px){

    .mega-feature-slider{
        min-height:230px !important;
    }

    .mega-feature-slides{
        height:230px;
    }

    .mega-feature-slide{
        grid-template-columns:
            1fr 105px;

        padding:
            44px 12px 38px;
    }

    .mega-feature-picture{
        height:120px;
    }

}



/* ==========================================================
   MEGA MENU HOVER MOSAIC V3
========================================================== */


/* ----------------------------------------------------------
   PANEL GENERAL
---------------------------------------------------------- */

.mega-panel{
    overflow:hidden !important;

    border:
        1px solid #e4e4e4 !important;

    border-top:
        3px solid var(--tm-primary,#ff7b00) !important;

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

    background:#fff !important;

    box-shadow:
        0 16px 35px rgba(0,0,0,.11) !important;
}


.mega-content{
    gap:18px !important;

    padding:18px !important;
}


/* ----------------------------------------------------------
   OCULTAR FEATURE/SLIDER VIEJO
   JS crea el preview nuevo.
---------------------------------------------------------- */

.mega-panel .mega-feature,
.mega-panel .mega-feature-slider{
    display:none !important;
}


/* ----------------------------------------------------------
   MOSAICO DE LINKS
---------------------------------------------------------- */

.mega-links{
    display:grid !important;

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

    gap:7px !important;
}


.mega-thumb-link{
    position:relative;

    min-height:54px !important;

    display:flex !important;

    align-items:center !important;

    gap:9px !important;

    padding:
        6px 8px !important;

    overflow:hidden;

    border:
        1px solid transparent !important;

    border-radius:
        7px !important;

    background:#fff !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}


.mega-thumb-link:hover,
.mega-thumb-link.tm-mega-active{
    z-index:4;

    border-color:
        #dcdcdc !important;

    background:
        #f7f7f7 !important;

    transform:
        scale(1.035);
}


/* ----------------------------------------------------------
   THUMBNAILS BASE
---------------------------------------------------------- */

.mega-thumb{
    width:40px !important;
    height:40px !important;

    min-width:40px !important;

    display:flex !important;

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

    overflow:hidden;

    border:
        1px solid #e7e7e7 !important;

    border-radius:
        6px !important;

    background:#fff !important;

    transition:
        transform .2s ease,
        width .2s ease,
        height .2s ease !important;
}


.mega-thumb img{
    width:100% !important;
    height:100% !important;

    padding:4px !important;

    object-fit:contain !important;

    pointer-events:none !important;

    transition:
        transform .2s ease !important;
}


.mega-thumb-link:hover
.mega-thumb img{
    transform:
        scale(1.13);
}


/* ----------------------------------------------------------
   TAMAÑOS DIFERENTES
---------------------------------------------------------- */

.mega-thumb-link.tm-size-small
.mega-thumb{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
}


.mega-thumb-link.tm-size-medium
.mega-thumb{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
}


.mega-thumb-link.tm-size-large{
    grid-column:
        span 2;

    min-height:
        72px !important;
}


.mega-thumb-link.tm-size-large
.mega-thumb{
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
}


.mega-thumb-link.tm-size-wide{
    grid-column:
        span 2;

    min-height:
        62px !important;
}


.mega-thumb-link.tm-size-wide
.mega-thumb{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
}


/* texto */

.mega-thumb-text{
    min-width:0;
}


.mega-thumb-text strong{
    display:block;

    overflow:hidden;

    color:#333e48 !important;

    font-size:10px !important;
    font-weight:600 !important;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.mega-thumb-text small{
    display:block;

    margin-top:3px;

    color:#8a8f94 !important;

    font-size:8px !important;
}


/* ----------------------------------------------------------
   PREVIEW PRINCIPAL NUEVO
---------------------------------------------------------- */

.tm-mega-preview{
    position:relative;

    min-height:270px;

    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr)
        auto;

    overflow:hidden;

    border:
        1px solid #e1e1e1;

    border-radius:8px;

    background:#f7f7f7;
}


.tm-mega-preview-head{
    display:flex;

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

    gap:10px;

    padding:
        12px 14px 0;
}


.tm-mega-preview-label{
    display:inline-flex;

    padding:
        4px 7px;

    border:
        1px solid #333e48;

    border-radius:5px;

    color:#333e48;

    font-size:8px;
    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;
}


.tm-mega-preview-index{
    color:#888;

    font-size:9px;
    font-weight:600;
}


/* imagen */

.tm-mega-preview-image{
    position:relative;

    display:flex;

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

    min-height:165px;

    margin:
        8px 13px;

    overflow:hidden;

    border:
        1px solid #ebebeb;

    border-radius:7px;

    background:#fff;
}


.tm-mega-preview-image img{
    width:100%;
    height:100%;

    max-width:190px;
    max-height:165px;

    padding:10px;

    object-fit:contain;

    transform:
        scale(1);

    transition:
        transform .2s ease,
        opacity .18s ease;
}


.tm-mega-preview:hover
.tm-mega-preview-image img{
    transform:
        scale(1.06);
}


/* contenido */

.tm-mega-preview-copy{
    padding:
        0 14px 14px;
}


.tm-mega-preview-copy strong{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    color:#333e48;

    font-size:12px;
    font-weight:700;

    line-height:1.35;
}


.tm-mega-preview-copy span{
    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:8px;

    padding:
        6px 9px;

    border-radius:6px;

    background:var(--tm-primary,#ff7b00);

    color:#333e48;

    font-size:9px;
    font-weight:700;
}


/* ----------------------------------------------------------
   FORMAS DISTINTAS POR PANEL
---------------------------------------------------------- */


/* ESTILO 1
   clásico: lista + preview derecho
*/

.mega-panel.tm-mega-style-1
.mega-content{
    grid-template-columns:
        minmax(0,1fr)
        300px !important;
}


/* ESTILO 2
   thumbnails más grandes
*/

.mega-panel.tm-mega-style-2
.mega-links{
    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;
}


.mega-panel.tm-mega-style-2
.mega-thumb-link:nth-child(3n+1){
    grid-column:
        span 2;
}


.mega-panel.tm-mega-style-2
.tm-mega-preview{
    background:#fff;
}


.mega-panel.tm-mega-style-2
.tm-mega-preview-image{
    min-height:185px;
}


/* ESTILO 3
   mosaico más visual
*/

.mega-panel.tm-mega-style-3
.mega-content{
    grid-template-columns:
        minmax(0,1.15fr)
        280px !important;
}


.mega-panel.tm-mega-style-3
.mega-links{
    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;
}


.mega-panel.tm-mega-style-3
.mega-thumb-link{
    min-height:82px !important;

    flex-direction:column;

    justify-content:center;

    text-align:center;
}


.mega-panel.tm-mega-style-3
.mega-thumb{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
}


.mega-panel.tm-mega-style-3
.mega-thumb-text small{
    display:none;
}


/* ESTILO 4
   preview primero visualmente
*/

.mega-panel.tm-mega-style-4
.mega-content{
    grid-template-columns:
        310px
        minmax(0,1fr) !important;
}


.mega-panel.tm-mega-style-4
.tm-mega-preview{
    grid-column:1;
    grid-row:1;
}


.mega-panel.tm-mega-style-4
.mega-links{
    grid-column:2;
}


/* ESTILO 5
   preview horizontal abajo
*/

.mega-panel.tm-mega-style-5
.mega-content{
    grid-template-columns:
        1fr !important;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview{
    min-height:145px;

    grid-template-columns:
        180px
        minmax(0,1fr);

    grid-template-rows:
        auto 1fr;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview-head{
    grid-column:
        1 / -1;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview-image{
    min-height:95px;

    margin:
        8px 8px 12px 13px;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview-copy{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        8px 15px 12px;
}


/* ESTILO 6
   tarjetas grandes
*/

.mega-panel.tm-mega-style-6
.mega-links{
    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;
}


.mega-panel.tm-mega-style-6
.mega-thumb-link{
    min-height:68px !important;
}


.mega-panel.tm-mega-style-6
.mega-thumb{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
}


.mega-panel.tm-mega-style-6
.tm-mega-preview{
    border-left:
        4px solid var(--tm-primary,#ff7b00);
}


/* ----------------------------------------------------------
   TODOS LOS DEPARTAMENTOS
---------------------------------------------------------- */

.departments-mega
.mega-thumb-link:nth-child(5n+1){
    min-height:70px !important;
}


.departments-mega
.mega-thumb-link:nth-child(5n+1)
.mega-thumb{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
}


.departments-mega
.mega-column:nth-child(odd){
    background:#fafafa;
}


/* ----------------------------------------------------------
   HOVER FOTO
---------------------------------------------------------- */

.tm-mega-preview
img.tm-mega-changing{
    opacity:.15;
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media(max-width:1050px){

    .mega-panel.tm-mega-style-1 .mega-content,
    .mega-panel.tm-mega-style-2 .mega-content,
    .mega-panel.tm-mega-style-3 .mega-content,
    .mega-panel.tm-mega-style-4 .mega-content{
        grid-template-columns:
            minmax(0,1fr)
            250px !important;
    }

}


@media(max-width:760px){

    .tm-mega-preview{
        display:none;
    }


    .mega-links,
    .mega-panel.tm-mega-style-3 .mega-links,
    .mega-panel.tm-mega-style-6 .mega-links{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }


    .mega-thumb-link.tm-size-large,
    .mega-thumb-link.tm-size-wide{
        grid-column:auto;
    }

}



/* ==========================================================
   MEGA MENU HORIZONTAL FIX V4
   Menos alto, más ancho y compacto
========================================================== */


/* ----------------------------------------------------------
   PANEL GENERAL
---------------------------------------------------------- */

.mega-panel{
    width:min(760px,calc(100vw - 40px)) !important;

    max-height:365px !important;

    overflow:hidden !important;
}


.mega-content{
    min-height:0 !important;

    max-height:360px !important;

    display:grid !important;

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

    align-items:stretch !important;

    gap:14px !important;

    padding:14px !important;
}


/* ----------------------------------------------------------
   LINKS
---------------------------------------------------------- */

.mega-links{
    align-content:start !important;

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

    gap:5px 7px !important;

    overflow:hidden;
}


.mega-thumb-link{
    min-height:44px !important;

    padding:
        4px 6px !important;
}


.mega-thumb-link.tm-size-small{
    min-height:42px !important;
}


.mega-thumb-link.tm-size-medium{
    min-height:46px !important;
}


/*
 * Los grandes siguen siendo diferentes,
 * pero ya NO provocan tarjetas gigantes.
 */

.mega-thumb-link.tm-size-large{
    grid-column:auto !important;

    min-height:55px !important;
}


.mega-thumb-link.tm-size-wide{
    grid-column:span 2 !important;

    min-height:50px !important;
}


/* ----------------------------------------------------------
   TAMAÑOS DE THUMBNAILS
---------------------------------------------------------- */

.mega-thumb{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
}


.mega-thumb-link.tm-size-small
.mega-thumb{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
}


.mega-thumb-link.tm-size-medium
.mega-thumb{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
}


.mega-thumb-link.tm-size-large
.mega-thumb{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
}


.mega-thumb-link.tm-size-wide
.mega-thumb{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
}


/* Hover crece, pero sin alterar el layout */

.mega-thumb-link:hover{
    transform:
        translateX(2px) !important;
}


.mega-thumb-link:hover
.mega-thumb{
    transform:
        scale(1.10) !important;
}


/* ----------------------------------------------------------
   PREVIEW PRINCIPAL
---------------------------------------------------------- */

.tm-mega-preview{
    min-height:0 !important;
    height:100% !important;
    max-height:330px !important;

    display:grid !important;

    grid-template-rows:
        auto
        1fr
        auto !important;

    overflow:hidden;
}


.tm-mega-preview-head{
    padding:
        9px 10px 0 !important;
}


/* foto más horizontal */

.tm-mega-preview-image{
    min-height:0 !important;
    height:185px !important;

    margin:
        6px 10px !important;
}


.tm-mega-preview-image img{
    max-width:210px !important;
    max-height:175px !important;

    padding:8px !important;
}


.tm-mega-preview-copy{
    padding:
        0 10px 10px !important;
}


.tm-mega-preview-copy strong{
    -webkit-line-clamp:2 !important;

    font-size:11px !important;
}


.tm-mega-preview-copy span{
    margin-top:5px !important;

    padding:
        5px 8px !important;

    font-size:8px !important;
}


/* ----------------------------------------------------------
   TODOS LOS ESTILOS QUEDAN HORIZONTALES
---------------------------------------------------------- */


/* estilo 1 */

.mega-panel.tm-mega-style-1
.mega-content{
    grid-template-columns:
        minmax(0,1fr)
        280px !important;
}


/* estilo 2 */

.mega-panel.tm-mega-style-2
.mega-content{
    grid-template-columns:
        minmax(0,1fr)
        300px !important;
}


.mega-panel.tm-mega-style-2
.tm-mega-preview-image{
    height:195px !important;
}


/* estilo 3
   conserva mosaico de 3 columnas,
   pero no vertical
 */

.mega-panel.tm-mega-style-3
.mega-content{
    grid-template-columns:
        minmax(0,1.2fr)
        270px !important;
}


.mega-panel.tm-mega-style-3
.mega-links{
    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;
}


.mega-panel.tm-mega-style-3
.mega-thumb-link{
    min-height:58px !important;

    padding:
        4px !important;
}


.mega-panel.tm-mega-style-3
.mega-thumb{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
}


/* estilo 4
   preview a la izquierda
 */

.mega-panel.tm-mega-style-4
.mega-content{
    grid-template-columns:
        285px
        minmax(0,1fr) !important;
}


.mega-panel.tm-mega-style-4
.tm-mega-preview{
    grid-column:1 !important;
    grid-row:1 !important;
}


.mega-panel.tm-mega-style-4
.mega-links{
    grid-column:2 !important;
    grid-row:1 !important;
}


/* estilo 5
   ANTES ERA EL QUE SE HACIA MUY ALTO.
   Ahora también horizontal.
 */

.mega-panel.tm-mega-style-5
.mega-content{
    grid-template-columns:
        minmax(0,1fr)
        300px !important;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview{
    min-height:0 !important;

    height:100% !important;

    display:grid !important;

    grid-template-columns:
        1fr !important;

    grid-template-rows:
        auto
        1fr
        auto !important;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview-head{
    grid-column:auto !important;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview-image{
    height:180px !important;

    margin:
        6px 10px !important;
}


.mega-panel.tm-mega-style-5
.tm-mega-preview-copy{
    display:block !important;

    padding:
        0 10px 10px !important;
}


/* estilo 6 */

.mega-panel.tm-mega-style-6
.mega-content{
    grid-template-columns:
        minmax(0,1fr)
        275px !important;
}


.mega-panel.tm-mega-style-6
.mega-thumb-link{
    min-height:50px !important;
}


.mega-panel.tm-mega-style-6
.mega-thumb{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
}


/* ----------------------------------------------------------
   TODOS LOS DEPARTAMENTOS
---------------------------------------------------------- */

.departments-mega
.mega-panel{
    width:min(1050px,calc(100vw - 40px)) !important;

    max-height:390px !important;
}


.departments-mega
.mega-columns{
    gap:10px !important;
}


.departments-mega
.mega-thumb-link:nth-child(5n+1){
    min-height:48px !important;
}


.departments-mega
.mega-thumb-link:nth-child(5n+1)
.mega-thumb{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
}


/* ----------------------------------------------------------
   Evitar que el menú empuje/rompa abajo
---------------------------------------------------------- */

.yellow-menu{
    position:relative;
    z-index:60;
}


.mega-nav-item{
    position:relative;
}


.mega-panel{
    position:absolute !important;

    top:100% !important;

    z-index:1000 !important;
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:760px){

    .mega-panel{
        width:100% !important;
        max-height:none !important;
    }


    .mega-content{
        display:block !important;

        max-height:none !important;
    }


    .mega-links{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }


    .tm-mega-preview{
        display:none !important;
    }

}



/* ==========================================================
   TIENDA MOYA
   MEGA MENU TOTAL REBUILD V6
========================================================== */


/* ==========================================================
   PANEL
========================================================== */

body .yellow-menu .mega-panel.tm6-rebuilt{
    width:min(900px,calc(100vw - 36px)) !important;

    min-height:0 !important;
    max-height:315px !important;

    padding:0 !important;

    overflow:hidden !important;

    border:
        1px solid #dedede !important;

    border-top:
        3px solid var(--tm-primary,#ff7b00) !important;

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

    background:#fff !important;

    box-shadow:
        0 16px 38px rgba(0,0,0,.13) !important;
}


body .yellow-menu
.departments-mega
.mega-panel.tm6-rebuilt{
    width:min(1080px,calc(100vw - 36px)) !important;
}


/* ==========================================================
   ESTRUCTURA
========================================================== */

.tm6-shell{
    width:100%;

    display:grid;

    grid-template-rows:
        42px
        minmax(0,1fr);

    background:#fff;
}


/* ==========================================================
   CABECERA
========================================================== */

.tm6-head{
    position:relative;

    display:flex;

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

    gap:15px;

    padding:
        0 15px;

    border-bottom:
        1px solid #e8e8e8;

    background:#fafafa;
}


.tm6-head::before{
    content:"";

    position:absolute;

    left:15px;
    bottom:-1px;

    width:40px;
    height:2px;

    background:var(--tm-primary,#ff7b00);
}


.tm6-title-wrap{
    min-width:0;

    display:flex;

    align-items:center;

    gap:9px;
}


.tm6-title-mark{
    width:6px;
    height:21px;

    flex:0 0 6px;

    border-radius:2px;

    background:var(--tm-primary,#ff7b00);
}


.tm6-title{
    overflow:hidden;

    color:#333e48;

    font-size:13px;
    font-weight:700;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.tm6-head-right{
    display:flex;

    align-items:center;

    gap:12px;
}


.tm6-count{
    color:#92979b;

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.4px;
}


.tm6-all{
    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#333e48 !important;

    font-size:9px;
    font-weight:600;

    text-decoration:none !important;
}


.tm6-all:hover{
    color:#111 !important;
}


.tm6-all i{
    color:inherit !important;

    font-size:8px;
}


/* ==========================================================
   BODY
========================================================== */

.tm6-body{
    min-height:0;

    height:245px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        285px;

    gap:14px;

    padding:
        13px 14px 14px;
}


.tm6-shell.tm6-preview-left
.tm6-body{
    grid-template-columns:
        285px
        minmax(0,1fr);
}


.tm6-shell.tm6-preview-left
.tm6-grid{
    grid-column:2;
    grid-row:1;
}


.tm6-shell.tm6-preview-left
.tm6-preview{
    grid-column:1;
    grid-row:1;
}


/* ==========================================================
   GRID DE CATEGORIAS
========================================================== */

.tm6-grid{
    min-width:0;

    display:grid;

    align-content:center;

    gap:8px;
}


/* 3 grandes */

.tm6-layout-3 .tm6-grid{
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}


/* 4 medianas */

.tm6-layout-4 .tm6-grid{
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}


/* 6 compactas */

.tm6-layout-6 .tm6-grid{
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}


/* departamentos */

.tm6-layout-8 .tm6-grid{
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}


/* ==========================================================
   TARJETA CATEGORIA
========================================================== */

.tm6-card{
    position:relative;

    min-width:0;

    display:flex;

    align-items:center;

    gap:9px;

    overflow:hidden;

    border:
        1px solid #e6e6e6 !important;

    border-radius:
        7px !important;

    background:#fff !important;

    color:#333e48 !important;

    text-decoration:none !important;

    box-shadow:none !important;

    transform:none !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}


.tm6-card:hover,
.tm6-card.tm6-active{
    border-color:
        #cfcfcf !important;

    background:
        #f8f8f8 !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,.05) !important;
}


.tm6-card.tm6-active::before{
    content:"";

    position:absolute;

    left:0;
    top:7px;
    bottom:7px;

    width:3px;

    border-radius:
        0 2px 2px 0;

    background:var(--tm-primary,#ff7b00);
}


/* ==========================================================
   LAYOUT 3
========================================================== */

.tm6-layout-3 .tm6-card{
    min-height:104px;

    flex-direction:column;

    justify-content:center;

    padding:
        9px;

    text-align:center;
}


.tm6-layout-3 .tm6-thumb{
    width:58px;
    height:58px;
}


/* ==========================================================
   LAYOUT 4
========================================================== */

.tm6-layout-4 .tm6-card{
    min-height:104px;

    padding:
        9px 11px;
}


.tm6-layout-4 .tm6-thumb{
    width:60px;
    height:60px;
}


/* ==========================================================
   LAYOUT 6
========================================================== */

.tm6-layout-6 .tm6-card{
    min-height:71px;

    padding:
        7px 8px;
}


.tm6-layout-6 .tm6-thumb{
    width:45px;
    height:45px;
}


/* ==========================================================
   LAYOUT 8
========================================================== */

.tm6-layout-8 .tm6-card{
    min-height:67px;

    padding:
        6px;
}


.tm6-layout-8 .tm6-thumb{
    width:40px;
    height:40px;
}


/* ==========================================================
   THUMB
========================================================== */

.tm6-thumb{
    flex:0 0 auto;

    display:flex;

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

    overflow:hidden;

    border:
        1px solid #ebebeb;

    border-radius:6px;

    background:#fff;
}


.tm6-thumb img{
    width:100%;
    height:100%;

    padding:5px;

    object-fit:contain;

    pointer-events:none;

    transform:scale(1);

    transition:
        transform .18s ease;
}


.tm6-card:hover .tm6-thumb img,
.tm6-card.tm6-active .tm6-thumb img{
    transform:
        scale(1.12);
}


/* ==========================================================
   TEXTO
========================================================== */

.tm6-text{
    min-width:0;

    flex:1;
}


.tm6-text strong{
    display:block;

    overflow:hidden;

    color:#333e48;

    font-size:10px;
    font-weight:600;

    line-height:1.25;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.tm6-text small{
    display:block;

    overflow:hidden;

    margin-top:3px;

    color:#8b9094;

    font-size:8px;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.tm6-layout-3
.tm6-text small{
    display:none;
}


/* ==========================================================
   PREVIEW
========================================================== */

.tm6-preview{
    position:relative;

    min-width:0;

    height:100%;

    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr)
        auto;

    overflow:hidden;

    border:
        1px solid #dedede;

    border-radius:8px;

    background:#f7f7f7;

    color:#333e48 !important;

    text-decoration:none !important;
}


.tm6-preview-head{
    display:flex;

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

    gap:8px;

    padding:
        9px 10px 0;
}


.tm6-preview-badge{
    display:inline-flex;

    align-items:center;

    min-height:20px;

    padding:
        0 6px;

    border:
        1px solid #333e48;

    border-radius:5px;

    background:#fff;

    color:#333e48;

    font-size:7px;
    font-weight:700;

    letter-spacing:.35px;

    text-transform:uppercase;
}


.tm6-preview-number{
    color:#92979b;

    font-size:8px;
    font-weight:600;
}


/* imagen */

.tm6-preview-picture{
    position:relative;

    min-height:0;

    display:flex;

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

    margin:
        7px 9px 5px;

    overflow:hidden;

    border:
        1px solid #e8e8e8;

    border-radius:7px;

    background:#fff;
}


.tm6-preview-picture::after{
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    bottom:7px;

    height:2px;

    background:var(--tm-primary,#ff7b00);
}


.tm6-preview-picture img{
    width:100%;
    height:100%;

    max-width:175px;
    max-height:145px;

    padding:8px;

    object-fit:contain;

    opacity:1;

    transform:
        scale(1);

    transition:
        opacity .14s ease,
        transform .18s ease;
}


.tm6-preview:hover
.tm6-preview-picture img{
    transform:
        scale(1.05);
}


.tm6-preview-picture img.tm6-changing{
    opacity:.12;
}


/* contenido */

.tm6-preview-copy{
    padding:
        0 10px 10px;
}


.tm6-preview-copy strong{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    min-height:29px;

    color:#333e48;

    font-size:11px;
    font-weight:700;

    line-height:1.3;
}


.tm6-preview-action{
    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:5px;

    padding:
        5px 8px;

    border-radius:6px;

    background:var(--tm-primary,#ff7b00);

    color:#333e48;

    font-size:8px;
    font-weight:700;
}


.tm6-preview-action i{
    color:inherit !important;

    font-size:8px;
}


/* ==========================================================
   PEQUEÑAS DIFERENCIAS DE ESTILO
   SIN ROMPER LA ALINEACION
========================================================== */

.tm6-tone-a .tm6-preview{
    border-left:
        4px solid var(--tm-primary,#ff7b00);
}


.tm6-tone-b .tm6-preview{
    border-top:
        4px solid #333e48;
}


.tm6-tone-c .tm6-head{
    background:#fff;
}


.tm6-tone-c .tm6-preview{
    background:#fff;
}


.tm6-tone-d .tm6-preview{
    border-bottom:
        4px solid var(--tm-primary,#ff7b00);
}


/* ==========================================================
   DEPARTAMENTOS
========================================================== */

.departments-mega
.mega-panel.tm6-rebuilt
.tm6-body{
    grid-template-columns:
        minmax(0,1fr)
        300px;
}


.departments-mega
.mega-panel.tm6-rebuilt
.tm6-shell.tm6-preview-left
.tm6-body{
    grid-template-columns:
        300px
        minmax(0,1fr);
}


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

@media(max-width:760px){

    body .yellow-menu
    .mega-panel.tm6-rebuilt{
        width:100% !important;

        max-height:none !important;

        overflow:visible !important;
    }


    .tm6-shell{
        display:block;
    }


    .tm6-head{
        min-height:42px;
    }


    .tm6-body,
    .tm6-shell.tm6-preview-left .tm6-body,
    .departments-mega
    .mega-panel.tm6-rebuilt
    .tm6-body{
        height:auto;

        display:block;

        padding:10px;
    }


    .tm6-preview{
        display:none;
    }


    .tm6-grid,
    .tm6-layout-3 .tm6-grid,
    .tm6-layout-4 .tm6-grid,
    .tm6-layout-6 .tm6-grid,
    .tm6-layout-8 .tm6-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .tm6-card,
    .tm6-layout-3 .tm6-card,
    .tm6-layout-4 .tm6-card,
    .tm6-layout-6 .tm6-card,
    .tm6-layout-8 .tm6-card{
        min-height:52px;

        flex-direction:row;

        padding:6px;

        text-align:left;
    }


    .tm6-thumb,
    .tm6-layout-3 .tm6-thumb,
    .tm6-layout-4 .tm6-thumb,
    .tm6-layout-6 .tm6-thumb,
    .tm6-layout-8 .tm6-thumb{
        width:38px;
        height:38px;
    }

}