/* ==========================================================
   TIENDA MOYA
   MEGA MENU V7
   CLEAN VISUAL COMMERCE
========================================================== */

:root{
    --tm7-dark:#333e48;
    --tm7-blue:#0062bd;
    --tm7-gray:#85898d;
    --tm7-light:#f7f7f7;
    --tm7-line:#ebebeb;
    --tm7-yellow:var(--tm-primary,#ff7b00);
}


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

body .yellow-menu
.mega-panel.tm7-ready{

    width:min(
        1040px,
        calc(100vw - 34px)
    ) !important;

    height:310px !important;

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

    padding:0 !important;

    overflow:hidden !important;

    border:0 !important;

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

    background:#fff !important;

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


body .yellow-menu
.departments-mega
.mega-panel.tm7-ready{

    width:min(
        1120px,
        calc(100vw - 34px)
    ) !important;
}


/*
 * Todo lo anterior queda fuera.
 */

.tm7-ready >
*:not(.tm7-shell){

    display:none !important;
}


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

.tm7-shell{

    width:100%;
    height:100%;

    display:grid;

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

    background:#fff;
}


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

.tm7-head{

    display:flex;

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

    gap:20px;

    padding:
        0 19px;

    border-bottom:
        1px solid var(--tm7-line);

    background:#fff;
}


.tm7-heading{

    min-width:0;

    display:flex;

    align-items:baseline;

    gap:10px;
}


.tm7-heading small{

    color:#aaa;

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

    letter-spacing:.55px;

    text-transform:uppercase;
}


.tm7-heading strong{

    overflow:hidden;

    color:var(--tm7-dark);

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

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


.tm7-view-all{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#777 !important;

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

    text-decoration:none !important;
}


.tm7-view-all:hover{

    color:#111 !important;
}


.tm7-view-all i{

    color:inherit !important;

    font-size:7px;
}


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

.tm7-body{

    min-height:0;

    display:grid;

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

    gap:22px;

    padding:
        16px 19px 17px;
}


/* variantes sin hacerlas desordenadas */

.tm7-variant-2
.tm7-body{

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


.tm7-variant-2
.tm7-hero{

    grid-column:3;
    grid-row:1;
}


.tm7-variant-2
.tm7-categories{

    grid-column:2;
    grid-row:1;
}


.tm7-variant-2
.tm7-products{

    grid-column:1;
    grid-row:1;
}



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

.tm7-hero{

    min-width:0;

    display:grid;

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

    color:inherit;

    text-decoration:none;
}


.tm7-hero-image{

    position:relative;

    min-height:0;

    display:flex;

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

    overflow:hidden;

    background:#f7f7f7;
}


.tm7-hero-image img{

    width:100%;
    height:100%;

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

    padding:9px;

    object-fit:contain;

    transform:
        scale(1);

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


.tm7-hero:hover
.tm7-hero-image img{

    transform:
        scale(1.055);
}


.tm7-hero-image img.tm7-changing{

    opacity:.12;
}


.tm7-hero-copy{

    padding-top:8px;
}


.tm7-hero-copy small{

    display:block;

    color:#aaa;

    font-size:7px;

    letter-spacing:.45px;

    text-transform:uppercase;
}


.tm7-hero-copy strong{

    display:-webkit-box;

    overflow:hidden;

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

    margin-top:3px;

    color:var(--tm7-dark);

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

    line-height:1.28;
}


.tm7-hero-action{

    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:5px;

    color:#555;

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


.tm7-hero-action i{

    color:#999 !important;

    font-size:7px;
}


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

.tm7-categories{

    min-width:0;

    display:grid;

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

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

    align-content:center;

    gap:
        0 22px;
}


/*
 * SIN tarjetas.
 * SIN recuadros.
 * Solo composición limpia.
 */

.tm7-category{

    position:relative;

    min-width:0;

    display:grid;

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

    align-items:center;

    gap:9px;

    padding:
        5px 0;

    border:0 !important;

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

    border-radius:0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:inherit;

    text-decoration:none;
}


.tm7-category:nth-last-child(-n+2){

    border-bottom:
        0 !important;
}


.tm7-category-image{

    width:58px;
    height:58px;

    display:flex;

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

    overflow:hidden;
}


.tm7-category-image img{

    width:100%;
    height:100%;

    padding:3px;

    object-fit:contain;

    transform:
        scale(1);

    transition:
        transform .17s ease;
}


.tm7-category:hover
.tm7-category-image img,
.tm7-category.active
.tm7-category-image img{

    transform:
        scale(1.12);
}


.tm7-category-copy{

    min-width:0;
}


.tm7-category-copy strong{

    display:block;

    overflow:hidden;

    color:#444;

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

    line-height:1.25;

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


.tm7-category-copy small{

    display:block;

    overflow:hidden;

    margin-top:3px;

    color:#aaa;

    font-size:7px;

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


.tm7-category > i{

    color:#c4c4c4 !important;

    font-size:7px;

    transition:
        transform .15s ease,
        color .15s ease;
}


.tm7-category:hover
.tm7-category-copy strong,
.tm7-category.active
.tm7-category-copy strong{

    color:var(--tm7-blue);
}


.tm7-category:hover > i,
.tm7-category.active > i{

    color:#555 !important;

    transform:
        translateX(2px);
}


/* ==========================================================
   PRODUCTOS DESTACADOS
========================================================== */

.tm7-products{

    min-width:0;

    display:grid;

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

    gap:14px;

    padding-left:20px;

    border-left:
        1px solid var(--tm7-line);
}


.tm7-variant-2
.tm7-products{

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

    border-left:0;

    border-right:
        1px solid var(--tm7-line);
}


.tm7-product{

    min-width:0;

    display:grid;

    grid-template-rows:
        145px
        auto;

    color:inherit;

    text-decoration:none;
}


.tm7-product:first-child{

    padding-right:13px;

    border-right:
        1px solid #eee;
}


.tm7-product-image{

    display:flex;

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

    overflow:hidden;
}


.tm7-product-image img{

    width:100%;
    height:100%;

    max-width:120px;
    max-height:135px;

    padding:5px;

    object-fit:contain;

    transition:
        transform .18s ease;
}


.tm7-product:hover
.tm7-product-image img{

    transform:
        scale(1.055);
}


.tm7-product-copy small{

    display:block;

    overflow:hidden;

    color:#aaa;

    font-size:6px;

    letter-spacing:.35px;

    text-transform:uppercase;

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


.tm7-product-copy strong{

    display:-webkit-box;

    overflow:hidden;

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

    margin-top:3px;

    min-height:25px;

    color:#444;

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

    line-height:1.3;
}


.tm7-product-copy span{

    display:block;

    margin-top:4px;

    color:#333e48;

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


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

/*
 * Si solo hay 3 o 4:
 * thumbnails realmente grandes,
 * pero TODO sigue alineado.
 */

.tm7-count-3
.tm7-categories{

    grid-template-columns:
        1fr;
}


.tm7-count-3
.tm7-category{

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


.tm7-count-3
.tm7-category-image{

    width:76px;
    height:76px;
}


.tm7-count-3
.tm7-category-copy strong{

    font-size:10px;
}


.tm7-count-4
.tm7-category{

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


.tm7-count-4
.tm7-category-image{

    width:68px;
    height:68px;
}


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

.tm7-count-many
.tm7-category{

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

    padding:
        3px 0;
}


.tm7-count-many
.tm7-category-image{

    width:48px;
    height:48px;
}


/* ==========================================================
   DEPARTMENTS
========================================================== */

.departments-mega
.tm7-body{

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


.departments-mega
.tm7-categories{

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

    gap:
        0 16px;
}


.departments-mega
.tm7-category{

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


.departments-mega
.tm7-category-image{

    width:48px;
    height:48px;
}


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

@media(max-width:760px){

    body .yellow-menu
    .mega-panel.tm7-ready{

        width:100% !important;

        height:auto !important;

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


    .tm7-shell{

        display:block;
    }


    .tm7-head{

        min-height:42px;
    }


    .tm7-body,
    .tm7-variant-2 .tm7-body,
    .departments-mega .tm7-body{

        display:block;

        padding:
            10px 12px 14px;
    }


    .tm7-hero,
    .tm7-products{

        display:none;
    }


    .tm7-categories,
    .tm7-count-3 .tm7-categories,
    .departments-mega .tm7-categories{

        display:grid;

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

        gap:
            0 12px;
    }


    .tm7-category,
    .tm7-count-3 .tm7-category,
    .tm7-count-4 .tm7-category,
    .tm7-count-many .tm7-category{

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


    .tm7-category-image,
    .tm7-count-3 .tm7-category-image,
    .tm7-count-4 .tm7-category-image,
    .tm7-count-many .tm7-category-image{

        width:44px;
        height:44px;
    }

}