/* ==========================================================
   TIENDA MOYA
   ELECTRO REFERENCE SYSTEM V1
========================================================== */

:root{
    --tm-yellow:var(--tm-primary,#ff7b00);
    --tm-dark:#333e48;
    --tm-blue:#0062bd;
    --tm-gray:#6b7075;
    --tm-light:#f5f5f5;
    --tm-border:#e4e4e4;
    --tm-radius:6px;
}


/* ==========================================================
   BASE
========================================================== */

body{
    color:var(--tm-dark);
}

.tm-ref-hidden{
    display:none !important;
}


/* ==========================================================
   HEADER / SEARCH
========================================================== */

.electro-header{
    background:#fff;
}

.header-main{
    min-height:74px;
}

.header-search{
    position:relative;
}

.header-search form{
    position:relative;
}

.header-search input[type="search"],
.header-search input[type="text"]{
    min-height:40px;

    border:
        2px solid var(--tm-yellow) !important;

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

    box-shadow:none !important;
}

.header-search select{
    border-top:
        2px solid var(--tm-yellow) !important;

    border-bottom:
        2px solid var(--tm-yellow) !important;

    border-radius:0 !important;
}

.header-search button{
    min-height:40px;

    border:
        0 !important;

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

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

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


/* ==========================================================
   AJAX SEARCH
========================================================== */

.tm-ref-search{
    position:absolute;

    z-index:5000;

    left:0;
    right:0;
    top:calc(100% + 7px);

    display:none;

    overflow:hidden;

    border:
        1px solid #ddd;

    border-radius:
        0 0 7px 7px;

    background:#fff;

    box-shadow:
        0 15px 35px rgba(0,0,0,.14);
}

.tm-ref-search.open{
    display:block;
}


.tm-ref-search-grid{
    display:grid;

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


.tm-ref-search-side{
    padding:14px;

    border-right:
        1px solid #ececec;

    background:#fafafa;
}


.tm-ref-search-side h4,
.tm-ref-search-results-head{
    margin:
        0 0 10px;

    color:#8a8f94;

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

    letter-spacing:.55px;

    text-transform:uppercase;
}


.tm-ref-trending{
    display:flex;

    flex-wrap:wrap;

    gap:6px;
}


.tm-ref-trending button{
    padding:
        5px 8px !important;

    border:
        1px solid #e0e0e0 !important;

    border-radius:4px !important;

    background:#fff !important;

    color:#555 !important;

    font-size:9px !important;

    cursor:pointer;
}


.tm-ref-trending button:hover{
    border-color:
        var(--tm-yellow) !important;
}


.tm-ref-search-main{
    padding:14px;
}


.tm-ref-search-products{
    display:grid;

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

    gap:10px;
}


.tm-ref-search-product{
    min-width:0;

    display:grid;

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

    gap:8px;

    align-items:center;

    color:inherit;

    text-decoration:none;
}


.tm-ref-search-product-image{
    width:72px;
    height:72px;

    display:flex;

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

    overflow:hidden;

    background:#f7f7f7;
}


.tm-ref-search-product-image img{
    width:100%;
    height:100%;

    padding:5px;

    object-fit:contain;
}


.tm-ref-search-product strong{
    display:-webkit-box;

    overflow:hidden;

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

    color:var(--tm-blue);

    font-size:10px;
    line-height:1.25;
}


.tm-ref-search-product span{
    display:block;

    margin-top:5px;

    color:var(--tm-dark);

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


.tm-ref-search-empty{
    grid-column:1 / -1;

    padding:25px;

    color:#888;

    text-align:center;

    font-size:11px;
}


.tm-ref-search-footer{
    padding:
        10px 14px;

    border-top:
        1px solid #ececec;

    color:#999;

    font-size:9px;
}


/* ==========================================================
   MENU AMARILLO
========================================================== */

.yellow-menu{
    min-height:43px;

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


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

.mega-panel.tm-ref-mega-ready{
    width:min(920px,calc(100vw - 40px)) !important;

    min-height:0 !important;
    max-height:310px !important;

    padding:0 !important;

    overflow:hidden !important;

    border:
        1px solid #ddd !important;

    border-top:
        0 !important;

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

    background:#fff !important;

    box-shadow:
        0 8px 18px rgba(0,0,0,.13) !important;
}


.departments-mega
.mega-panel.tm-ref-mega-ready{
    width:min(1050px,calc(100vw - 40px)) !important;
}


.tm-ref-mega{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:0;

    padding:
        15px 14px;
}


.tm-ref-mega-column{
    min-width:0;

    padding:
        0 14px;

    border-right:
        1px solid #ececec;
}


.tm-ref-mega-column:first-child{
    padding-left:4px;
}


.tm-ref-mega-column:last-child{
    border-right:0;
}


.tm-ref-mega-picture{
    height:92px;

    display:flex;

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

    margin-bottom:8px;

    overflow:hidden;
}


.tm-ref-mega-picture img{
    width:100%;
    height:100%;

    max-width:130px;

    object-fit:contain;

    transform:
        scale(1);

    transition:
        transform .18s ease;
}


.tm-ref-mega-column:hover
.tm-ref-mega-picture img{
    transform:
        scale(1.07);
}


.tm-ref-mega-title{
    display:block;

    margin-bottom:7px;

    overflow:hidden;

    color:var(--tm-dark);

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

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

    text-decoration:none;
}


.tm-ref-mega-links{
    display:flex;

    flex-direction:column;

    gap:5px;
}


.tm-ref-mega-links a{
    position:relative;

    padding-left:9px;

    overflow:hidden;

    color:#555 !important;

    font-size:9px;

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

    text-decoration:none !important;
}


.tm-ref-mega-links a::before{
    content:"";

    position:absolute;

    left:0;
    top:6px;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#c5c5c5;
}


.tm-ref-mega-links a:hover{
    color:var(--tm-blue) !important;
}


.tm-ref-mega-links a:hover::before{
    background:
        var(--tm-yellow);
}


/* ==========================================================
   SHOP / PRODUCT LEFT SIDEBAR
========================================================== */

.tm-ref-page-shell{
    width:1360px;
    max-width:calc(100% - 36px);

    display:grid;

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

    gap:28px;

    margin:
        25px auto 45px;
}


.tm-ref-sidebar{
    min-width:0;
}


.tm-ref-sidebar-box{
    margin-bottom:25px;
}


.tm-ref-sidebar-box h3{
    position:relative;

    margin:
        0 0 12px;

    padding-bottom:10px;

    border-bottom:
        1px solid #ddd;

    color:var(--tm-dark);

    font-size:13px;
    font-weight:500;
}


.tm-ref-sidebar-box h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:36px;
    height:2px;

    background:
        var(--tm-yellow);
}


.tm-ref-category-list{
    margin:0;
    padding:0;

    list-style:none;
}


.tm-ref-category-list li{
    border-bottom:
        1px solid #ededed;
}


.tm-ref-category-list a{
    display:flex;

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

    gap:8px;

    padding:
        8px 2px;

    color:#555 !important;

    font-size:9px;

    text-decoration:none;
}


.tm-ref-category-list a:hover{
    color:
        var(--tm-blue) !important;
}


.tm-ref-category-list span{
    color:#aaa;

    font-size:8px;
}


/* filters */

.tm-ref-filter-list{
    display:flex;

    flex-direction:column;

    gap:8px;
}


.tm-ref-filter-check{
    display:flex;

    align-items:center;

    gap:7px;

    color:#666;

    font-size:9px;
}


.tm-ref-filter-check input{
    accent-color:
        var(--tm-yellow);
}


/* main */

.tm-ref-page-content{
    min-width:0;
}


/* ==========================================================
   PRODUCT GRID
========================================================== */

.tm-ref-products-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:0;
}


/* ==========================================================
   PRODUCT CARDS
========================================================== */

.slider-product,
.tab-product-card,
.flash-card,
.category-product-row article,
.recommended-grid article,
[class*="product-card"]{
    position:relative;

    overflow:visible !important;

    border:
        1px solid transparent !important;

    border-radius:0 !important;

    background:#fff !important;

    box-shadow:none !important;
}


.slider-product:hover,
.tab-product-card:hover,
.flash-card:hover,
.category-product-row article:hover,
.recommended-grid article:hover{
    z-index:3;

    border-color:#e0e0e0 !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.09) !important;
}


/* category label */

.product-category,
.product-cat,
[class*="product-category"]{
    margin-bottom:5px;

    color:#a0a0a0 !important;

    font-size:8px !important;
}


/* product title */

.product-title,
.slider-product h3,
.tab-product-card h3,
.flash-card h3,
.category-product-row article h3,
.recommended-grid article h3{
    color:
        var(--tm-blue) !important;

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

    line-height:1.3 !important;
}


/* product image */

.slider-product img,
.tab-product-card img,
.flash-card img,
.category-product-row article img,
.recommended-grid article img{
    object-fit:contain !important;
}


/* price */

.product-price,
.price,
.slider-product .price,
.tab-product-card .price{
    color:
        var(--tm-dark) !important;

    font-size:14px !important;
    font-weight:500 !important;
}


/* actions */

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


.product-bottom a,
.tab-product-button{
    display:inline-flex !important;

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

    width:30px !important;
    height:30px !important;

    border-radius:50% !important;

    background:#ededed !important;

    color:#bbb !important;
}


.product-bottom a:hover,
.tab-product-button:hover{
    background:
        var(--tm-yellow) !important;

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


/* ==========================================================
   SHOP TOOLBAR
========================================================== */

.tm-ref-toolbar{
    min-height:43px;

    display:flex;

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

    gap:10px;

    margin-bottom:15px;

    padding:
        7px 10px;

    border-radius:4px;

    background:#f5f5f5;
}


.tm-ref-toolbar h1{
    margin:0;

    color:#333e48;

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


/* ==========================================================
   SINGLE PRODUCT
========================================================== */

body.tm-ref-single
.tm-ref-page-shell{
    margin-top:20px;
}


body.tm-ref-single
.tm-ref-page-content{
    min-width:0;
}


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

.pro-footer{
    border-top:
        1px solid #e7e7e7;
}


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


.footer-body{
    background:#f6f6f6 !important;
}


.footer-pro-grid{
    padding-top:38px !important;
    padding-bottom:38px !important;
}


.footer-pro-column h3{
    font-size:11px !important;
}


.footer-pro-column a{
    color:#555 !important;

    font-size:9px !important;
}


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

@media(max-width:1100px){

    .tm-ref-page-shell{
        grid-template-columns:
            185px minmax(0,1fr);
    }

    .tm-ref-products-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


@media(max-width:800px){

    .tm-ref-search-grid{
        grid-template-columns:1fr;
    }

    .tm-ref-search-side{
        display:none;
    }

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

    .tm-ref-mega{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .tm-ref-mega-column:nth-child(2){
        border-right:0;
    }

    .tm-ref-page-shell{
        display:block;

        max-width:calc(100% - 22px);
    }

    .tm-ref-sidebar{
        margin-bottom:25px;
    }

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

}


@media(max-width:520px){

    .tm-ref-search-products{
        grid-template-columns:1fr;
    }

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

}



/* ==========================================================
   MEGA MENU EDITORIAL V2
   SIN RECUADROS
========================================================== */


/* quitar look de caja del panel */

.mega-panel.tm-mm-editorial{
    width:min(940px,calc(100vw - 38px)) !important;

    min-height:0 !important;
    max-height:320px !important;

    overflow:hidden !important;

    padding:0 !important;

    border:0 !important;

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

    background:#fff !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.12) !important;
}


.departments-mega
.mega-panel.tm-mm-editorial{
    width:min(1060px,calc(100vw - 38px)) !important;
}


/* ==========================================================
   SHELL
========================================================== */

.tm-mm-shell{
    padding:
        12px 18px 15px;

    background:#fff;
}


/* ==========================================================
   TOP
========================================================== */

.tm-mm-top{
    min-height:35px;

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding-bottom:8px;

    border-bottom:
        1px solid #ebebeb;
}


.tm-mm-top > div{
    min-width:0;
}


.tm-mm-top small{
    display:block;

    color:#a0a0a0;

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

    letter-spacing:.6px;

    text-transform:uppercase;
}


.tm-mm-top strong{
    display:block;

    margin-top:2px;

    color:#333e48;

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


.tm-mm-view-all{
    display:inline-flex;

    align-items:center;

    gap:5px;

    padding-top:4px;

    color:#666 !important;

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

    text-decoration:none !important;
}


.tm-mm-view-all:hover{
    color:#111 !important;
}


/* ==========================================================
   BODY
========================================================== */

.tm-mm-body{
    height:235px;

    display:grid;

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

    gap:22px;

    padding-top:12px;
}


/* ==========================================================
   CATEGORIAS
========================================================== */

.tm-mm-categories{
    min-width:0;

    display:grid;

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

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

    align-content:center;

    gap:
        7px 18px;
}


/* SIN CAJAS */

.tm-mm-category{
    min-width:0;

    display:grid;

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

    align-items:center;

    gap:8px;

    padding:
        5px 0;

    border:0 !important;

    border-bottom:
        1px solid #f0f0f0 !important;

    border-radius:0 !important;

    background:transparent !important;

    color:#333e48 !important;

    text-decoration:none !important;

    box-shadow:none !important;
}


.tm-mm-category:nth-last-child(-n+3){
    border-bottom:
        0 !important;
}


.tm-mm-category-image{
    width:38px;
    height:38px;

    display:flex;

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

    overflow:hidden;
}


.tm-mm-category-image img{
    width:100%;
    height:100%;

    object-fit:contain;

    transform:
        scale(1);

    transition:
        transform .18s ease;
}


.tm-mm-category:hover
.tm-mm-category-image img{
    transform:
        scale(1.13);
}


.tm-mm-category-name{
    overflow:hidden;

    color:#444;

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

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


.tm-mm-category i{
    color:#c1c1c1 !important;

    font-size:7px;
}


.tm-mm-category:hover
.tm-mm-category-name{
    color:#0062bd;
}


.tm-mm-category:hover i{
    color:#333e48 !important;
}


/* ==========================================================
   FEATURE GENERAL
========================================================== */

.tm-mm-feature{
    position:relative;

    min-width:0;

    height:100%;

    overflow:hidden;

    padding-left:20px;

    border-left:
        1px solid #ededed;
}


/* no hay línea amarilla lateral */

.tm-mm-product{
    color:inherit;

    text-decoration:none;
}


/* ==========================================================
   PRODUCTO MAIN
========================================================== */

.tm-mm-main-product{
    height:100%;

    display:grid;

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


.tm-mm-product-image{
    min-height:0;

    display:flex;

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

    overflow:hidden;

    background:transparent;
}


.tm-mm-product-image img{
    width:100%;
    height:100%;

    max-width:185px;
    max-height:155px;

    object-fit:contain;

    transform:scale(1);

    transition:
        transform .2s ease;
}


.tm-mm-product:hover
.tm-mm-product-image img{
    transform:
        scale(1.055);
}


.tm-mm-product-copy small{
    display:block;

    color:#aaa;

    font-size:7px;

    text-transform:uppercase;

    letter-spacing:.4px;
}


.tm-mm-product-copy strong{
    display:-webkit-box;

    overflow:hidden;

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

    margin-top:3px;

    color:#333e48;

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

    line-height:1.25;
}


.tm-mm-product-copy span{
    display:block;

    margin-top:5px;

    color:#333e48;

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


/* ==========================================================
   TIPO 0 - CUADRADA
========================================================== */

.tm-mm-type-0
.tm-mm-feature{
    width:280px;
}


.tm-mm-type-0
.tm-mm-product-image{
    aspect-ratio:1.3 / 1;
}


/* ==========================================================
   TIPO 1 - RECTANGULAR
========================================================== */

.tm-mm-type-1
.tm-mm-body{
    grid-template-columns:
        minmax(0,1fr)
        340px;
}


.tm-mm-wide-product{
    height:100%;

    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    align-items:center;

    gap:10px;
}


.tm-mm-wide-product
.tm-mm-product-image img{
    max-width:210px;
    max-height:175px;
}


/* ==========================================================
   TIPO 2 - SLIDER
========================================================== */

.tm-mm-slider{
    display:grid;

    grid-template-rows:
        minmax(0,1fr)
        30px;
}


.tm-mm-slides{
    position:relative;

    min-height:0;
}


.tm-mm-slide{
    position:absolute;

    inset:0;

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items:center;

    gap:10px;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    color:inherit;

    text-decoration:none;

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


.tm-mm-slide.active{
    opacity:1;
    visibility:visible;

    pointer-events:auto;
}


.tm-mm-slide-image{
    height:160px;

    display:flex;

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


.tm-mm-slide-image img{
    width:100%;
    height:100%;

    max-width:180px;

    object-fit:contain;
}


.tm-mm-slide-copy small{
    color:#aaa;

    font-size:7px;

    text-transform:uppercase;
}


.tm-mm-slide-copy strong{
    display:-webkit-box;

    overflow:hidden;

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

    margin-top:4px;

    color:#333e48;

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

    line-height:1.25;
}


.tm-mm-slide-copy span{
    display:block;

    margin-top:6px;

    color:#333e48;

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


.tm-mm-slider-bottom{
    display:flex;

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


.tm-mm-dots{
    display:flex;

    gap:4px;
}


.tm-mm-dots button{
    width:5px;
    height:5px;

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

    padding:0 !important;

    border:0 !important;

    border-radius:50% !important;

    background:#c5c5c5 !important;
}


.tm-mm-dots button.active{
    width:16px;

    border-radius:4px !important;

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


.tm-mm-slider-arrows{
    display:flex;

    gap:4px;
}


.tm-mm-slider-arrows button{
    width:24px;
    height:24px;

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

    display:flex;

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

    padding:0 !important;

    border:0 !important;

    border-radius:4px !important;

    background:#f2f2f2 !important;

    color:#555 !important;
}


.tm-mm-slider-arrows button:hover{
    background:#e7e7e7 !important;
}


/* ==========================================================
   TIPO 3 - DOS PRODUCTOS
========================================================== */

.tm-mm-duo{
    display:grid;

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

    gap:15px;
}


.tm-mm-duo-product{
    min-width:0;

    display:grid;

    grid-template-rows:
        130px
        auto;

    align-content:start;
}


.tm-mm-duo-product:first-child{
    padding-right:14px;

    border-right:
        1px solid #eee;
}


.tm-mm-duo-product
.tm-mm-product-image img{
    max-width:125px;
    max-height:120px;
}


.tm-mm-duo-product
.tm-mm-product-copy strong{
    font-size:9px;
}


/* ==========================================================
   TIPO 4 - FOTO IZQUIERDA
========================================================== */

.tm-mm-type-4
.tm-mm-body{
    grid-template-columns:
        310px
        minmax(0,1fr);
}


.tm-mm-type-4
.tm-mm-categories{
    grid-column:2;
    grid-row:1;
}


.tm-mm-type-4
.tm-mm-feature{
    grid-column:1;
    grid-row:1;

    padding-left:0;
    padding-right:20px;

    border-left:0;

    border-right:
        1px solid #ededed;
}


.tm-mm-portrait-product{
    height:100%;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    align-items:center;

    gap:9px;
}


.tm-mm-portrait-product
.tm-mm-product-image img{
    max-width:150px;
    max-height:170px;
}


/* ==========================================================
   DEPARTAMENTOS
========================================================== */

.departments-mega
.tm-mm-categories{
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}


.departments-mega
.tm-mm-body{
    grid-template-columns:
        minmax(0,1fr)
        310px;
}


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

@media(max-width:760px){

    .mega-panel.tm-mm-editorial{
        width:100% !important;

        max-height:none !important;
    }


    .tm-mm-body,
    .tm-mm-type-1 .tm-mm-body,
    .tm-mm-type-4 .tm-mm-body,
    .departments-mega .tm-mm-body{
        height:auto;

        display:block;
    }


    .tm-mm-feature{
        display:none;
    }


    .tm-mm-categories,
    .departments-mega
    .tm-mm-categories{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-template-rows:auto;
    }

}



/* ==========================================================
   MEGA MENU THUMB SCALE V3
   Más grandes cuando hay espacio vacío
========================================================== */


/* ----------------------------------------------------------
   BASE MAS GRANDE
---------------------------------------------------------- */

.tm-mm-category{
    grid-template-columns:
        52px
        minmax(0,1fr)
        8px !important;

    min-height:58px !important;

    gap:10px !important;

    padding:
        7px 0 !important;
}


.tm-mm-category-image{
    width:52px !important;
    height:52px !important;
}


.tm-mm-category-image img{
    padding:2px !important;
}


.tm-mm-category-name{
    font-size:10px !important;
}


/* ----------------------------------------------------------
   POCOS ELEMENTOS
   3 o 4 = grandes
---------------------------------------------------------- */

.tm-mm-few
.tm-mm-categories{
    gap:
        10px 24px !important;
}


.tm-mm-few
.tm-mm-category{
    grid-template-columns:
        72px
        minmax(0,1fr)
        9px !important;

    min-height:82px !important;

    padding:
        9px 0 !important;
}


.tm-mm-few
.tm-mm-category-image{
    width:72px !important;
    height:72px !important;
}


.tm-mm-few
.tm-mm-category-name{
    font-size:11px !important;

    font-weight:600 !important;
}


/* ----------------------------------------------------------
   CANTIDAD MEDIA
   5 o 6
---------------------------------------------------------- */

.tm-mm-medium
.tm-mm-categories{
    gap:
        8px 20px !important;
}


.tm-mm-medium
.tm-mm-category{
    grid-template-columns:
        60px
        minmax(0,1fr)
        8px !important;

    min-height:68px !important;
}


.tm-mm-medium
.tm-mm-category-image{
    width:60px !important;
    height:60px !important;
}


.tm-mm-medium
.tm-mm-category-name{
    font-size:10px !important;
}


/* ----------------------------------------------------------
   MUCHOS ELEMENTOS
   7+
---------------------------------------------------------- */

.tm-mm-many
.tm-mm-category{
    grid-template-columns:
        46px
        minmax(0,1fr)
        8px !important;

    min-height:54px !important;
}


.tm-mm-many
.tm-mm-category-image{
    width:46px !important;
    height:46px !important;
}


.tm-mm-many
.tm-mm-category-name{
    font-size:9px !important;
}


/* ----------------------------------------------------------
   FOTO PRINCIPAL TAMBIEN MAS GRANDE
---------------------------------------------------------- */

.tm-mm-product-image img{
    max-width:220px !important;
    max-height:180px !important;
}


.tm-mm-main-product
.tm-mm-product-image img{
    max-width:230px !important;
    max-height:185px !important;
}


.tm-mm-wide-product
.tm-mm-product-image img{
    max-width:245px !important;
    max-height:190px !important;
}


.tm-mm-duo-product
.tm-mm-product-image img{
    max-width:145px !important;
    max-height:135px !important;
}


.tm-mm-portrait-product
.tm-mm-product-image img{
    max-width:180px !important;
    max-height:190px !important;
}


/* ----------------------------------------------------------
   SLIDER VISUAL
---------------------------------------------------------- */

.tm-mm-slide-image img{
    max-width:210px !important;
    max-height:175px !important;
}


/* ----------------------------------------------------------
   CUANDO HAY POCAS CATEGORIAS,
   DAR MAS ESPACIO VISUAL A LA FOTO
---------------------------------------------------------- */

.tm-mm-few
.tm-mm-body{
    grid-template-columns:
        minmax(0,1fr)
        340px !important;
}


.tm-mm-medium
.tm-mm-body{
    grid-template-columns:
        minmax(0,1fr)
        320px !important;
}


/* ----------------------------------------------------------
   DEPARTAMENTOS
---------------------------------------------------------- */

.departments-mega
.tm-mm-category{
    grid-template-columns:
        50px
        minmax(0,1fr)
        8px !important;
}


.departments-mega
.tm-mm-category-image{
    width:50px !important;
    height:50px !important;
}


/* ----------------------------------------------------------
   HOVER SIN MOVER DISEÑO
---------------------------------------------------------- */

.tm-mm-category:hover
.tm-mm-category-image img{
    transform:
        scale(1.10) !important;
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:760px){

    .tm-mm-category,
    .tm-mm-few .tm-mm-category,
    .tm-mm-medium .tm-mm-category,
    .tm-mm-many .tm-mm-category{
        grid-template-columns:
            44px
            minmax(0,1fr)
            8px !important;

        min-height:52px !important;
    }


    .tm-mm-category-image,
    .tm-mm-few .tm-mm-category-image,
    .tm-mm-medium .tm-mm-category-image,
    .tm-mm-many .tm-mm-category-image{
        width:44px !important;
        height:44px !important;
    }

}



/* ==========================================================
   MEGA MENU FIT ALL V4
   LLENAR ESPACIO / THUMBS GRANDES / HORIZONTAL
========================================================== */


/* ==========================================================
   PANEL GENERAL
========================================================== */

body .yellow-menu
.mega-panel.tm-mm-editorial{
    width:min(
        980px,
        calc(100vw - 32px)
    ) !important;

    min-height:0 !important;

    max-height:325px !important;

    overflow:hidden !important;
}


body .yellow-menu
.departments-mega
.mega-panel.tm-mm-editorial{
    width:min(
        1120px,
        calc(100vw - 32px)
    ) !important;
}


/* ==========================================================
   SHELL
========================================================== */

.tm-mm-shell{
    width:100%;

    height:auto;

    padding:
        10px 16px 14px !important;
}


/* ==========================================================
   CABECERA MAS COMPACTA
========================================================== */

.tm-mm-top{
    min-height:31px !important;

    padding-bottom:
        6px !important;
}


.tm-mm-top small{
    font-size:
        6px !important;
}


.tm-mm-top strong{
    font-size:
        12px !important;
}


/* ==========================================================
   BODY
========================================================== */

.tm-mm-body{
    width:100%;

    height:245px !important;

    display:grid !important;

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

    gap:
        22px !important;

    padding-top:
        9px !important;
}


.tm-mm-categories{
    width:100%;

    min-width:0;

    height:100%;

    display:grid !important;

    align-content:center !important;

    gap:
        5px 20px !important;
}


/* ==========================================================
   REGLA UNIVERSAL DE CATEGORIA
========================================================== */

.tm-mm-category{
    min-width:0;

    min-height:0 !important;

    display:grid !important;

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

    align-items:center !important;

    gap:
        9px !important;

    padding:
        5px 0 !important;

    border:0 !important;

    border-bottom:
        1px solid #f0f0f0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.tm-mm-category-image{
    width:
        58px !important;

    height:
        58px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    overflow:hidden;
}


.tm-mm-category-image img{
    width:
        100% !important;

    height:
        100% !important;

    padding:
        2px !important;

    object-fit:
        contain !important;
}


.tm-mm-category-name{
    font-size:
        10px !important;

    font-weight:
        500 !important;
}


/* ==========================================================
   3 CATEGORIAS
   UNA FILA GRANDE
========================================================== */

.tm-fit-3
.tm-mm-categories{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    grid-template-rows:
        1fr !important;

    gap:
        0 30px !important;
}


.tm-fit-3
.tm-mm-category{
    grid-template-columns:
        92px
        minmax(0,1fr)
        8px !important;

    min-height:
        110px !important;

    padding:
        8px 0 !important;
}


.tm-fit-3
.tm-mm-category-image{
    width:
        92px !important;

    height:
        92px !important;
}


.tm-fit-3
.tm-mm-category-name{
    font-size:
        12px !important;

    font-weight:
        600 !important;
}


/* ==========================================================
   4 CATEGORIAS
   UNA FILA
========================================================== */

.tm-fit-4
.tm-mm-categories{
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;

    grid-template-rows:
        1fr !important;

    gap:
        0 20px !important;
}


.tm-fit-4
.tm-mm-category{
    grid-template-columns:
        76px
        minmax(0,1fr) !important;

    min-height:
        105px !important;
}


.tm-fit-4
.tm-mm-category-image{
    width:
        76px !important;

    height:
        76px !important;
}


/* ocultar flechita solamente
   cuando necesitamos espacio */

.tm-fit-4
.tm-mm-category > i{
    display:none;
}


/* ==========================================================
   5 CATEGORIAS
========================================================== */

.tm-fit-5
.tm-mm-categories{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

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

    gap:
        4px 24px !important;
}


.tm-fit-5
.tm-mm-category{
    grid-template-columns:
        68px
        minmax(0,1fr)
        8px !important;
}


.tm-fit-5
.tm-mm-category-image{
    width:
        68px !important;

    height:
        68px !important;
}


/* ==========================================================
   6 CATEGORIAS
========================================================== */

.tm-fit-6
.tm-mm-categories{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

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

    gap:
        4px 20px !important;
}


.tm-fit-6
.tm-mm-category{
    grid-template-columns:
        66px
        minmax(0,1fr)
        8px !important;
}


.tm-fit-6
.tm-mm-category-image{
    width:
        66px !important;

    height:
        66px !important;
}


/* ==========================================================
   7 CATEGORIAS
========================================================== */

.tm-fit-7
.tm-mm-categories{
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;

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

    gap:
        4px 14px !important;
}


.tm-fit-7
.tm-mm-category{
    grid-template-columns:
        52px
        minmax(0,1fr) !important;
}


.tm-fit-7
.tm-mm-category-image{
    width:
        52px !important;

    height:
        52px !important;
}


.tm-fit-7
.tm-mm-category > i{
    display:none;
}


/* ==========================================================
   8 CATEGORIAS
========================================================== */

.tm-fit-8
.tm-mm-categories{
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;

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

    gap:
        4px 14px !important;
}


.tm-fit-8
.tm-mm-category{
    grid-template-columns:
        52px
        minmax(0,1fr) !important;
}


.tm-fit-8
.tm-mm-category-image{
    width:
        52px !important;

    height:
        52px !important;
}


.tm-fit-8
.tm-mm-category > i{
    display:none;
}


/* ==========================================================
   MAS DE 8
========================================================== */

.tm-fit-many
.tm-mm-categories{
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;

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

    gap:
        3px 12px !important;
}


.tm-fit-many
.tm-mm-category{
    grid-template-columns:
        44px
        minmax(0,1fr) !important;

    padding:
        3px 0 !important;
}


.tm-fit-many
.tm-mm-category-image{
    width:
        44px !important;

    height:
        44px !important;
}


.tm-fit-many
.tm-mm-category > i{
    display:none;
}


/* ==========================================================
   PREVIEW / PRODUCTO PRINCIPAL
========================================================== */

.tm-mm-feature{
    width:100% !important;

    min-width:0 !important;

    height:
        100% !important;

    padding-left:
        20px !important;

    overflow:hidden;
}


.tm-mm-product-image{
    width:
        100% !important;

    height:
        100% !important;

    min-height:
        135px !important;
}


.tm-mm-product-image img{
    width:
        100% !important;

    height:
        100% !important;

    max-width:
        250px !important;

    max-height:
        185px !important;

    object-fit:
        contain !important;
}


/* ==========================================================
   POCAS CATEGORIAS:
   PRODUCTO PRINCIPAL UN POCO MAS GRANDE
========================================================== */

.tm-fit-3
.tm-mm-body,
.tm-fit-4
.tm-mm-body{
    grid-template-columns:
        minmax(0,1fr)
        350px !important;
}


.tm-fit-3
.tm-mm-product-image img,
.tm-fit-4
.tm-mm-product-image img{
    max-width:
        275px !important;

    max-height:
        190px !important;
}


/* ==========================================================
   TIPO RECTANGULAR
========================================================== */

.tm-mm-wide-product
.tm-mm-product-image img{
    max-width:
        270px !important;

    max-height:
        190px !important;
}


/* ==========================================================
   DOS PRODUCTOS
========================================================== */

.tm-mm-duo{
    gap:
        18px !important;
}


.tm-mm-duo-product{
    grid-template-rows:
        145px
        auto !important;
}


.tm-mm-duo-product
.tm-mm-product-image img{
    max-width:
        155px !important;

    max-height:
        140px !important;
}


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

.tm-mm-slide-image{
    height:
        175px !important;
}


.tm-mm-slide-image img{
    max-width:
        235px !important;

    max-height:
        170px !important;
}


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

.tm-mm-type-4
.tm-mm-body{
    grid-template-columns:
        335px
        minmax(0,1fr) !important;
}


.tm-mm-portrait-product
.tm-mm-product-image img{
    max-width:
        215px !important;

    max-height:
        190px !important;
}


/* ==========================================================
   DEPARTAMENTOS
========================================================== */

.departments-mega
.tm-mm-body{
    grid-template-columns:
        minmax(0,1fr)
        325px !important;
}


.departments-mega
.tm-mm-categories{
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        ) !important;
}


.departments-mega
.tm-mm-category{
    grid-template-columns:
        54px
        minmax(0,1fr) !important;
}


.departments-mega
.tm-mm-category-image{
    width:
        54px !important;

    height:
        54px !important;
}


/* ==========================================================
   TEXTO
========================================================== */

.tm-mm-product-copy strong{
    font-size:
        10px !important;
}


.tm-mm-product-copy span{
    font-size:
        13px !important;
}


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

.tm-mm-category:hover
.tm-mm-category-image img{
    transform:
        scale(1.12) !important;
}


.tm-mm-product:hover
.tm-mm-product-image img{
    transform:
        scale(1.05) !important;
}


/* ==========================================================
   NADA DE RECUADROS
========================================================== */

.tm-mm-category,
.tm-mm-category:hover{
    border-left:
        0 !important;

    border-right:
        0 !important;

    border-top:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


/* ==========================================================
   NADA DE LINEA AMARILLA LATERAL
========================================================== */

.tm-mm-category::before,
.tm-mm-category::after,
.tm-mm-feature::before,
.tm-mm-feature::after{
    display:none !important;
}


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

@media(max-width:760px){

    .tm-mm-body,
    .tm-fit-3 .tm-mm-body,
    .tm-fit-4 .tm-mm-body,
    .tm-fit-5 .tm-mm-body,
    .tm-fit-6 .tm-mm-body,
    .tm-fit-7 .tm-mm-body,
    .tm-fit-8 .tm-mm-body,
    .tm-fit-many .tm-mm-body{
        height:auto !important;

        display:block !important;
    }


    .tm-mm-feature{
        display:none !important;
    }


    .tm-mm-categories,
    .tm-fit-3 .tm-mm-categories,
    .tm-fit-4 .tm-mm-categories,
    .tm-fit-5 .tm-mm-categories,
    .tm-fit-6 .tm-mm-categories,
    .tm-fit-7 .tm-mm-categories,
    .tm-fit-8 .tm-mm-categories,
    .tm-fit-many .tm-mm-categories{
        display:grid !important;

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

        grid-template-rows:
            auto !important;
    }


    .tm-mm-category,
    .tm-fit-3 .tm-mm-category,
    .tm-fit-4 .tm-mm-category,
    .tm-fit-5 .tm-mm-category,
    .tm-fit-6 .tm-mm-category,
    .tm-fit-7 .tm-mm-category,
    .tm-fit-8 .tm-mm-category,
    .tm-fit-many .tm-mm-category{
        grid-template-columns:
            45px
            minmax(0,1fr) !important;

        min-height:
            51px !important;
    }


    .tm-mm-category-image,
    .tm-fit-3 .tm-mm-category-image,
    .tm-fit-4 .tm-mm-category-image,
    .tm-fit-5 .tm-mm-category-image,
    .tm-fit-6 .tm-mm-category-image,
    .tm-fit-7 .tm-mm-category-image,
    .tm-fit-8 .tm-mm-category-image,
    .tm-fit-many .tm-mm-category-image{
        width:
            45px !important;

        height:
            45px !important;
    }

}



/* ==========================================================
   SIDEBAR COMMERCE V2
========================================================== */


/* ==========================================================
   PAGE
========================================================== */

.tm-ref-page-shell{

    width:1360px !important;

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

    display:grid !important;

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

    gap:
        28px !important;

    margin:
        24px auto 50px !important;
}


.tm-ref-sidebar{

    min-width:0;
}


/* ==========================================================
   SECTIONS
========================================================== */

.tm-shop-side-section{

    margin-bottom:
        27px;
}


.tm-shop-side-section h3{

    position:relative;

    margin:
        0 0 12px;

    padding:
        0 0 10px;

    border-bottom:
        1px solid #dedede;

    color:#333e48;

    font-size:13px;
    font-weight:500;
}


.tm-shop-side-section h3::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:35px;
    height:2px;

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


/* ==========================================================
   CATEGORIES
========================================================== */

.tm-shop-category-list{

    margin:0;
    padding:0;

    list-style:none;
}


.tm-shop-category-list li{

    border-bottom:
        1px solid #ededed;
}


.tm-shop-category-list a{

    min-height:31px;

    display:flex;

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

    gap:10px;

    padding:
        5px 2px;

    color:#555 !important;

    font-size:9px;

    text-decoration:none !important;
}


.tm-shop-category-list a:hover{

    color:#0062bd !important;
}


.tm-shop-category-list small{

    color:#aaa;

    font-size:7px;
}


.tm-shop-more{

    display:inline-block;

    margin-top:9px;

    color:#555 !important;

    font-size:8px;

    text-decoration:none;
}


/* ==========================================================
   FILTER GROUP
========================================================== */

.tm-shop-filter-group{

    padding:
        3px 0 15px;

    margin-bottom:12px;

    border-bottom:
        1px solid #ededed;
}


.tm-shop-filter-group h4{

    margin:
        0 0 9px;

    color:#555;

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


.tm-shop-check-list{

    display:flex;

    flex-direction:column;

    gap:6px;
}


.tm-shop-check{

    display:grid;

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

    align-items:center;

    gap:6px;

    color:#666;

    font-size:8px;

    cursor:pointer;
}


.tm-shop-check input{

    width:12px;
    height:12px;

    margin:0;

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


.tm-shop-check small{

    color:#aaa;

    font-size:7px;
}


/* ==========================================================
   PRICE
========================================================== */

.tm-shop-price-values{

    display:flex;

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

    margin-bottom:8px;

    color:#777;

    font-size:7px;
}


.tm-shop-price-sliders{

    display:flex;

    flex-direction:column;

    gap:4px;
}


.tm-shop-price-sliders
input[type="range"]{

    width:100%;

    height:4px;

    margin:0;

    accent-color:var(--tm-primary,#ff7b00);

    cursor:pointer;
}


/* ==========================================================
   CLEAR
========================================================== */

.tm-shop-clear{

    min-height:30px;

    padding:
        0 11px !important;

    border:
        1px solid #ddd !important;

    border-radius:
        5px !important;

    background:#f2f2f2 !important;

    color:#555 !important;

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

    cursor:pointer;
}


.tm-shop-clear:hover{

    border-color:#ccc !important;

    background:#e8e8e8 !important;
}


/* ==========================================================
   PROMO BANNER
========================================================== */

.tm-shop-promo-section{

    margin:
        30px 0 !important;
}


.tm-shop-promo{

    position:relative;

    min-height:225px;

    display:block;

    overflow:hidden;

    padding:
        15px;

    background:
        #f1f1f1;

    color:#333e48 !important;

    text-decoration:none !important;
}


.tm-shop-promo-copy{

    position:relative;

    z-index:2;

    width:72%;
}


.tm-shop-promo-copy small{

    display:block;

    color:#999;

    font-size:6px;

    letter-spacing:.5px;

    text-transform:uppercase;
}


.tm-shop-promo-copy strong{

    display:-webkit-box;

    overflow:hidden;

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

    margin-top:4px;

    color:#333e48;

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

    line-height:1.2;
}


.tm-shop-promo-copy span{

    display:block;

    margin-top:6px;

    color:#333e48;

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


.tm-shop-promo-image{

    position:absolute;

    right:-5px;
    bottom:28px;

    width:145px;
    height:135px;

    display:flex;

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


.tm-shop-promo-image img{

    width:100%;
    height:100%;

    object-fit:contain;
}


.tm-shop-promo-action{

    position:absolute;

    left:15px;
    bottom:14px;

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#555;

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


.tm-shop-promo-action i{

    font-size:6px;
}


/* ==========================================================
   LATEST PRODUCTS
========================================================== */

.tm-shop-latest{

    display:flex;

    flex-direction:column;

    gap:3px;
}


.tm-shop-latest-item{

    display:grid;

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

    gap:9px;

    align-items:center;

    min-height:57px;

    padding:
        5px 0;

    border-bottom:
        1px solid #ededed;

    color:inherit;

    text-decoration:none;
}


.tm-shop-latest-item:last-child{

    border-bottom:0;
}


.tm-shop-latest-image{

    width:48px;
    height:48px;

    display:flex;

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


.tm-shop-latest-image img{

    width:100%;
    height:100%;

    object-fit:contain;
}


.tm-shop-latest-copy{

    min-width:0;
}


.tm-shop-latest-copy strong{

    display:-webkit-box;

    overflow:hidden;

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

    color:#555;

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

    line-height:1.25;
}


.tm-shop-latest-item:hover
.tm-shop-latest-copy strong{

    color:#0062bd;
}


.tm-shop-latest-copy small{

    display:block;

    margin-top:4px;

    color:#333e48;

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


/* ==========================================================
   CONTENT
========================================================== */

.tm-ref-page-content{

    min-width:0;
}


/* ==========================================================
   SINGLE PRODUCT
========================================================== */

body.tm-ref-single
.tm-ref-page-shell{

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


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

@media(max-width:1100px){

    .tm-ref-page-shell{

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

        gap:
            20px !important;
    }

}


@media(max-width:760px){

    .tm-ref-page-shell{

        display:block !important;

        max-width:
            calc(100% - 22px) !important;
    }


    .tm-ref-sidebar{

        margin-bottom:
            28px;
    }


    .tm-shop-promo{

        min-height:
            180px;
    }

}



/* ==========================================================
   REAL SIDEBAR FILTERS V3
========================================================== */

.tm-real-filters-v3{

    margin-top:0 !important;
    margin-bottom:30px !important;
}


/* ==========================================================
   GROUP
========================================================== */

.tm-real-group{

    padding:
        0 0 15px;

    margin-bottom:
        15px;

    border-bottom:
        1px solid #ededed;
}


.tm-real-group-head{

    display:flex;

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

    gap:10px;

    margin-bottom:
        10px;

    cursor:pointer;
}


.tm-real-group-head h4{

    margin:0;

    color:#444;

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


.tm-real-group-head i{

    color:#999 !important;

    font-size:7px;

    transition:
        transform .15s ease;
}


.tm-real-group.collapsed
.tm-real-group-head i{

    transform:
        rotate(180deg);
}


.tm-real-group.collapsed >
*:not(.tm-real-group-head){

    display:none !important;
}


/* ==========================================================
   CHECKBOX
========================================================== */

.tm-real-check{

    min-height:23px;

    display:grid;

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

    align-items:center;

    gap:6px;

    color:#666;

    font-size:8px;

    cursor:pointer;
}


.tm-real-check input{

    width:12px;
    height:12px;

    margin:0;

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


.tm-real-check-name{

    overflow:hidden;

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


.tm-real-check small{

    color:#aaa;

    font-size:7px;
}


.tm-real-checks{

    max-height:210px;

    overflow:auto;

    scrollbar-width:thin;
}


/* ==========================================================
   COLOR
========================================================== */

.tm-real-colors{

    display:flex;

    flex-direction:column;

    gap:2px;
}


.tm-real-color{

    min-height:25px;

    display:grid;

    grid-template-columns:
        13px
        15px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:6px;

    color:#666;

    font-size:8px;

    cursor:pointer;
}


.tm-real-color input{

    width:12px;
    height:12px;

    margin:0;

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


.tm-real-color-dot{

    width:13px;
    height:13px;

    display:block;

    border:
        1px solid #d8d8d8;

    border-radius:50%;
}


.tm-real-color-name{

    overflow:hidden;

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


.tm-real-color small{

    color:#aaa;

    font-size:7px;
}


.tm-real-empty{

    color:#aaa;

    font-size:7px;

    line-height:1.4;
}


/* ==========================================================
   PRICE
========================================================== */

.tm-real-price-labels{

    display:flex;

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

    margin-bottom:8px;

    color:#777;

    font-size:7px;
}


.tm-real-range{

    display:flex;

    flex-direction:column;

    gap:5px;
}


.tm-real-range
input[type="range"]{

    width:100%;

    height:4px;

    margin:0;

    cursor:pointer;

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


/* ==========================================================
   SORT
========================================================== */

.tm-real-sort{

    width:100%;

    min-height:31px;

    padding:
        0 8px;

    border:
        1px solid #ddd;

    border-radius:4px;

    background:#fff;

    color:#555;

    font-size:8px;

    outline:none;
}


.tm-real-sort:focus{

    border-color:#c6c6c6;
}


/* ==========================================================
   ACTIONS
========================================================== */

.tm-real-actions{

    display:flex;

    gap:6px;

    margin-top:3px;
}


.tm-real-apply,
.tm-real-clear{

    min-height:31px;

    padding:
        0 10px !important;

    border-radius:
        5px !important;

    font-size:
        8px !important;

    font-weight:600;

    cursor:pointer;
}


.tm-real-apply{

    flex:1;

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

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

    color:
        #333e48 !important;
}


.tm-real-clear{

    border:
        1px solid #ddd !important;

    background:
        #f3f3f3 !important;

    color:
        #555 !important;
}


.tm-real-result-count{

    margin-top:8px;

    color:#999;

    font-size:7px;

    line-height:1.3;
}


/* ==========================================================
   IMPORTANTE:
   ORDEN DEL SIDEBAR
========================================================== */

/*
 * Categorías
 * ↓
 * Filtros reales
 * ↓
 * Banner
 * ↓
 * Últimos productos
 */

.tm-ref-sidebar{

    display:flex;

    flex-direction:column;
}


.tm-ref-sidebar
.tm-shop-side-section:first-child{

    order:1;
}


.tm-ref-sidebar
.tm-real-filters-v3{

    order:2;
}


.tm-ref-sidebar
.tm-shop-promo-section{

    order:3;
}


/*
 * cualquier sección restante,
 * incluyendo últimos productos
 */

.tm-ref-sidebar
.tm-shop-side-section:not(:first-child):not(.tm-shop-promo-section):not(.tm-real-filters-v3){

    order:4;
}


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

@media(max-width:760px){

    .tm-real-checks{

        max-height:none;
    }

}