/********************************************************
			Codezeel Custom Styles
********************************************************/

.cz-carousel {
    display: none;
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    -ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper {
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    float: left;
    width: 100%;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
    float: left;
}

.owl-carousel .owl-item .manu_image a {
    display: inline-block;
}

.owl-carousel .owl-item .manu_image a img {
    max-width: 100%;
}

.owl-carousel .owl-item:hover a img {
    border-color: blue;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
    /* fix */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    text-align: center;
}


/* mouse grab icon */

.grabbing {
    cursor: url("../img/codezeel/grabbing.png") 8 8, move;
}

.customNavigation {
    position: absolute;
    width: 40px;
    top: -50px;
    right: 30px;
    direction: ltr !important;
}

.customNavigation a {
    font-size: 0px;
    position: absolute;
    font-weight: 300;
    height: 30px;
    width: 30px;
    line-height: 38px;
    padding: 0px;
    color: #000000;
    cursor: pointer;
    overflow: hidden;
    margin: 0 7px;
    -webkit-transition: all 0.5s ease;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.customNavigation a:before {
    font-family: "FontAwesome";
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    color: #cdcdcd;
}

.customNavigation a.prev:before {
    content: "\f177";
}

.customNavigation a.next:before {
    content: "\f178";
}

.customNavigation a:hover:before {
    color: #b89a7b;
}

.customNavigation a.prev {
    left: -20px;
    background-position: 2px -16px;
}

.customNavigation a.next {
    right: -20px;
    background-position: -86px -16px;
}

.customNavigation a.prev:hover {
    background-position: 2px -68px;
}

.customNavigation a.next:hover {
    background-position: -86px -68px;
}

.images-container .js-qv-mask .customNavigation a.next:hover {
    background-position: -86px -111px;
}

.images-container .js-qv-mask .customNavigation a.prev:hover {
    background-position: 2px -111px;
}

@media (max-width:680px) {
    .lastest_block .customNavigation {
        top: -44px;
    }
}

#czleftbanner ul {
    margin-bottom: 35px;
    clear: both;
}

#czleftbanner img,
#czrightbanner img {
    max-width: 100%;
}

#czleftbanner li,
#czrightbanner li {
    display: inline-block;
}

#czleftbanner li a,
#czrightbanner li a {
    display: inline-block;
    position: relative;
}

#czleftbanner li a:before,
#czrightbanner li a:before {
    background: rgba(255, 255, 255, .5) none repeat scroll 0 0;
    bottom: 20px;
    content: "";
    left: 20px;
    opacity: 1;
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

#czleftbanner li:hover a:before,
#czrightbanner li:hover a:before {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.top_button {
    bottom: 20px;
    cursor: pointer;
    height: 40px;
    padding: 0px 12px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 99;
    font-size: 0px;
    border-radius: 50%;
    background: #b89a7b;
    -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
    animation-name: hvr-icon-bob-float, hvr-icon-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

.top_button:before {
    color: #fff;
    content: "\f106";
    font-family: "FontAwesome";
    font-size: 22px;
    line-height: 37px;
    font-weight: 300;
}

.top_button:after {
    border: 2px solid #b89a7b;
    border-radius: 50%;
    bottom: -5px;
    height: 50px;
    opacity: 1;
    right: -5px;
    content: "";
    position: absolute;
    width: 50px;
    animation: blink 2s steps(5, start) infinite;
    -webkit-animation: blink 1s steps(5, start) infinite;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}

.top_button:hover:after {
    animation: unset;
    -webkit-animation: unset;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink {
    to {
        visibility: hidden;
    }
}


/* Flexslider */

#index .spinner {
    background: url(../img/codezeel/loading.gif) no-repeat center center #f6f4f2;
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100000;
    background-size: 14%;
}


/* Icon Bob */

@-webkit-keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes hvr-icon-bob {
    0% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    50% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@-webkit-keyframes hvr-icon-bob-float {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes hvr-icon-bob-float {
    100% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}


/* Asegura que cada imagen tenga el mismo tamaño */

.brands {
    padding: 70px 0 70px !important;
}

#brand-carousel .brand-image img {
    max-width: 100%;
    width: 180px;
    /* o ajusta según necesidad */
    height: 90px;
    /* mantiene proporción visual */
    object-fit: contain;
    /* evita que se deformen */
    display: block;
    margin: 0 auto;
    /* centrado horizontal */
}


/* Alinea el contenido dentro de cada .item */

#brand-carousel .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    /* asegura espacio vertical uniforme */
}


/* Alineación vertical de las imágenes */

#brand-carousel .brand-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Ocultar SOLO las imágenes de subcategorías (deja los nombres) */
.subcategories-list .subcategory-image {
  display: none !important;
}

/* Ajuste por si queda hueco raro */
.subcategories-list li {
  padding-top: 0 !important;
}

#js-product-list-top .total-products p {
  display: none !important;
}

/* ===== Header: colocar el megamenú junto al logo sin tocar iconos ===== */
@media (min-width: 992px) {

  /* Logo en línea */
  #header .header-top .header_logo{
    display: inline-block;
    vertical-align: middle;
  }

  /* ===== NORMAL (no sticky) =====
     Quitamos el comportamiento de "bloque" que lo baja debajo del logo */
  #header .header-top:not(.fixed) .header-top-inner{
    display: inline-block !important;
    vertical-align: middle;
    width: auto !important;
    clear: none !important;
    float: none !important;
    margin-left: 30px; /* separación logo -> menú */
  }

  #header .header-top:not(.fixed) .header-top-inner > nav.leo-megamenu{
    display: inline-block !important;
    vertical-align: middle;
    width: auto !important;
    clear: none !important;
    float: none !important;
  }

  /* UL horizontal */
  #header .leo-top-menu > ul.megamenu.horizontal{
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  /* ===== SOLO HOME: ===== */
  body#index #header .header-top:not(.fixed) .header-top-inner > nav.leo-megamenu,
  body.page-index #header .header-top:not(.fixed) .header-top-inner > nav.leo-megamenu{
    display: none !important;
  }

  /* ===== STICKY (fixed): ===== */
  #header .header-top.fixed .header-top-inner{
    display: inline-block !important;
  }

  #header .header-top.fixed .header-top-inner > nav.leo-megamenu{
    display: inline-block !important;
  }
}

.leo-top-menu{
padding-top: 15%;
}

.menu-title:hover{
color:#ffffff !important;
}

/* ===== OCULTAR megamenú en móvil y tablet ===== */
@media (max-width: 991px) {
  #header nav.leo-megamenu{
    display: none !important;
  }
}

.input-group-btn button[data-action="show-password"] {
  display: none !important;
}