/* mobile responsive header */
/* general */
.d-none {
    display:none!important;
}
.d-block {
    display: block!important;
}
.d-flex {
    display:flex!important;
}

@media (min-width:1439px) {
    .d-xl-block {
        display: block!important;
    }
    .d-xl-flex {
        display:flex!important;
    }
    .d-xl-none {
        display:none;
    }
}

@media (min-width:999px) {
    .d-lg-block {
        display: block!important;
    }
    .d-lg-flex {
        display:flex!important;
    }
    .d-lg-none {
        display:none!important;
    }
}

@media (min-width:767px) {
    .d-md-block {
        display: block!important;
    }
    .d-md-flex {
        display:flex!important;
    }
    .d-md-none {
        display:none!important;
    }
}

@media (min-width:424px) {
    .d-sm-block {
        display: block!important;
    }
    .d-sm-flex {
        display:flex!important;
    }
    .d-sm-none {
        display:none!important;
    }
}
.w-25 {
    width:25%;
}
.w-30 {
    width:30%
}
.w-50 {
    width:50%;
}
.w-70 {
    width:65%;
}
.w-75 {
    width: 75%;
}
.w-90 {
    width:90%;
}
.w-100 {
    width:100%;
}

.flex-item {
    flex:1;
}
.flex-item-2 {
    flex:2
}
.px-0 {
    padding-left:0pc!important;
    padding-right:0px!important;
}
/* specific */
@media (max-width: 999px) {
    .cbp-mobilesubmenu {
        width: 100vw;
    }
    .header-left-menu-block {
        flex-direction:row-reverse;
    }

    div#top-header-main-block {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin: auto;
        align-items: center;
        padding: 5px 0px;
    }
    .header-left-block {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }
    .header-left-menu-block {
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
    }
    #mobile-logo {
        width:30px;
        margin-left: 3px;
    }

    .cbp-mobilesubmenu {
        position: absolute;
        margin-top: 0px !important;
        left: -17.5px;
        border-bottom:none!important;
    }
    #iqitmegamenu-mobile .iqitmegamenu-icon {
        margin: 0px !important;
        padding: 0px !important;
        max-width: 100%;
    }
    #mobile-centered-header #searchbox {
        display: block;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        min-height:41px;
        margin-top: 2px;
    }
    #mobile-centered-header input#search_query_top, #mobile-centered-header input#search_query_top:hover, #mobile-centered-header input#search_query_top:focus, #mobile-centered-header input#search_query_top:active {
        border: none;
        outline: none;
        box-shadow: none;
    }
    #mobile-centered-header input#search_query_top {
        height: 33px;
        margin-top: 3px;
    }
    #mobile-centered-header span.input-group-btn {
        position: absolute;
        right: 16px;
        z-index: 3;
        padding-right: 5px;
    }

    #mobile-centered-header button.btn.btn-default.button-search {
        background: unset;
        padding: 7px 0px;
        vertical-align: middle;
        z-index: 3;
        width:35px;
        margin-left:-17px;
    }

    /* div#iqitmegamenu-horizontal {
        background: transparent!important;
    } */

    .header-right-block {
        align-items: center;
        justify-content: end;
        flex-direction: row-reverse;
        column-gap: 1vw;
    }
    #header .user-info.btn-group-lg, #header .shopping_cart .btn-cart-left {
        position:static!important;
    }
    #header .shopping_cart .btn-cart-left i:before {
        background-size: 25px;
    }
    #header .user-info.btn-group-lg .btn > .icon-user, #header .shopping_cart .btn-cart-left i {
        width: 28px!important;
        height: 28px!important;
    }

    #header .user-info.btn-group-lg .btn > .icon-user:before {
        background-size: 28px;
    }
    .cbp-spmenu-body.cbp-spmenu-push-toright #page .columns-container,
    .cbp-spmenu-body.cbp-spmenu-push-toright #page .header-right-block,
    .cbp-spmenu-body.cbp-spmenu-push-toright #page #mobile-centered-header,
    .cbp-spmenu-body.cbp-spmenu-push-toright #page .navbar.navbar-default.navbar-top{
        filter: blur(2px);
        opacity: 0.6;
    }
    .cbp-spmenu-body.cbp-spmenu-push-toright .ui-menu.ui-jolisearch {
        filter: blur(2px);
    }
}
@media (max-width: 1200px) and (min-width: 999px) {
    #cbp-hrmenu.cbp-horizontal > ul > li > a .cbp-mainlink-iicon {
        display: none;
    }
    #header #iqitmegamenu-horizontal .user-info {
        padding-right: 10px;
        padding-left: 20px;
    }
}
#header .shopping_cart .btn-cart-left i:before {
    background-size: 25px;
}
#header .user-info.btn-group-lg .btn > .icon-user, #header .shopping_cart .btn-cart-left i {
    width: 28px!important;
    height: 28px!important;
}

#header .user-info.btn-group-lg .btn > .icon-user:before {
    background-size: 28px;
}
.header-left.col-sm-4.col-md-2 {
    padding-top : 35px;
}

/* Update 2024 - Home 2024 10 01 */
.px-20 {
    padding-left:20px!important;
    padding-right:20px!important;
    margin-bottom: 20px;
}
@media (min-width:1000px) {
    .main-content > .column > .text-overlay > .title > .normal {
        font-size: clamp(18px, 2vw, 28px);
    }
    .compatible-section {
        margin-bottom:30px;
    }

    #index #columns.container {
        max-width: 100%;
        padding:0px
    }
    #block-homefeatured {
        padding:0px;
    }

    #block-homefeatured .title_block > span{
        float:left;
    }
    #block-home-featured-alt .title_block span {
        float: left;
    }
}
@media (min-width:650px) {
    .product-home-container .product-home-card {
        margin:0px 10px;
    }
}
@media (max-width:650px) {
    #home-featured-product-slider {
        margin: auto;
        width: 95vw;
    }
    .product-home-container .product-home-card {
        margin:0px 5px;
    }
    .product-home-footer, .product-home-header {
        justify-content: center!important;
        align-items: center!important;
        flex-wrap:wrap;
    }
   /* #home-featured-product-slider .product-home-features, #home-featured-product-slider .brazo-escobilla, #home-featured-product-slider .recycle-info {
        display:none;
    }*/

}
.banner {
    background-image: url('/themes/universel/img/section-bg-3.png');
}
.recycle-to-block {
    padding-top: 20px;
    padding-bottom: 20px;
    /*margin-top: 40px; Para bloque debajo de productos */
}
.recycle-to-block.banner.d-block .text-container, .recycle-to-block.banner.d-block .text-container .highlight {
    color: #2b456b;
}

.recycle-to-block > div.container > .d-flex {
    align-items: center;
}
.recycle-to-block iframe {
    width:100%;
    height:auto;
    aspect-ratio: 2/1;
}
.recycle-to-block iframe .html5-video-player {
    background-color:unset;
}
.banner-bluish-grey {
    background-color: #f1f1f1;
    margin-top: 10px;
    margin-bottom: 20px;
}
.banner-bluish-grey .d-flex {
    justify-content: space-between;
    align-items:center;
}
.banner-bluish-grey .text-container.w-70 {
    padding-left: 35px;
    max-width: 100%;
}
.banner-bluish-grey span.large-text {
    display: block;
    font-size: 4rem;
    line-height: 1.8;
}
.banner-bluish-grey p.subtext {
    font-size: clamp(18px, 4vw, 27px);
}

.banner-bluish-grey .text-container,.banner-bluish-grey .text-container .highlight {
    color: #2b456b;
    font-size: clamp(20px, 4vw, 26px);
    line-height: 1.8;
}

.banner-bluish-grey .text-container p.small-subtext {
    color: #000000;
    font-weight: 300;
    font-size: clamp(12px, 1.1vw, 14px);
}
.banner-bluish-grey .image-container img {
    float:right;
    margin-top: 0px;
}
.recycle-left-column img {
    width:100%;
    height:auto;
    opacity: 0.2;
}
.flex-item.recycle-left-column .text-container h2 {
    line-height: 1.8;
}
.recycle-left-column {
    background-image: url('/themes/universel/img/3r-recycle.webp'); /* Set the image as the background */
    background-position: left center; /* Align the background image to the left center */
    background-repeat: no-repeat; /* Ensure the image doesn't repeat */
    background-size: auto 100%; /* Make the image take full height and adjust the width proportionally */
    align-items: center;
    position: relative; /* Needed for the overlay */
}

.recycle-left-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Inherit the same background image */
    background-position: inherit; /* Keep the same positioning */
    background-size: inherit; /* Maintain the size */
    background-repeat: inherit; /* Maintain the no-repeat setting */
    opacity: 0; /* Adjust opacity to your liking */
    z-index: 1; /* Ensure it sits behind the text */
}

.text-container {
    position: relative;
    z-index: 2; /* Ensure the text is on top of the background */
}

/* product slider on homepage */

.slider-items-control.d-flex {
    justify-content: space-between;
    margin-left: -20px;
    margin-right: -20px;
    color: #e4e4e4;
    font-size: 4em;
}

.prev-slide {
    position: relative;
    bottom: 75vh;
    left: 0px;
}

.next-slide {
    position: relative;
    bottom: 75vh;
    right: 0px;
}

.dual-product-block {
    flex-direction: column;
    row-gap: 10px;
    margin: 10px;
}
.dual-product-block  .product-home-card {
    width:100%;
}
.slick-arrow:before {
    color:#07396b;
    font-size:3.5rem;
}

.flex-item.recycle-left-column .text-container h2 {
    font-size: clamp(1.8em, calc(1.8em + 0.732vw), 10em);
}



/* Specific styles for the Accessories slider only */
#accessories-slider {
    position: relative;
    padding: 10px 0;
    cursor: cell;
}

/* Styles for Accessories slider arrows */
#accessories-slider .bx-prev,
#accessories-slider .bx-next {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 9999 !important;
    border-radius: 50%;
    transition: background 0.3s ease;
    opacity: 1 !important;
    visibility: visible !important;
}

#accessories-slider .bx-prev:hover,
#accessories-slider .bx-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.accessories-block .bx-prev {
    left: -35px !important;
}

.accessories-block .bx-next {
    right: -35px !important;
}


/* Accessories Slider - Override Global Styles */
.accessories-block .bx-wrapper .bx-controls-direction a {
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    visibility: visible !important;
    z-index: 9999 !important;
}

/* .accessories-block .bx-wrapper .bx-controls-direction a:hover {
    background: rgba(0, 0, 0, 0.8);
} */





@media (max-width:768px) {
    #index .columns-container .container, #index #center_column, #block-homefeatured, #index .px-20.px-xs-0, .px-xs-0 {
        padding-left:0px!important;
        padding-right:0px!important;
    }
    #cascade_search_vertical, .column.right-column {
        margin-bottom:0px!important;
    }
    .main-content .column.left-column {
        margin-bottom:15px;
    }
    .block-style-3 #center_column .title_block {
        font-size:15px;
    }
    .compatible-section {
        margin-top:10px!important;
    }
    .recycle-to-block > div.container > .d-flex {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        max-height: fit-content;
        align-content: center;
        flex-wrap: wrap;
    }

    .text-container.text-right {
        margin-top: 0px;
    }

    .recycle-to-block.banner.d-block {
        margin-top: 15px;
    }

    .flex-item.recycle-left-column .text-container h2 {
        text-align: center;
        margin-bottom: 0px;
        padding: 0px 3px;
    }

    .flex-item.recycle-right-column {
        width: 100vw;
    }

    .block-style-3 #center_column .title_block {
        margin-top: 15px;
    }

    .block-style-3 .title_block span {
        float: left;
    }

    .banner-bluish-grey {
        margin-top: 15px;
        padding:5px;
    }

    .banner-bluish-grey .text-container.w-70 {
        text-align: left;
        padding: 5px;
        margin-top: 0px;
    }

    .banner-bluish-grey p.subtext {
        /* font-size: 1.6rem; */
        padding: 5px;
    }

    .banner-bluish-grey .text-container, .banner-bluish-grey .text-container .highlight {
        line-height: 0.1;
    }

    .banner-bluish-grey .text-container p.small-subtext {
        padding: 5px;
        font-size: 1.2rem;
        margin-bottom: 0px;
    }

    .image-container.w-30 {
        text-align: center;
    }

    .image-container.w-30 img.img.img-responsive {
        float: none!important;
        margin: auto;
        max-width:100%
    }

    .banner-bluish-grey span.large-text {
        font-size: 3rem;
        line-height: 1;
    }

    .main-content .column .text-overlay .bold {
        font-size: clamp(22px, 5vw, 40px);
    }
    .main-content .column .text-overlay .normal {
        font-size: clamp(16px, 3.5vw, 28px);
    }
    .main-content .column.left-column .text-overlay {
        right:22px;
    }
    .main-content .column.right-column .text-overlay {
        left:22px;
    }
    #block-home-featured-alt {
        padding:0px 20px;
    }
    span.description-block {
        padding-right: 10px;
        padding-left: 10px;
        display: block;
        text-align: center;
    }

    #index ul#homefeatured {
        padding-left: 10px;
        padding-right: 10px;
        display: block;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 5px;
    }

    #index ul#homefeatured.product_list.grid .product-container > a.article-block {
        display: flex;
        flex-direction: column;
        position: static;
        flex-wrap: wrap;
        align-items: center;
    }

    #index ul#homefeatured.product_list.grid .product-container .left-block {
        display: block;
        flex: 1;
        position: static;
        text-align: center;
    }

    #index ul#homefeatured li.col-lg-6 .center-block {
        position: static;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
    ul#homefeatured-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 15px;
        margin-right: 15px;
    }

    ul#homefeatured-2 > li {
        margin-bottom: 0px;
        min-width: 33%;
    }

    ul#homefeatured-2 > li > article > a.article-block {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    ul#homefeatured-2 > li > article > a.article-block > div.left-block {
        position: static;
    }

    ul#homefeatured-2 > li > article > a.article-block > div.center-block {
        position: static;
    }
    ul#homefeatured-2 > li > article.product-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    ul#homefeatured-2 > li > article > a.article-block > div.center-block {
        width: 100%;
        height: auto;
    }

    .center-block span.title-home {
        max-height: 15px;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (max-width:1024px) {

    .recycle-left-column {
        padding-left: 0px!important;
        padding-right: 10px!important;
    }
    #index .columns-container .container {
        margin-left:0px;
        margin-right:0px;
        width: 100%;
        max-width: 100%;
    }
    div#center_column {
        padding: 0px!important;
    }

    section#block-homefeatured {
        padding: 0px;
    }
}
@media (min-width:1024px) {
    .recycle-to-block {
        padding-top:50px;
        padding-bottom:50px;
        margin-bottom: 20px;
    }
}
@media (min-width:768px) {

    #block-homefeatured .main-content {
        justify-content:space-between;
    }

    .main-content .column + .plus-symbol {
        position: static;
        transform: none;
        font-family: auto;
    }

    .column > .text-overlay {
        display: flex;
        flex-direction: column;
        width: 52%;
        font-size: 1vw;
        height: 60%;
        justify-content: space-between;
    }

    .column .text-overlay p.title {
        margin-bottom: 10px;
    }

    .column.left-column .text-overlay {
        right:30px;
    }
    .column.right-column .text-overlay {
        left:30px;
    }
    .main-content > .column.left-column .text-overlay, .main-content > .column.right-column .text-overlay {
        top: 43%;
    }
    #language-selector-li {
        display: none;
    }
}
@media (min-width:769px) {
    .main-content .column {
        width: 45%;
    }
}
@media (max-width:991px) {
    div#languages-block-top  .language-name-title {
        display: none;
    }
    #languages-block-top {
        right: -12px !important;
    }
    #header .shopping_cart .btn-cart-left .badge {
        top: 17%;
        right: 1%;
    }
}
@media (min-width:992px) {
    #header .shopping_cart .btn-cart-left .badge {
        top: 10px;
        right: 1px !important;
    }
}
@media (min-width:999px) {
    #header .shopping_cart .btn-cart-left .badge {
        top: -3px !important;
        right: -5px !important;
    }
    .ui-autocomplete.ui-jolisearch.centered-list {
        left: 49.5% !important;
        transform: translateX(-49%);
        max-width: 98vw;
        width: 920px!important;
    }
}
@media (max-width:999px) {
    ul#iqitmegamenu-accordion li img.logo {
        max-width: 100%;
        float: left;
    }
    #iqitmegamenu-accordion .title i {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 34px;
        font-weight: bold;
    }
    #iqitmegamenu-accordion div.responsiveInykator {
        background-color:unset!important;
    }
    #iqitmegamenu-accordion:not(.cbp-spmenu-open) .title i {
        top: -2px;
        left: 0px;
    }
    #iqitmegamenu-accordion.cbp-spmenu > li:hover  a {
        color:#274164;
    }
    #iqitmegamenu-accordion > li:not(:first-child):not(:last-child) {
        cursor:pointer;
    }
    #iqitmegamenu-accordion > li:hover:not(:first-child):not(:last-child) {
        background-color: #ffffff !important;
        color: #274164;
        border-right: 1px solid #274164;
        background-image: url(/themes/universel/img/mobile-menu-invert.svg);
    }
    .ui-menu.ui-jolisearch {
        min-width:95vw;
        z-index:1!important;
    }
}


@media (max-width:768px) {
    /* order-opc */
    #order-opc #header_logo img {
        margin-top:10px!important;
    }
    /* sidemenu */
    ul#iqitmegamenu-accordion {
        width: 90vw!important;
    }
    ul#iqitmegamenu-accordion:not(.cbp-spmenu-open) {
        left:-90vw!important;
    }
}
@media (max-width:998px) {
    /* sidemenu */
    #logo-li {
        width: 100%;
        max-width: 100%;
        height: 88px;
        overflow: hidden;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    #iqitmegamenu-accordion.cbp-spmenu > li:not(:last-child):not(:nth-last-child(2)):not(:first-child) {
        border-bottom: 1px solid #cecece;
    }
    #iqitmegamenu-accordion.cbp-spmenu > li > a {
        text-transform: unset !important;
        font-weight: normal !important;
        font-size: 16px;
        border-bottom: none;
        padding: 1.5em 0px;
        position: relative;
        left: 20px;
        margin-left:41px;
    }

    #iqitmegamenu-accordion.cbp-spmenu > li > a > span.title-col {
        /* padding:1em; */
        /* width:60%; */
    }

    #iqitmegamenu-accordion.cbp-spmenu > li ul {
        background-color: #34537D!important;
        padding: 0px!important;
    }

    .cbp-mobilesubmenu #iqitmegamenu-accordion li ul li {
        padding-left: 15px !important;
        border-bottom: 1px solid #cecece;
    }

    #iqitmegamenu-mobile .iqitmegamenu-accordion ul li {
        font-weight: normal;
        cursor: auto;
        padding: 0 0 0 7px;
    }

    #iqitmegamenu-accordion.cbp-spmenu > li > ul > li > a {
        border-bottom: none;
        font-size: 14px !important;
        text-transform: unset;
        font-weight: normal;
        padding:1em 1em 1em 5em;
    }

    .cbp-mobilesubmenu #iqitmegamenu-accordion > li:last-child > a {
        border-bottom: none!important;
    }

    /* #iqitmegamenu-accordion.cbp-spmenu > li .btn.btn-pro_talleres {
        background: #ffffff;
        color: #274164 !important;
    } */

    #iqitmegamenu-accordion.cbp-spmenu > li .menu-footer {
        position: absolute;
        bottom: 70px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-height: fit-content;
        margin-bottom: 60px;
        row-gap: 8px;
        width: 100%;
        min-height: 135px;
        max-width: 300px;
        margin: auto;
        left: 10px;
    }
    #iqitmegamenu-accordion.cbp-spmenu > li .menu-footer.fr {
        bottom: 90px;
    }
    /* #iqitmegamenu-accordion.cbp-spmenu > li .menu-footer.gb {
        bottom: 90px;
    } */

    /* #iqitmegamenu-accordion.cbp-spmenu > li i.icono-pro_talleres {
        background-image: url(/themes/universel/img/mobile-menu-icon-4.png);
        filter:none;
    } */
    /* .free-delivery-content-block a {
        border-bottom:0px;
    } */
    /* #iqitmegamenu-accordion.cbp-spmenu > li .btn.btn-pro_talleres {
        border-radius: 15px;
    } */
    #iqitmegamenu-accordion.cbp-spmenu > li:nth-child(2) {
        border-top: 1px solid #cecece;
        margin-top:15px;
    }
    i.icono-free_delivery {
        /* background-image: url(/themes/universel/img/mobile-menu-icon-5.png);
        width: 28px;
        height: 28px;
        display: block;
        background-size: 103%;
        background-position: center;
        background-repeat: no-repeat; */
        /* filter: invert(1); */
    }

    /* .free-delivery-content-block {
        display: flex;
        flex-direction: row;
        width: 98%;
        margin: auto;
        justify-content: space-evenly;
        align-items: center;
    }

    .free-delivery-content-block > span {
        display: flex;
        justify-content: space-between;
        gap: 25px;
    } */
    #iqitmegamenu-accordion.cbp-spmenu > li  a:hover {
        background-color: unset ;
        box-shadow : none!important;
        color: #274164;
    }
}

@media (max-width:767px) {
    /* hide jolisearch placeholder */
    /* #mobile-centered-header input#search_query_top::placeholder {
        color:transparent;
    } */
    /* languale selector on side menu */
    .available-lang, .available-lang.current {
        display:none;
    }
    .available-lang.active, .available-lang.show {
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
    }
    .menu-footer-top {
        position: absolute;
        bottom: 260px;
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        left: -8px;
    }

    .menu-footer-top .language-column {
        flex-direction: column;
        width: 70%;
    }

    .menu-footer-top .language-container {
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        border: 1px solid #ffffff;
        background: #ffffff;
        border-radius: 6px;
        color: #274164;
        font-size: 16px;
        padding: 0.4em 10px;
    }

    .available-lang span {
        display: block;
        padding: 5px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .language-col + span.caret {
        border-top: 8px dashed;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
    }
    .available-languages {
        display: none;
        position: absolute;
        bottom: 55px;
        left: 50%;
        transform: translateX(-50%);
        background: #ffffff;
        width: 70%;
        padding: 0px 11px;
        border-radius: 15px 15px 0px 0px;
    }
    .available-languages.active {
        display: block;
    }

}
/* sidemenu */
ul#iqitmegamenu-accordion {
    width: 50vw;
    max-width: 326px;
}
ul#iqitmegamenu-accordion:not(.cbp-spmenu-open) {
    left:-50vw;
}
/* .icn-block {
    width: auto;
    min-width: 55px;
    padding-left: 10px;
} */
/* span#icon-CAT3 {
    background-image: url(/themes/universel/img/mobile-menu-icon-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    aspect-ratio: 1 / 1;
    width: 46px;
}
span#icon-CAT4 {
    background-image: url(/themes/universel/img/mobile-menu-icon-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 18px;
    height:32px;
}
span#icon-CAT5 {
    background-image: url(/themes/universel/img/mobile-menu-icon-3.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 40px;
    height: 36px;
} */
.title-col-bold {
    font-weight:700;
}
.cbp-spmenu-body.cbp-spmenu-push-toright {
    left: 0px!important;
}

.accordion-background {
    background-image: url(/themes/universel/img/mobile-menu.svg);
    background-repeat: no-repeat;
}
#logo-li > div {
    background-size: 153%;
    background-position: -84px -15px;
    max-width: 300px;
    width: 300px;
    margin: auto;
    height: 100%;
}
li#li-CAT3 {
    background-size: 90%;
    background-position: -5px 14%;
}

li#li-CAT4 {
    background-size: 90%;
    background-position: -9px 24%;
}

li#li-CAT5 {
    background-size: 70%;
    background-position: -1px 34%;
}
li#footer-li {
    max-width: 300px;
    overflow: hidden;
}
.menu-footer .data-linked {
    cursor: pointer;
}
.menu-footer .block-1 {
    background-size: cover;
    background-position: 0px 89%;
    min-height: 88px;
    min-width: 100%;
}
.menu-footer .block-2 {
    background-image: url(/themes/universel/img/mobile-menu-delivery.svg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 65px;
    min-width: 75%;
}
.menu-footer.fr .block-2 {
    background-position: 0px 88%;
    height: 54px;
    min-height: 1px;
}
.menu-footer.gb .block-2 {
    background-position: 0px 102%;
}

.menu-footer.es .block-2 {
    background-position: 0px 77%;
}

span.pro-talleres-text {
    position: relative;
    bottom: -30px;
    color: #274164;
    right: 75px;
    float: right;
}
span.free-delivery-text {
    position: relative;
    top: 25px;
    right: -28px;
    font-size: 16px;
}
.free-delivery-text a {
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0px !important;
    border-bottom: none !important;
}

/* hide home page image slider arrows */
.columns-container .bx-wrapper .bx-controls-direction a {
    opacity:0;
}
@media (min-width:1200px) {
    .ui-autocomplete.ui-jolisearch.centered-list {
        width: 1142px !important;
    }
}
@media (min-width:1300px) {
    .ui-autocomplete.ui-jolisearch.centered-list {
        width: 1225px !important;
    }
}
@media (min-width: 1400px) {
    .ui-autocomplete.ui-jolisearch.centered-list {
        width: 1270px !important;
        left: 50% !important;
        transform: translateX(-49.5%);
    }
}

@media (min-width:768px) and (max-width:1400px) {
    .btn.btn-tutorial {
        min-width:23%!important;
    }
}
ol.breadcrumb {
    padding: 2px 15px;
}
.cbp-spmenu-overlay-show {
    background: rgba(46, 65, 104, 0.64);
}
/* Update 2024 - to cover youtube video with overlay, hide the controls and display full width*/
.video-container-youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}
.video-container-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.iframe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    pointer-events: auto;
}

/* footer customisation */

@media (max-width: 767px) {
    footer#footer {
        padding: 0px;
        color: rgb(51, 51, 51);
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        letter-spacing: normal;
        width: 100%;
        border-top: 1px solid rgb(204, 204, 204);
    }

    footer#footer .row.footer-accordion-mobile {
        margin: 0px auto;
        max-width: 1624px;
        padding: 8px 2px;
    }

    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content {
        width: 100%;
    }

    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content:not(:first-child) > section.footer-block {
        width: 100%;
        padding: 0px;
    }

    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content:not(:first-child):not(:last-child) > section.footer-block {
        border-bottom: 1px solid #cccccc;
    }

    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content > section.footer-block > .title {
        padding: 8px 16px;
        transition: backgroundColor 0.3s;
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin: 0px;
    }
    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content > section.footer-block > .title:before {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: calc(8px* -1);
        width: 16px;
        height: 16px;
        right: 16px;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3IiBmaWxsPSJub25lIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC4xIDYuMTY2N0w4LjUwMDAyIDExLjc2NjdMMi45MDAyIDYuMTY2N0wzLjgzMzM2IDUuMjMzNEw4LjUwMDAyIDkuOUwxMy4xNjY3IDUuMjMzNEwxNC4xIDYuMTY2N1oiIGZpbGw9IiMzMzMzMzMiLz4KPC9zdmc+Cg==) no-repeat center center;
        transition: transform 0.3s;
    }
    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content > section.footer-block > .title.active:before {
        transform: rotate(180deg);
    }
    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content > section.footer-block > .title:after {
        display:none;
    }
    footer#footer .footer-accordion-mobile .footer-accordion-mobile-content > section.footer-block > .toggle-footer {
        padding: 0px 16px;
    }
    .blockcategories_footer .footer-phone {
        padding:0px 16px;
    }
    #footer a.toggle-footer-text {
        text-decoration: none;
        color: inherit;
        height: 100%;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        cursor: pointer;
        transition: color 0.3s, background 0.3s;
        width: calc(100% + 2rem);
        margin: 0px -1rem;
        padding: 0px 1rem;
    }

    .blockcategories_footer .text-title {
        justify-content: flex-start;
        width: 200px;
        column-gap: 10px;
    }
    #footer h4 i.icon-phone {
        padding:15px;
    }
}
@media (min-width:768px) {
    .blockcategories_footer .text-title {
        flex-direction: column;
    }
}


/* Update 2024 - whatsapp content on footer*/
.contact-on-whatsapp .d-flex {
    justify-content: flex-start;
    width: 100%;
    align-items: center;
    margin-top: 10px;
    margin-bottom:10px;
}
.sp-2024.es {
    background-image: url(/themes/universel/img/whtsapp-contact-es.webp);
    background-repeat: no-repeat;
    width: 266px;
    height: 125px;
    background-size: cover;
}
.sp-2024.fr {
    background-image: url(/themes/universel/img/whtsapp-contact-fr.webp);
    background-repeat: no-repeat;
    width: 266px;
    height: 125px;
    background-size: cover;
}
.sp-2024.gb {
    background-image: url(/themes/universel/img/whtsapp-contact-gb.webp);
    background-repeat: no-repeat;
    width: 266px;
    height: 125px;
    background-size: cover;
}
/* .sp-2024 {
    background-image: url('/themes/universel/img/Sprite-2024.png');
    background-repeat: no-repeat;
} */
/* .wtsapp-link {
    width: 125px;
    height: 50px;
}
.wtsapp-link .sp-2024 {
    background-size: 90rem;
    background-position: 86% 90%;
    min-height: 10px;
    min-width: 10px;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
} */
/* .wtsapp-qr-code {
    width: 157px;
    aspect-ratio: 1 / 1;
    height: auto;
    cursor: pointer;
} */
/* .wtsapp-qr-code .sp-2024 {
    background-size: 214rem;
    min-height: 10px;
    min-width: 10px;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
} */
/* .wtsapp-qr-code .sp-2024.es {
    background-position: -122em -176em;
}
.wtsapp-qr-code .sp-2024.fr {
    background-position: -134em -176.5em;
}
.wtsapp-qr-code .sp-2024.gb {
    background-position: -146em -176.5em;
} */
@media (max-width:767px) {
    .wtsapp-link + .or-text .wtsapp-qr-code {
        display:none;
    }
    .contact-on-whatsapp .d-flex {
        margin-top: -20px;
        margin-bottom: -22px;
    }
    .wtsapp-link {
        width: 100%;
        height: 90px;
        overflow: hidden;
    }
    .wtsapp-link .sp-2024 {
        background-size: 98em;
        background-position: -102rem 115%;
    }
}
/* Update 2024 - whatsapp content on footer - end*/


/* ================================
   Rubbekoo — Auth UI (CSS compacto CLEAN)
   ================================ */

/* --- variables --- */
:root{
  --auth-w:420px;
  --radius:12px;
  --radius-sm:6px;
  --border:#e5e7eb;
  --border-strong:#d1d5db;
  --text:#111827;
  --muted:#6b7280;
}

/* Título */
.authentication .page-heading{
  margin:10px 0 24px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--text);
  font-size:28px;
}

/* Grid (mismo alto de columnas) */
.authentication .rkb-auth-form>.row{display:flex;align-items:stretch;margin:0 -10px;}
.authentication .rkb-auth-form [class*="col-"]{padding:0 10px;display:flex;}
.authentication .rkb-auth-form [class*="col-"]>.rkb-fieldset{flex:1;display:flex;flex-direction:column}

/* Tarjeta */
.authentication .rkb-fieldset{
  background:#f8f9fa;
  border:1px solid #e9eef5;
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.authentication .rkb-fieldset>h3{
  margin:0 0 18px;
  padding:0 0 12px;
  border-bottom:2px solid var(--border);
  font-weight:700;
  font-size:18px;
  color:var(--text);
}

/* Formularios dentro de la tarjeta */
.authentication .rkb-fieldset form{
  flex:1;display:flex;flex-direction:column;background:transparent;padding:0;margin:0
}

/* ===== Floating labels (ambas etapas) ===== */
.rkb-auth-form.rkb-float .rkb-field{
  position:relative;
  margin-bottom:16px;
  width:100%;
}
.rkb-auth-form.rkb-float .rkb-field .form-control{
  width:100%;
  height:50px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:#fff;
  padding:24px 14px 7px;
  font-size:15px;
  transition:border-color .2s, box-shadow .2s;
  color:black;
}
.rkb-auth-form.rkb-float .rkb-field textarea.form-control{min-height:110px;padding-top:22px;resize:vertical}
.rkb-auth-form.rkb-float .rkb-field .form-control:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
  outline:0;
}
.rkb-auth-form.rkb-float .rkb-field .form-control::placeholder{color:transparent}
.rkb-auth-form.rkb-float .rkb-field>label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:15px; color:#9ca3af; background:#fff; padding:0 4px;
  pointer-events:none; transition:.15s;
}
.rkb-auth-form.rkb-float .rkb-field .form-control:focus+label,
.rkb-auth-form.rkb-float .rkb-field .form-control:not(:placeholder-shown)+label,
.rkb-auth-form.rkb-float .rkb-field.is-filled>label{
  top:8px; transform:none; font-size:12px; color:#6b7280;
}

/* Select caret */
.rkb-auth-form.rkb-float .rkb-field select.form-control{
  appearance:none; padding-right:38px;
  background-image:
    linear-gradient(45deg,transparent 50%,#9ca3af 50%),
    linear-gradient(135deg,#9ca3af 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px; background-repeat:no-repeat;
}

/* Iconos opcionales */
.rkb-auth-form.rkb-float .rkb-field>i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#9ca3af; font-size:16px; pointer-events:none
}
.rkb-auth-form.rkb-float .rkb-field>i~.form-control{padding-left:41px}
.rkb-auth-form.rkb-float .rkb-field>i~label{left:38px}

/* Checkboxes */
.rkb-auth-form .checkbox{margin:12px 0}
.rkb-auth-form .checkbox label{display:flex;align-items:center;gap:8px;color:#475569;font-size:14px}

/* Bloque PRO */
.rkb-pro-block{
  display:none;
  background:#fff; border:1px dashed #cbd5e1; border-radius:10px; padding:16px; margin-top:12px
}

/* ===== Acciones / botones ===== */
.authentication .rkb-fieldset .rkb-actions{margin-top:16px;padding:0;width:100%}
.authentication .rkb-actions .btn{
  width:100%; height:48px; border-radius:10px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; transition:.2s;
}
.authentication .rkb-actions .btn-primary{
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%); color:#000;
}
.authentication .rkb-actions .btn-primary:hover{filter:brightness(.97); transform:translateY(-1px)}

/* =========================================================
   ETAPA 1 (login/crear email): limitar ancho a 420px (ambas columnas)
   ========================================================= */
#authentication #create-account_form .rkb-field,
#authentication #create-account_form .rkb-actions,
#authentication #create-account_form .form-control,
#authentication #create-account_form .btn,
#authentication #login_form .rkb-field,
#authentication #login_form .rkb-actions,
#authentication #login_form .form-control,
#authentication #login_form .btn{
  max-width:var(--auth-w); width:100%; margin-left:0; margin-right:auto; box-sizing:border-box; height: 50px;
}

/* ===== ESPACIO GARANTIZADO entre email y botón (columna izquierda, Etapa 1) ===== */
#authentication #create-account_form .rkb-field{ margin-bottom:18px !important; }
#authentication #create-account_form .rkb-field + .rkb-actions{
  margin-top:52px !important;
  padding-top:0 !important;
  /* position:static !important; */  /* ← COMENTADA O ELIMINADA */
  clear:both !important;
  display:block !important;
}

/* =========================================================
   ETAPA 2 (account-creation_form): inputs a 100% de la columna
   ========================================================= */
#authentication #account-creation_form .rkb-field,
#authentication #account-creation_form .rkb-actions,
#authentication #account-creation_form .form-control,
#authentication #account-creation_form .btn{
  max-width:100%; width:100%;
}

/* Lost password */
.lost_password{margin:8px 0 0 !important; font-size:13px}
.lost_password a{color:var(--muted); text-decoration:none}
.lost_password a:hover{color:#2563eb; text-decoration:underline}

/* Ayudas, errores y alerts */
.help-block{font-size:12px; color:#6b7280; margin-top:4px; line-height:1.4}
.form-group.has-error .form-control{border-color:#ef4444}
.form-group.has-error .help-block{color:#ef4444}
.alert.alert-danger,#create_account_error{
  background:#fee2e2; border:1px solid #fecaca; color:#991b1b;
  border-radius:8px; padding:12px 16px; margin:12px 0 !important; font-size:14px;
}

/* Autofill: asegurar label flotado */
.rkb-field .form-control:-webkit-autofill + label{
  top:8px; transform:none; font-size:12px; color:#6b7280;
}
.rkb-auth-form input:-webkit-autofill,
.rkb-auth-form input:-webkit-autofill:hover,
.rkb-auth-form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
}

/* Desktop: pista visual columnas (opcional) */
@media (min-width:768px){
  .authentication .rkb-auth-form .col-sm-6:first-child .rkb-fieldset{border-left:3px solid #fbbf24}
  .authentication .rkb-auth-form .col-sm-6:last-child  .rkb-fieldset{border-left:3px solid #3b82f6}
}

/* Mobile = full width */
@media (max-width:767px){
  :root{ --auth-w:100%; }
  .authentication .page-heading{font-size:24px; margin:8px 0 16px}
  .authentication .rkb-fieldset{padding:20px 16px; border-radius:10px}
  .authentication .rkb-fieldset>h3{font-size:16px; margin-bottom:14px}
  .rkb-auth-form.rkb-float .rkb-field{margin-bottom:14px}
}


/* ===== Etapa 1: labels siempre flotantes (login / crear cuenta) ===== */
#authentication #create-account_form .rkb-field > label,
#authentication #login_form .rkb-field > label{
  top:4px !important;
  font-size:12px !important;
  color:#6b7280 !important;
  transform:none !important;
}

/* Fila CP / Ciudad: que encaje con los demás campos */
.rkb-fieldset .row.rkb-zipcity {
  margin-left: 0;
  margin-right: 0;
}

/* Columnas internas con padding normal */
.rkb-fieldset .row.rkb-zipcity > .col-sm-5,
.rkb-fieldset .row.rkb-zipcity > .col-sm-7 {
  padding-left: 0;
  padding-right: 0;
}

/* Ajuste de separación entre CP y Ciudad */
@media (min-width: 768px){
  .rkb-fieldset .row.rkb-zipcity > .col-sm-5 { padding-right: 8px; }
  .rkb-fieldset .row.rkb-zipcity > .col-sm-7 { padding-left: 8px; }
}

/* Contenedor CP/Ciudad sin .row para evitar offsets/gutters de Bootstrap */
.rkb-fieldset .rkb-zipcity-inline{
  display: flex;
  gap: 14px;            /* separación entre campos */
}

/* Anchos proporcionales como antes (5/7) */
.rkb-fieldset .rkb-zipcity-inline .rkb-zip  { flex: 5 1 0; }
.rkb-fieldset .rkb-zipcity-inline .rkb-city { flex: 7 1 0; }

/* Mobile: apilar 100% ancho */
@media (max-width: 767px){
  .rkb-fieldset .rkb-zipcity-inline{
    flex-direction: column;
    gap: 10px;
  }
}

/* Nombre + Apellido en la misma línea */
.rkb-fieldset .rkb-name-inline{
  display: flex;
  gap: 14px; /* separación entre los dos campos */
}

.rkb-fieldset .rkb-name-inline .rkb-firstname { flex: 1 1 50%; }
.rkb-fieldset .rkb-name-inline .rkb-lastname  { flex: 1 1 50%; }

/* Mobile: apilar */
@media (max-width: 767px){
  .rkb-fieldset .rkb-name-inline{
    flex-direction: column;
    gap: 10px;
  }
}

/* Barra superior de envío estilo Wiperblades / Shopify */
#page .navbar.navbar-default.navbar-top {
    height: 32px !important;
    min-height: 32px !important;
    background: linear-gradient(
        90deg,
        #1e1e1e 0%,
        #031b3f 50%,
        /*#1e1e1e 100%*/
    ) !important;
}

#page .navbar-top > .container {
    position: relative;
    height: 31px !important;
    min-height: 31px !important;
}

#page .navbar-top .shipping-bar {
    float: none !important;
    width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 6px 125px !important;

    color: #ffffff !important;
    font-family: Nunito, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 19.2px !important;

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

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#page .navbar-top .shipping-main {
    font-weight: 600;
}

#page .navbar-top .shipping-detail {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px;
    opacity: 0.82;
}

#page .navbar-top #languages-block-top {
    height: 31px !important;
    min-height: 31px !important;
}

#page .navbar-top #languages-block-top .navbar-btn {
    height: 30px !important;
    margin: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Versión móvil */
@media (max-width: 767px) {

#page .navbar-top .shipping-condition {
    font-size: 12px;
}
    #page .navbar-top .shipping-bar {
        padding: 6px 42px 6px 0 !important;
        font-size: 13px !important;
        line-height: 19.2px !important;
    }

    #page .navbar-top .shipping-detail {
        display: none !important;
    }

    #page .navbar-top #languages-block-top .language-name-title,
    #page .navbar-top #languages-block-top .caret {
        display: none !important;
    }
}

#page .navbar-top .shipping-main {
    font-weight: 700;
}

#page .navbar-top .shipping-condition {
    margin-left: 4px;
    font-weight: 400;
}


/* ================================================================
   RUBBEKOO — Selector vertical de vehículo
   Añadir al FINAL de themes/universel/css/autoload/custom.css
   ================================================================ */

#cascade_search_vertical {
    box-sizing: border-box;
    height: auto !important;
    min-height: 0;
    margin: 0 0 20px 20px;
    padding: 14px 15px 11px !important;
    overflow: hidden;
    color: #fff;
    text-align: left;
    background: linear-gradient(145deg, #113659 0%, #174b7e 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(9, 50, 88, 0.16);
}

/* La home presenta solamente tres pasos y mantiene la altura del hero. */
#index #cascade_search_vertical {
    height: auto !important;
    min-height: 0px;
}

#cascade_search_vertical .header_cascade_search_vertical {
    height: auto !important;
    min-height: 66px;
    margin: 0;
    padding: 0 4px 10px !important;
    background: transparent !important;
}

#cascade_search_vertical .header_cascade_search_vertical .linea {
    display: none !important;
}

#cascade_search_vertical .header_cascade_search_vertical .title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
    text-align: left;
}

#cascade_search_vertical .header_cascade_search_vertical .vehicle-search-title {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: #fff;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

#cascade_search_vertical .header_cascade_search_vertical .coche_lateral {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    transform: scale(0.58);
    transform-origin: right center;
}

#cascade_search_vertical .vehicle-search-subtitle {
    grid-column: 1 / 3;
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.3;
}

#cascade_search_vertical .cascadesearch_form {
    margin: 0;
}

#cascade_search_vertical .custom-dropdown__select {
    margin: 0 0 10px;
}

#cascade_search_vertical .cascadesearch_form .form-control,
#cascade_search_vertical .cascadesearch_select {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    height: 39px;
    margin: 0 !important;
    padding: 0 42px 0 16px;
    color: #173a5d;
    font-size: 15px;
    font-weight: 500;
    line-height: 39px;
    background-color: #fff;
    border: 1px solid rgba(9, 55, 94, 0.14);
    border-radius: 9px;
    box-shadow: 0 2px 5px rgba(7, 45, 78, 0.09);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#cascade_search_vertical .cascadesearch_select:hover,
#cascade_search_vertical .cascadesearch_select:focus {
    border-color: #20bbc4;
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 187, 196, 0.2);
}

#cascade_search_vertical .cascadesearch_select:disabled {
    opacity: 1 !important;
    color: #7b8792;
    background-color: #e8edf2;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    cursor: not-allowed;
}

#cascade_search_vertical #submitCascadeSearch {
    position: relative;
    box-sizing: border-box;
    width: 100% !important;
    height: 50px !important;
    margin: 8px 0 0 !important;
    padding: 0 32px 0 10px !important;
    color: #123f6c;
    font-size: 12.5px !important;
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    background: #ffd329 !important;
    border: 0;
    border-radius: 9px !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#cascade_search_vertical #submitCascadeSearch::after {
    position: absolute;
    top: 50%;
    right: 18px;
    content: "\f054";
    font-family: FontAwesome;
    font-size: 17px;
    transform: translateY(-50%);
}

#cascade_search_vertical #submitCascadeSearch:hover,
#cascade_search_vertical #submitCascadeSearch:focus {
    background: #ffdc4d !important;
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #e6b900;
}

#cascade_search_vertical #submitCascadeSearch:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #e6b900;
}

#cascade_search_vertical .vehicle-search-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 20px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

#cascade_search_vertical .vehicle-search-trust-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 22px;
    width: 22px;
    height: 25px;
    background: #35d0d7;
    -webkit-clip-path: polygon(
        50% 0,
        100% 18%,
        88% 70%,
        50% 100%,
        12% 70%,
        0 18%
    );
    clip-path: polygon(
        50% 0,
        100% 18%,
        88% 70%,
        50% 100%,
        12% 70%,
        0 18%
    );
}

#cascade_search_vertical .vehicle-search-trust-icon::before {
    position: absolute;
    inset: 3px;
    content: "";
    background: #205b93;
    -webkit-clip-path: polygon(
        50% 0,
        100% 18%,
        88% 70%,
        50% 100%,
        12% 70%,
        0 18%
    );
    clip-path: polygon(
        50% 0,
        100% 18%,
        88% 70%,
        50% 100%,
        12% 70%,
        0 18%
    );
}

#cascade_search_vertical .vehicle-search-trust-icon::after {
    position: absolute;
    top: 48%;
    left: 50%;
    content: "✓";
    color: #35d0d7;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transform: translate(-50%, -50%);
}

@media (max-width: 1223px) {
    #cascade_search_vertical.cascade_search_vertical {
        margin-left: 0;
    }

    #cascade_search_vertical .header_cascade_search_vertical .vehicle-search-title {
        font-size: 22px !important;
    }

    #cascade_search_vertical #submitCascadeSearch {
        font-size: 15px !important;
    }
}

@media (max-width: 991px) {
    #cascade_search_vertical.cascade_search_vertical {
        height: auto !important;
        min-height: 332px;
        margin: 10px 0 18px;
    }

    #cascade_search_vertical .header_cascade_search_vertical .vehicle-search-title {
        display: block !important;
    }
}

@media (max-width: 767px) {
    #cascade_search_vertical.cascade_search_vertical {
        width: 100%;
        max-width: 420px;
        height: auto !important;
        min-height: 0;
        margin: 0 auto 20px;
        padding: 20px 18px 17px;
        border-radius: 12px;
    }

    #cascade_search_vertical .header_cascade_search_vertical {
        min-height: 78px;
        padding-top: 0 !important;
    }

    #cascade_search_vertical .cascadesearch_form .form-control {
        height: 50px;
        margin: 0 !important;
        padding: 0 42px 0 15px;
    }

    #cascade_search_vertical #submitCascadeSearch {
        height: 56px !important;
        margin-top: 13px !important;
    }
}

@media (max-width: 360px) {
    #cascade_search_vertical .header_cascade_search_vertical .vehicle-search-title {
        font-size: 20px !important;
    }

    #cascade_search_vertical .header_cascade_search_vertical .coche_lateral {
        transform: scale(0.65);
    }

    #cascade_search_vertical #submitCascadeSearch {
        font-size: 13px !important;
    }
}


#index #cascade_search_vertical
.cascadesearch_form > .horizontal-select:last-child {
    margin-top: -14px;
}

#index #cascade_search_vertical .vehicle-search-trust {
    margin-top: 15px;
}


/* ================================================================
   RUBBEKOO — Ajustes exclusivos para móvil
   Añadir al FINAL de custom.css, después de los estilos del selector.
   ================================================================ */

@media (max-width: 767px) {
    /* La tarjeta respira respecto a los bordes del iPhone. */
    #index #cascade_search_vertical {
        box-sizing: border-box;
        width: calc(100vw - 24px) !important;
        max-width: 420px;
        height: auto !important;
        min-height: 0;
        margin: 12px auto 18px !important;
        padding: 16px 14px 14px !important;
        border-radius: 12px !important;
    }

    #index #cascade_search_vertical .header_cascade_search_vertical {
        min-height: 0;
        padding: 0 2px 12px !important;
    }

    #index #cascade_search_vertical .header_cascade_search_vertical .title {
        grid-template-columns: minmax(0, 1fr) 50px;
    }

    #index #cascade_search_vertical .header_cascade_search_vertical .vehicle-search-title {
        font-size: 18px !important;
        line-height: 1.08;
        letter-spacing: -0.2px;
    }

    #index #cascade_search_vertical .header_cascade_search_vertical .coche_lateral {
        transform: scale(0.52);
    }

    #index #cascade_search_vertical .vehicle-search-subtitle {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.3;
    }

    #index #cascade_search_vertical .custom-dropdown__select {
        margin-bottom: 8px;
    }

    /* 48 px: superficie táctil cómoda. 16 px evita el zoom de Safari. */
    #index #cascade_search_vertical .cascadesearch_form .form-control,
    #index #cascade_search_vertical .cascadesearch_select {
        height: 48px;
        padding: 0 42px 0 14px;
        font-size: 16px;
        line-height: 48px;
        border-radius: 9px;
    }

    /* Sustituye el control nativo doble del iPhone por una flecha sencilla. */
    #index #cascade_search_vertical .cascadesearch_select {
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23173a5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 12px 7px;
    }

    #index #cascade_search_vertical .cascadesearch_select:disabled {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237b8792' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    #index #cascade_search_vertical #submitCascadeSearch {
        height: 52px !important;
        margin-top: 8px !important;
        padding: 0 34px 0 10px !important;
        font-size: 12.5px !important;
        white-space: nowrap;
        border-radius: 9px !important;
    }

    #index #cascade_search_vertical .cascadesearch_form > .horizontal-select:last-child {
        margin-top: 0;
    }

    #index #cascade_search_vertical .vehicle-search-trust {
        margin-top: 12px;
        font-size: 13px;
    }
}

@media (max-width: 350px) {
    #index #cascade_search_vertical .header_cascade_search_vertical .vehicle-search-title {
        font-size: 17px !important;
    }

    #index #cascade_search_vertical #submitCascadeSearch {
        font-size: 11.5px !important;
    }
}


html[lang^="fr"]
#cascade_search_vertical
.header_cascade_search_vertical
.vehicle-search-title {
    font-size: 18px !important;
    line-height: 1.08;
    letter-spacing: -0.35px;
}

@media (max-width: 767px) {
    html[lang^="fr"]
    #cascade_search_vertical
    .header_cascade_search_vertical
    .title {
        grid-template-columns: minmax(0, 230px) 50px;
        justify-content: space-between;
    }

    html[lang^="fr"]
    #cascade_search_vertical
    .header_cascade_search_vertical
    .vehicle-search-title {
        max-width: 230px;
        font-size: 19px !important;
        line-height: 1.08;
        letter-spacing: -0.3px;
    }
}

@media (max-width: 350px) {
    html[lang^="fr"]
    #cascade_search_vertical
    .header_cascade_search_vertical
    .title {
        grid-template-columns: minmax(0, 210px) 46px;
    }

    html[lang^="fr"]
    #cascade_search_vertical
    .header_cascade_search_vertical
    .vehicle-search-title {
        max-width: 210px;
        font-size: 18px !important;
    }
}


@media (min-width: 992px) {
    #index .container-xs > .sf-contener.col-md-3 {
        display: flex;
        align-items: center;
        height: 420px;
        padding-left:20px;
    }

    #index #cascade_search_vertical {
        width: 100%;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}


/* =========================================================
   AJUSTE SEGURO PARA TABLETS — 768 px a 1199 px

   No cambia:
   - orden de los bloques
   - columnas Bootstrap
   - flotados
   - dimensiones internas de bxSlider
   - imagen móvil o de escritorio
   ========================================================= */

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

    /* Caja del buscador: reducir únicamente espacios internos */
    #index #cascade_search_vertical {
        padding: 10px 10px 8px !important;
    }

    /* Cabecera del buscador */
    #index #cascade_search_vertical
    .header_cascade_search_vertical {
        min-height: 0 !important;
        padding: 0 2px 6px !important;
    }

    #index #cascade_search_vertical
    .vehicle-search-title {
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    #index #cascade_search_vertical
    .vehicle-search-subtitle {
        margin-top: 3px !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
    }

    /* Quitar espacios verticales innecesarios del formulario */
    #index #cascade_search_vertical
    .cascadesearch_form {
        margin-top: 0 !important;
    }

    #index #cascade_search_vertical
    .custom-dropdown__select {
        margin-bottom: 6px !important;
    }

    /* Marca, modelo y año */
    #index #cascade_search_vertical
    .cascadesearch_select {
        height: 36px !important;
        min-height: 36px !important;
        padding-left: 12px !important;
        font-size: 13px !important;
    }

    /* Botón amarillo */
    #index #cascade_search_vertical
    #submitCascadeSearch {
        height: 44px !important;
        margin: 12px 0 0 !important;
        padding: 0 28px 0 7px !important;
        font-size: 11px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    /* Compatibilidad garantizada */
    #index #cascade_search_vertical
    .vehicle-search-trust {
        margin-top: 8px !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    /*
     * El texto del slider tenía siempre 570 px de ancho,
     * incluso cuando la imagen solamente medía 502 px.
     */
    #index #homepage-slider
    .homeslider-description {
        top: 24% !important;
        left: 5% !important;
        width: 62% !important;
        height: auto !important;
    }

    #index #homepage-slider
    .rubbekoo-slide-title {
        margin-bottom: 6px !important;
        font-size: clamp(15px, 2vw, 22px) !important;
        line-height: 1.03 !important;
    }

    #index #homepage-slider
    .rubbekoo-slide-guarantee {
        font-size: clamp(11px, 1.35vw, 15px) !important;
        line-height: 1.1 !important;
    }
}


/*
 * Entre 992 y 1199 px había una altura fija de 420 px
 * que centraba verticalmente el buscador aunque fuese más bajo.
 * Solo anulamos esa altura; no cambiamos anchura ni posición.
 */
@media (min-width: 992px) and (max-width: 1199px) {

    #index .container-xs > .sf-contener.col-md-3 {
        height: auto !important;
        align-items: flex-start !important;
    }

    /*
     * Mantener “ENCUENTRA TUS ESCOBILLAS” en dos líneas.
     * Reducimos ligeramente el texto y el espacio del coche.
     */
    #index #cascade_search_vertical
    .vehicle-search-title {
        font-size: 15px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.1px !important;
    }

    /*
     * Damos algo más de espacio al título reduciendo
     * únicamente la columna reservada al coche.
     */
    #index #cascade_search_vertical
    .header_cascade_search_vertical .title {
        grid-template-columns: minmax(0, 1fr) 52px !important;
    }

    /*
     * Reducimos visualmente sólo el recorte del coche.
     * No alteramos el tamaño de la hoja de sprites.
     */
    #index #cascade_search_vertical
    .coche_lateral {
        transform: scale(0.52) !important;
        transform-origin: right center !important;
    }
}

/* =========================================================
   TABLET ESTRECHA — 768 px a 991 px
   Ajuste de campos, separación y altura visual del slider
   ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    /* Campos algo más bajos */
    #index #cascade_search_vertical
    .cascadesearch_select {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 12.5px !important;
    }

    /* Recuperar separación visible entre los campos */
    #index #cascade_search_vertical
    .custom-dropdown__select {
        margin-bottom: 8px !important;
    }

    /* Separar claramente el botón del último campo */
    #index #cascade_search_vertical
    #submitCascadeSearch {
        height: 42px !important;
        margin-top: 24px !important;
        padding: 0 24px 0 7px !important;
        font-size: 11px !important;
    }

    /*
     * El slider aumenta ligeramente de altura.
     * No cambia su anchura ni el funcionamiento de bxSlider.
     */
    #index #homepage-slider .bx-viewport {
        height: clamp(260px, 30vw, 275px) !important;
    }

    /*
     * La imagen rellena esa altura mediante un pequeño recorte.
     * No se deforma: object-fit mantiene sus proporciones.
     */
    #index #homepage-slider
    .homeslider-container img {
        width: 100% !important;
        height: clamp(260px, 30vw, 275px) !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

#cascade_search_vertical
.header_cascade_search_vertical
.coche_lateral {
    width: 58px !important;
    height: 48px !important;
    margin: 0 !important;
    background: transparent
        url("/themes/universel/img/home2026/icon-car-selector-white.svg")
        center / contain
        no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.sprite-es {
    background-image: url("/themes/universel/img/ui/flag-es.png") !important;
    background-position: center !important;
    background-size: 16px 11px !important;
    background-repeat: no-repeat !important;
}

.sprite-fr {
    background-image: url("/themes/universel/img/ui/flag-fr.png") !important;
    background-position: center !important;
    background-size: 16px 11px !important;
    background-repeat: no-repeat !important;
}

.mobilemenu-sprite {
    position: relative !important;
    width: 36px !important;
    height: 40px !important;
    background-image: none !important;
    background-color: transparent !important;
}

.mobilemenu-sprite::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 4px;
    width: 28px;
    height: 3px;
    background-color: #0b4e82;
    border-radius: 2px;
    box-shadow: 0 8px 0 #0b4e82, 0 16px 0 #0b4e82;
}

/* ================================================================
   Accesibilidad — contraste de los textos de la página de inicio
   ================================================================ */

/* Conserva el degradado y declara un color sólido de respaldo. */
#cascade_search_vertical {
    background-color: #113659 !important;
    background-image: linear-gradient(145deg, #113659 0%, #174b7e 100%) !important;
}

/* Dorado accesible sobre las zonas claras de la imagen del slider. */
.rubbekoo-slide-title strong {
    color: #8a5f00 !important;
}

/* Texto blanco sobre una variante accesible del turquesa de marca. */
.rbk26-video__time {
    color: #fff !important;
    background-color: #007985 !important;
}