/* =========================================================
   MAYORISTA TECNOLOGICO - FINAL HEADER v2
   PrestaShop 9 / Classic
   ========================================================= */

/* ---------------------------------------------------------
   1. TOP CONTACT STRIP
   --------------------------------------------------------- */

#header .header-nav {
    min-height: 24px;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #eeeeee;
    font-size: 11px;
    line-height: 24px;
}

#header .header-nav .container {
    padding-top: 0;
    padding-bottom: 0;
}


/* ---------------------------------------------------------
   2. HEADER CONTAINER
   --------------------------------------------------------- */

#header .header-top {
    padding: 0;
}

#header .header-top .container {
    padding-top: 0;
    padding-bottom: 0;
}

#header .header-top .row {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   3. TRM / SOCIAL STRIP
   --------------------------------------------------------- */

.mayorista-info-strip-row {
    margin: 0;
    min-height: 24px;
}

.mayorista-info-strip {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 10px;
    color: #555555;
    line-height: 20px;
    white-space: nowrap;
}

.mayorista-trm,
.mayorista-social {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mayorista-trm-label {
    font-weight: 600;
    color: #333333;
}

.mayorista-trm-value {
    font-weight: 700;
    color: #333333;
}

.mayorista-info-separator {
    color: #b5b5b5;
    margin: 0 1px;
}

.mayorista-social-label {
    color: #555555;
}

.mayorista-social-link {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mayorista-social-link svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.mayorista-social-link:hover {
    color: #008c44;
    text-decoration: none;
}


/* ---------------------------------------------------------
   4. MAIN DESKTOP ROW: LOGO | SEARCH | ACCOUNT / CART
   --------------------------------------------------------- */

.mayorista-main-header {
    min-height: 66px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-top: 3px;
    padding-bottom: 7px;
}

/*
   Override the original Bootstrap 3 / 6 / 3 distribution.
   24% logo + 52% search + 24% account/cart
*/
.mayorista-main-header > #_desktop_logo {
    flex: 0 0 23%;
    width: 23%;
    max-width: 23%;
}

.mayorista-main-header > .mayorista-search {
    flex: 0 0 55%;
    width: 55%;
    max-width: 55%;
}

.mayorista-main-header > .mayorista-account-cart {
    flex: 0 0 22%;
    width: 22%;
    max-width: 22%;
}


/* ---------------------------------------------------------
   5. LOGO
   --------------------------------------------------------- */

#_desktop_logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 14px;
}

#_desktop_logo h1 {
    margin: 0;
    line-height: 1;
}

#_desktop_logo a {
    display: inline-flex;
    align-items: center;
}

#_desktop_logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 62px;
}


/* ---------------------------------------------------------
   6. SEARCH COLUMN
   --------------------------------------------------------- */

.mayorista-search {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding-left: 4px;
    padding-right: 8px;
    min-width: 0;
}

.mayorista-search #search_widget,
.mayorista-search-widget {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.mayorista-search #search_widget form,
.mayorista-search-widget .mayorista-search-form {
    width: 100%;
}

.mayorista-search-widget .mayorista-search-form {
    height: 36px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 0;
    margin: 0;
    overflow: visible;
}


/* Category selector */

.mayorista-category-control {
    width: 122px;
    min-width: 122px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #b8c1ca;
    border-right: 0;
    color: #666666;
    font-size: 10px;
    line-height: 34px;
    box-sizing: border-box;
    white-space: nowrap;
}

.mayorista-category-arrow {
    font-size: 16px;
    color: #777777;
}


/* Search input */

.mayorista-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
}

.mayorista-search-widget .mayorista-search-input-wrap input {
    position: static;
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 28px 0 30px !important;
    background: #ffffff !important;
    border: 1px solid #b8c1ca !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    color: #444444;
    box-sizing: border-box;
}

.mayorista-search-widget .mayorista-search-input-wrap input:focus {
    outline: none;
    border-color: #0074d9 !important;
}


/* Search icon */

.mayorista-search-input-wrap .material-icons.search {
    position: absolute;
    z-index: 2;
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    font-size: 18px;
    line-height: 20px;
    color: #8a8a8a;
}


/* Clear icon */

.mayorista-search-input-wrap .material-icons.clear {
    position: absolute;
    z-index: 2;
    right: 7px;
    top: 9px;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    font-size: 17px;
    line-height: 18px;
}


/* Blue BUSCAR button */

.mayorista-search-widget .mayorista-search-submit {
    position: static !important;
    display: block !important;
    flex: 0 0 72px;
    width: 72px !important;
    min-width: 72px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;

    background: #0074d9 !important;
    color: #ffffff !important;

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

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
    text-align: center !important;

    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.mayorista-search-widget .mayorista-search-submit:hover {
    background: #0064bc !important;
}

.mayorista-search-submit::before,
.mayorista-search-submit::after {
    display: none !important;
    content: none !important;
}

.mayorista-search-widget form input[type="text"] {
    position: static;
}

.mayorista-search-widget form button {
    position: static;
}


/* ---------------------------------------------------------
   7. ACCOUNT / CART
   --------------------------------------------------------- */

.mayorista-account-cart {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 12px;
    padding-left: 10px;
    padding-right: 8px;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 0;
}

.mayorista-account-cart #_desktop_user_info,
.mayorista-account-cart #_desktop_cart {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

.mayorista-account-cart #_desktop_user_info .user-info,
.mayorista-account-cart #_desktop_cart .blockcart {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0;
}

.mayorista-account-cart #_desktop_user_info a,
.mayorista-account-cart #_desktop_cart a {
    white-space: nowrap;
}

.mayorista-account-cart .material-icons {
    vertical-align: middle;
}



/* Final account spacing */
.mayorista-account-cart #_desktop_user_info .user-info {
    gap: 6px;
}

.mayorista-account-cart #_desktop_user_info .logout {
    margin-right: 2px !important;
}

.mayorista-account-cart #_desktop_cart {
    margin-left: 2px !important;
}

/* Keep TRM/social and account/cart aligned to the same right edge */
.mayorista-info-strip,
.mayorista-account-cart {
    padding-right: 8px;
}

/* ---------------------------------------------------------
   8. GRAY MENU ROW
   --------------------------------------------------------- */

.mayorista-menu-row {
    background: #eeeeee;
    min-height: 40px;
    margin-left: 0;
    margin-right: 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #dddddd;
}

.mayorista-menu-row > div {
    padding-left: 0;
    padding-right: 0;
}

#header .mayorista-menu-row .top-menu {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

#header .mayorista-menu-row .top-menu > li {
    display: block;
    float: none;
    margin: 0;
    flex: 1 1 20%;
}

#header .mayorista-menu-row .top-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    font-size: 10px;
    font-weight: 600;
    color: #222222;
    text-transform: uppercase;
    line-height: 14px;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

#header .mayorista-menu-row .top-menu > li:first-child > a {
    padding-left: 12px;
}

#header .mayorista-menu-row .top-menu > li > a:hover,
#header .mayorista-menu-row .top-menu > li.current > a {
    background: #dddddd;
    color: #008c44;
}


/* ---------------------------------------------------------
   9. MID-SIZE DESKTOP SAFETY
   Keeps the same design from 992px to 1199px.
   --------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199px) {

    #_desktop_logo img {
        max-width: 168px;
        max-height: 54px;
    }

    .mayorista-category-control {
        width: 112px;
        min-width: 112px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 9px;
    }

    .mayorista-search-widget .mayorista-search-submit {
        flex-basis: 66px;
        width: 66px !important;
        min-width: 66px !important;
        font-size: 9px !important;
    }

    .mayorista-account-cart {
        gap: 8px;
        padding-left: 4px;
        font-size: 9px;
    }

    #header .mayorista-menu-row .top-menu > li > a {
        padding-left: 16px;
        padding-right: 16px;
        font-size: 9px;
    }
}


/* ---------------------------------------------------------
   10. LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    #_desktop_logo img {
        max-width: 190px;
    }

    .mayorista-main-header > #_desktop_logo {
        flex-basis: 23%;
        width: 23%;
        max-width: 23%;
    }

    .mayorista-main-header > .mayorista-search {
        flex-basis: 55%;
        width: 55%;
        max-width: 55%;
    }

    .mayorista-main-header > .mayorista-account-cart {
        flex-basis: 22%;
        width: 22%;
        max-width: 22%;
    }
}


/* =========================================================
   MAYORISTA TECNOLOGICO - REFERENCE DESIGN ALIGNMENT v3
   ========================================================= */

/* TOP STRIP */
#header .header-nav {
    min-height: 38px !important;
    background: #fff;
    border-bottom: 0 !important;
    line-height: normal !important;
}
#header .mayorista-top-strip {
    min-height: 38px;
    display: flex;
    align-items: center;
    margin: 0;
}
.mayorista-contact-top {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding-left: 0;
    font-size: 11px;
    white-space: nowrap;
}
.mayorista-phone-icon {
    width: 27px;
    height: 27px;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-12deg);
}
.mayorista-phone-icon svg {
    width: 24px;
    height: 24px;
    fill: #d34cff;
}
.mayorista-phone-text {
    color: #0088ff !important;
    font-weight: 700;
    text-decoration: none !important;
}
.mayorista-contact-separator {
    margin: 0 4px;
    color: #666;
}
.mayorista-email-label {
    color: #333;
    font-weight: 600;
}
.mayorista-email-link {
    margin-left: 2px;
    color: #333 !important;
    text-decoration: none !important;
}
.mayorista-top-actions {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 0;
}
.mayorista-trm-box,
.mayorista-follow-box {
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 27px;
    text-decoration: none !important;
    white-space: nowrap;
}
.mayorista-trm-box {
    min-width: 95px;
    padding: 0 10px;
    background: #123f82;
}
.mayorista-trm-box .mayorista-trm-label,
.mayorista-trm-box .mayorista-trm-value {
    color: #fff !important;
    font-weight: 700;
}
.mayorista-trm-box .mayorista-trm-value { margin-left: 1px; }
.mayorista-follow-box {
    min-width: 92px;
    padding: 0 10px;
    gap: 6px;
    background: #d400b7;
}
.mayorista-instagram-mini {
    width: 16px;
    height: 16px;
    display: inline-flex;
}
.mayorista-instagram-mini svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}
#header .header-top .mayorista-info-strip-row {
    display: none !important;
}

/* MAIN ROW */
.mayorista-main-header {
    min-height: 62px !important;
    padding-top: 5px !important;
    padding-bottom: 7px !important;
}
.mayorista-main-header > #_desktop_logo {
    flex: 0 0 23% !important;
    width: 23% !important;
    max-width: 23% !important;
}
.mayorista-main-header > .mayorista-search {
    flex: 0 0 57% !important;
    width: 57% !important;
    max-width: 57% !important;
}
.mayorista-main-header > .mayorista-account-cart {
    flex: 0 0 20% !important;
    width: 20% !important;
    max-width: 20% !important;
}
#_desktop_logo img {
    max-width: 195px !important;
    max-height: 58px !important;
}

/* SEARCH BOX */
.mayorista-search {
    padding-left: 7px !important;
    padding-right: 9px !important;
}
.mayorista-search-widget {
    width: 100% !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border: 1px solid #d8d8d8 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}
.mayorista-search-widget .mayorista-search-form {
    width: 100% !important;
    height: 30px !important;
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid #0088ff !important;
    box-sizing: border-box !important;
}
.mayorista-category-control {
    width: 138px !important;
    min-width: 138px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-right: 1px solid #0088ff !important;
    background: #fff !important;
    color: #777 !important;
    font-size: 10px !important;
    line-height: 28px !important;
}
.mayorista-category-arrow {
    color: #777 !important;
    font-size: 15px !important;
}
.mayorista-search-input-wrap { height: 28px !important; }
.mayorista-search-widget .mayorista-search-input-wrap input {
    height: 28px !important;
    padding: 0 8px 0 28px !important;
    border: 0 !important;
    background: #fff !important;
    font-size: 10px !important;
    line-height: 28px !important;
}
.mayorista-search-input-wrap .material-icons.search {
    left: 7px !important;
    top: 5px !important;
    font-size: 16px !important;
}
.mayorista-search-input-wrap .material-icons.clear {
    top: 5px !important;
    font-size: 15px !important;
}
.mayorista-search-widget .mayorista-search-submit {
    flex: 0 0 67px !important;
    width: 67px !important;
    min-width: 67px !important;
    height: 28px !important;
    background: #0088ff !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
}

/* ACCOUNT / CART */
.mayorista-account-cart {
    padding-left: 6px !important;
    padding-right: 0 !important;
    gap: 9px !important;
    font-size: 10px !important;
}

/* MENU RECTANGLES */
.mayorista-menu-row {
    min-height: 62px !important;
    background: transparent !important;
    border: 0 !important;
}
.mayorista-menu-row > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#header .mayorista-menu-row .menu,
#header .mayorista-menu-row .top-menu,
#header .mayorista-menu-row .top-menu[data-depth="0"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #eee !important;
}
#header .mayorista-menu-row .top-menu[data-depth="0"] > li,
#header .mayorista-menu-row .top-menu > li {
    flex: 1 1 20% !important;
    width: auto !important;
    max-width: none !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border-right: 1px solid #fff !important;
    background: #eee !important;
}
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:first-child,
#header .mayorista-menu-row .top-menu > li:first-child {
    border-left: 1px solid #fff !important;
}
#header .mayorista-menu-row .top-menu[data-depth="0"] > li > a,
#header .mayorista-menu-row .top-menu > li > a {
    width: 100% !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    background: #eee !important;
    color: #111 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 13px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#header .mayorista-menu-row .top-menu[data-depth="0"] > li > a:hover,
#header .mayorista-menu-row .top-menu > li > a:hover {
    background: #d7d7d7 !important;
    color: #111 !important;
}
#header .mayorista-menu-row .top-menu[data-depth="0"] > li.current > a,
#header .mayorista-menu-row .top-menu > li.current > a,
body#index #header .mayorista-menu-row .top-menu[data-depth="0"] > li:first-child > a,
body#index #header .mayorista-menu-row .top-menu > li:first-child > a {
    background: #c8c8c8 !important;
    color: #111 !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mayorista-contact-top { font-size: 9px; }
    .mayorista-phone-icon { width: 22px; height: 22px; }
    .mayorista-phone-icon svg { width: 20px; height: 20px; }
    #_desktop_logo img { max-width: 175px !important; }
    .mayorista-category-control {
        width: 118px !important;
        min-width: 118px !important;
    }
}



/* =========================================================
   MAYORISTA TECNOLOGICO - HEADER PRECISION FIX v4
   ========================================================= */

/* A. SEARCH: category + input + BUSCAR must share one exact baseline */
.mayorista-search-widget {
    padding: 6px 9px !important;
}

.mayorista-search-widget .mayorista-search-form {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border: 1px solid #0088ff !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mayorista-category-control {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mayorista-search-input-wrap {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
}

.mayorista-search-widget .mayorista-search-input-wrap input {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mayorista-search-widget .mayorista-search-submit {
    position: static !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 69px !important;
    width: 69px !important;
    min-width: 69px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid #0088ff !important;
    box-sizing: border-box !important;
}

/* B. LOGGED-IN USER: keep Cerrar sesión, hide customer's name link */
.mayorista-account-cart #_desktop_user_info .user-info > a.account {
    display: none !important;
}

/* C. INSTAGRAM: use Maytek logo instead of temporary square/icon */
.mayorista-instagram-link {
    min-width: 98px;
    height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #d400b7;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 27px;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

.mayorista-instagram-link:hover,
.mayorista-instagram-link:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    filter: brightness(0.96);
}

.mayorista-instagram-logo {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    display: inline-block !important;
    overflow: hidden !important;
    background-image: url("../img/instagram-maytek.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

/* D. MENU: fixed old-site-style tiles instead of stretched 20% cells */
#header .mayorista-menu-row .menu,
#header .mayorista-menu-row .top-menu,
#header .mayorista-menu-row .top-menu[data-depth="0"] {
    min-height: 64px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    background: transparent !important;
}

#header .mayorista-menu-row .top-menu[data-depth="0"] > li,
#header .mayorista-menu-row .top-menu > li {
    flex: 0 0 96px !important;
    width: 96px !important;
    max-width: 96px !important;
    min-width: 96px !important;
    min-height: 64px !important;
    border-right: 1px solid #ffffff !important;
    background: #eeeeee !important;
}

#header .mayorista-menu-row .top-menu[data-depth="0"] > li:first-child,
#header .mayorista-menu-row .top-menu > li:first-child {
    border-left: 0 !important;
}

#header .mayorista-menu-row .top-menu[data-depth="0"] > li > a,
#header .mayorista-menu-row .top-menu > li > a {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eeeeee !important;
    color: #111111 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 13px !important;
    box-sizing: border-box !important;
}

/* Current/active tile: darker gray like the reference site */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li.current > a,
#header .mayorista-menu-row .top-menu > li.current > a,
body#index #header .mayorista-menu-row .top-menu[data-depth="0"] > li:first-child > a,
body#index #header .mayorista-menu-row .top-menu > li:first-child > a {
    background: #c8c8c8 !important;
    color: #111111 !important;
}

/* Hover remains distinct but lighter than active */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li > a:hover,
#header .mayorista-menu-row .top-menu > li > a:hover {
    background: #d7d7d7 !important;
    color: #111111 !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    #header .mayorista-menu-row .top-menu[data-depth="0"] > li,
    #header .mayorista-menu-row .top-menu > li,
    #header .mayorista-menu-row .top-menu[data-depth="0"] > li > a,
    #header .mayorista-menu-row .top-menu > li > a {
        flex-basis: 90px !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }
}


/* =========================================================
   MAYORISTA - INSTAGRAM ASSET SAFETY FIX v4.1
   ========================================================= */
.mayorista-instagram-link {
    overflow: hidden !important;
}

.mayorista-instagram-link .mayorista-instagram-logo {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}



/* =========================================================
   MAYORISTA TECNOLOGICO - HEADER PRECISION FIX v4.2
   Search alignment + transparent Instagram + icon menu
   ========================================================= */

/* ---------------------------------------------------------
   1. SEARCH - ONE EXACTLY ALIGNED ROW
   --------------------------------------------------------- */

/* Outer search frame */
.mayorista-search-widget {
    width: 100% !important;
    height: 46px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #d8d8d8 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* The blue inner line */
.mayorista-search-widget .mayorista-search-form {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

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

    border: 1px solid #0088ff !important;
    background: #ffffff !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Category */
.mayorista-category-control {
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;

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

    margin: 0 !important;
    padding: 0 10px !important;

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

    border: 0 !important;
    border-right: 1px solid #0088ff !important;
    background: #ffffff !important;

    color: #666666 !important;
    font-size: 10px !important;
    line-height: normal !important;

    box-sizing: border-box !important;
}

/* Search input wrapper */
.mayorista-search-input-wrap {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;

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

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

/* Search input */
.mayorista-search-widget .mayorista-search-input-wrap input {
    width: 100% !important;

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

    margin: 0 !important;
    padding: 0 28px 0 28px !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;

    color: #444444 !important;
    font-size: 10px !important;
    line-height: 30px !important;

    box-sizing: border-box !important;
}

/* Search icon */
.mayorista-search-input-wrap .material-icons.search {
    position: absolute !important;
    left: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

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

    font-size: 16px !important;
    line-height: 16px !important;
}

/* Clear icon */
.mayorista-search-input-wrap .material-icons.clear {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

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

    font-size: 15px !important;
    line-height: 15px !important;
}

/* BUSCAR */
.mayorista-search-widget .mayorista-search-submit {
    position: static !important;

    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;

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

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

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

    border: 0 !important;
    border-left: 1px solid #0088ff !important;
    border-radius: 0 !important;

    background: #0088ff !important;
    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   2. INSTAGRAM - NO PINK RECTANGLE
   --------------------------------------------------------- */

.mayorista-instagram-link,
.mayorista-instagram-plain {
    min-width: 0 !important;
    width: auto !important;
    height: 27px !important;

    padding: 0 3px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    background: transparent !important;
    border: 0 !important;

    color: #333333 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 27px !important;

    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.mayorista-instagram-link:hover,
.mayorista-instagram-link:focus,
.mayorista-instagram-plain:hover,
.mayorista-instagram-plain:focus {
    background: transparent !important;
    color: #0088ff !important;
    filter: none !important;
}

.mayorista-instagram-logo {
    flex: 0 0 18px !important;

    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

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

    display: inline-block !important;

    background-image: url("../img/instagram-maytek.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   3. MENU - LEGACY STYLE TILES WITH ICONS ABOVE TEXT
   --------------------------------------------------------- */

.mayorista-menu-row {
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#header .mayorista-menu-row .menu,
#header .mayorista-menu-row .top-menu,
#header .mayorista-menu-row .top-menu[data-depth="0"] {
    width: auto !important;
    max-width: none !important;
    min-height: 64px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

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

    background: transparent !important;
}

/* Equal legacy-style tiles */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li,
#header .mayorista-menu-row .top-menu > li {
    position: relative !important;

    flex: 0 0 98px !important;
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;

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

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

    float: none !important;

    border-left: 0 !important;
    border-right: 1px solid #ffffff !important;

    background: #eeeeee !important;
}

/* Link: vertical icon + label */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li > a,
#header .mayorista-menu-row .top-menu > li > a {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;

    margin: 0 !important;
    padding: 7px 5px 6px !important;

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

    gap: 3px !important;

    background: #eeeeee !important;
    color: #111111 !important;

    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 12px !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
}

/* Material-icons pseudo icon */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li > a::before,
#header .mayorista-menu-row .top-menu > li > a::before {
    display: block !important;

    margin: 0 0 2px 0 !important;

    font-family: "Material Icons" !important;
    font-size: 18px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 18px !important;

    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;

    direction: ltr !important;
    -webkit-font-feature-settings: "liga" !important;
    -webkit-font-smoothing: antialiased !important;

    color: #111111 !important;
}



/* =========================================================
   MAYORISTA TECNOLOGICO - MAIN MENU ICONS
   Current order:
   1 TIENDA
   2 MARCAS
   3 CONTACTO
   4 CATALOGO
   5 MI COMPRA
   6 MI CUENTA
   ========================================================= */

/* 1 - TIENDA */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:nth-child(1) > a::before,
#header .mayorista-menu-row .top-menu > li:nth-child(1) > a::before {
    content: "storefront" !important;
}

/* 2 - MARCAS */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:nth-child(2) > a::before,
#header .mayorista-menu-row .top-menu > li:nth-child(2) > a::before {
    content: "apps" !important;
}

/* 3 - CONTACTO */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:nth-child(3) > a::before,
#header .mayorista-menu-row .top-menu > li:nth-child(3) > a::before {
    content: "phone_in_talk" !important;
}

/* 4 - CATALOGO */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:nth-child(4) > a::before,
#header .mayorista-menu-row .top-menu > li:nth-child(4) > a::before {
    content: "layers" !important;
}

/* 5 - MI COMPRA */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:nth-child(5) > a::before,
#header .mayorista-menu-row .top-menu > li:nth-child(5) > a::before {
    content: "favorite_border" !important;
}

/* 6 - MI CUENTA */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:nth-child(6) > a::before,
#header .mayorista-menu-row .top-menu > li:nth-child(6) > a::before {
    content: "account_circle" !important;
}




/* Hover */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li > a:hover,
#header .mayorista-menu-row .top-menu > li > a:hover {
    background: #dddddd !important;
    color: #111111 !important;
}

/* Active/current item */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li.current > a,
#header .mayorista-menu-row .top-menu > li.current > a,
body#index #header .mayorista-menu-row .top-menu[data-depth="0"] > li:first-child > a,
body#index #header .mayorista-menu-row .top-menu > li:first-child > a {
    background: #c8c8c8 !important;
    color: #111111 !important;
}


/* ---------------------------------------------------------
   4. ALIGN MENU WITH CONTENT CONTAINER
   --------------------------------------------------------- */

#header .mayorista-menu-row > .position-static {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}


/* ---------------------------------------------------------
   5. MID-SIZE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199px) {
    #header .mayorista-menu-row .top-menu[data-depth="0"] > li,
    #header .mayorista-menu-row .top-menu > li {
        flex-basis: 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
    }
}

/* =========================================================
   MAYORISTA - FINAL SEARCH ALIGNMENT + CENTERED MENU
   ========================================================= */

/* SEARCH BUTTON: hard-lock to same row as category + input */
.mayorista-search-widget .mayorista-search-form {
    position: relative !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.mayorista-search-widget .mayorista-search-submit {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;

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

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

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

    transform: none !important;
    vertical-align: top !important;

    line-height: 30px !important;
    box-sizing: border-box !important;
}

/* Remove any inherited theme offsets */
.mayorista-search-widget form button,
.mayorista-search-widget button[type="submit"] {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}


/* CENTER THE MENU GROUP */
#header .mayorista-menu-row > .position-static {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
}

#header .mayorista-menu-row .menu,
#header .mayorista-menu-row .top-menu,
#header .mayorista-menu-row .top-menu[data-depth="0"] {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}


/* =========================================================
   MAYORISTA - MARCAS ICON
   MARCAS is now a real PrestaShop menu label
   ========================================================= */

/* Second menu option: MARCAS */
#header .mayorista-menu-row .top-menu[data-depth="0"] > li:nth-child(2) > a::before,
#header .mayorista-menu-row .top-menu > li:nth-child(2) > a::before {
    content: "apps" !important;
}

/* =========================================================
   CMS PAGES - Wider content area
   Mayorista Tecnológico
   ========================================================= */

body#cms .page-content.page-cms {
    width: 100%;
    max-width: none;
}

body#cms .page-content.page-cms .cms-page-content {
    width: 100%;
    max-width: none;
}

/* Prevent CMS text from being constrained to a narrow column */
body#cms .page-content {
    width: 100%;
}

body#cms #content {
    width: 100%;
}

/* Mayorista Tecnológico - CMS legal/information pages */
body#cms .mayorista-cms-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
}

body#cms .mayorista-cms-content p {
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    line-height: 1.6;
}

body#cms .mayorista-cms-content h2 {
    margin: 0 0 20px;
}

body#cms .mayorista-cms-content h3 {
    margin: 24px 0 12px;
}


/* =========================================================
   MAYORISTA TECNOLOGICO - ACTIVE MENU BY CONTROLLER
   ========================================================= */

/* TIENDA */
body#index #header .mayorista-menu-row .top-menu > li:nth-child(1) > a,

/* MARCAS */
body#manufacturer #header .mayorista-menu-row .top-menu > li:nth-child(2) > a,

/* CONTACTO */
body#contact #header .mayorista-menu-row .top-menu > li:nth-child(3) > a,

/* CATALOGO */
body#module-mayoristacatalog-catalog #header .mayorista-menu-row .top-menu > li:nth-child(4) > a,

/* MI COMPRA */
body#cart #header .mayorista-menu-row .top-menu > li:nth-child(5) > a,

/* MI CUENTA */
body#identity #header .mayorista-menu-row .top-menu > li:nth-child(6) > a,
body#my-account #header .mayorista-menu-row .top-menu > li:nth-child(6) > a,
body#authentication #header .mayorista-menu-row .top-menu > li:nth-child(6) > a {
    background: #c8c8c8 !important;
    color: #111111 !important;
}

/* =========================================================
   MAYORISTA - IVA DISPLAY CLEANUP
   ========================================================= */

/* 1. Add-to-cart popup */
#blockcart-modal .product-tax {
    display: none !important;
}

/* 2. Checkout summary */
#js-checkout-summary .cart-summary-totals > .cart-summary-line:last-child {
    display: none !important;
}

/* 3. Shopping cart page */
#cart .cart-summary-totals > .cart-summary-line:last-child {
    display: none !important;
}

/* =========================================================
   MAYORISTA - STOREFRONT FINAL CLEANUP
   ========================================================= */

/* 1. Hide reassurance/policy block:
      Pago seguro
      Envíos a nivel nacional
      Devoluciones
   Footer policy links are NOT affected.
*/
.blockreassurance_product {
    display: none !important;
}


/* 2. Pure white background across storefront pages */
html,
body,
#wrapper,
#main,
#content,
#content-wrapper,
.container,
#cart,
#checkout {
    background-color: #ffffff !important;
}


/* =========================================================
   MAYORISTA TECNOLOGICO - STOREFRONT FINAL QA FIXES
   25-09-2026
   ========================================================= */


/* =========================================================
   1. PURE WHITE STOREFRONT BACKGROUND
   ========================================================= */

html,
body,
#wrapper,
#main,
#content,
#content-wrapper,
.page-wrapper,
main {
    background-color: #ffffff !important;
}


/* =========================================================
   2. HIDE PRODUCT REASSURANCE BLOCK
   Pago seguro / Envíos a nivel nacional / Devoluciones
   ========================================================= */

.blockreassurance_product,
#block-reassurance,
.product-information .blockreassurance_product,
.product-additional-info .blockreassurance_product,
.cart-grid .blockreassurance_product,
.checkout .blockreassurance_product {
    display: none !important;
}


/* =========================================================
   3. HIDE IVA BREAKDOWN
   Keep TOTAL (IVA incl.) visible.
   Only hide the separate "Incluido IVA: $..." line.
   ========================================================= */

/* Cart page */
body#cart .cart-summary-line.cart-summary-subtotals {
    display: none !important;
}

/* Checkout */
body#checkout .cart-summary-line.cart-summary-subtotals {
    display: none !important;
}

/* Add-to-cart popup */
#blockcart-modal .product-tax {
    display: none !important;
}


/* =========================================================
   4. WHATSAPP FLOATING BUTTON - ALL NORMAL STOREFRONT PAGES
   ========================================================= */

.mayorista-whatsapp-fab {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;

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

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

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

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

    background: #25D366 !important;

    cursor: pointer !important;
    z-index: 9999 !important;

    box-shadow: 0 3px 10px rgba(0,0,0,.22) !important;
}


/* WhatsApp SVG */
.mayorista-whatsapp-fab svg {
    display: block !important;

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

    fill: #ffffff !important;
    color: #ffffff !important;
}


/* Hover */
.mayorista-whatsapp-fab:hover,
.mayorista-whatsapp-fab:focus {
    background: #20bd5a !important;
    outline: none !important;
}


/* WhatsApp contact panel */
.mayorista-whatsapp-panel {
    position: fixed !important;

    right: 22px !important;
    bottom: 88px !important;

    z-index: 9998 !important;
}


/* Never display panel when HTML hidden attribute is present */
.mayorista-whatsapp-panel[hidden] {
    display: none !important;
}


/* =========================================================
   5. MOBILE WHATSAPP POSITION
   ========================================================= */

@media (max-width: 767px) {

    .mayorista-whatsapp-fab {
        right: 14px !important;
        bottom: 14px !important;

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        min-height: 52px !important;
    }

    .mayorista-whatsapp-fab svg {
        width: 28px !important;
        height: 28px !important;
    }

    .mayorista-whatsapp-panel {
        right: 14px !important;
        bottom: 76px !important;
    }
}

/* =========================================================
   MAYORISTA - Checkout order details expanded by default
   ========================================================= */

body#checkout #cart-summary-product-list {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Mayorista - larger navigation buttons */
@media (min-width: 768px) {
  .mayorista-menu a {
    width: 128px;
    height: 93px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* MAYORISTA MENU 128x93 */
@media (min-width: 992px) {
#header .mayorista-menu-row { min-height: 93px !important; }
#header .mayorista-menu-row .top-menu { min-height: 93px !important; }
#header .mayorista-menu-row .top-menu > li { flex: 0 0 128px !important; width: 128px !important; min-width: 128px !important; max-width: 128px !important; height: 93px !important; min-height: 93px !important; max-height: 93px !important; }
#header .mayorista-menu-row .top-menu > li > a { height: 93px !important; min-height: 93px !important; max-height: 93px !important; padding: 12px 6px !important; }
}