.page-template-template_product,.page-template-template_product .nm-page-wrap {background: #131314;}

body.page-template-template_product_new .site-main{max-width:100% !important;}

.far {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
}
.cuantaspersonas1{
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    padding-top: 60px;
}

.content{
    width: 70%;
    padding-right: 25px;
}
.product_sections {padding-top:50px; padding-bottom:0px; max-width:840px; margin-left:auto; margin-right:auto; width:94%; margin-top:0px;}
.itemsec{opacity:0; visibility:hidden; position:absolute; z-index:-1; max-height:0px; overflow:hidden}
.itemsec.active{opacity:1; visibility:visible; position:relative; z-index:1; max-height:100%;margin: 0px auto; max-width: 1024px;
}

.navititle{font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;}

.confibanner{padding-top:60px; padding-bottom:40px; width:100%; background:url('../images/SPA.jpg') center center no-repeat; background-size:cover}
.bannerlogo img{max-width:109px;}

.bannercontent{margin:0 auto; max-width:800px; width:90%; text-align:center;}

.bannercontent h2{font-size: 18px;
    font-weight: bold; color:#fff;
}
.pronav{background:#000; width:100%; padding:20px 0px; display:none !important;}
.navlist ul{list-style:none; display:flex;text-align: center;
    justify-content: center;}
.navlist ul li{  font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 0px; min-width:75px; margin-right:10px;
    line-height: 18px; display:inline-block; position:relative; padding-top:0px;}
.navlist ul li{ color:#54595FFA; cursor:pointer}
.navlist ul li:hover{color:#fff;}
.navlist ul li::before { display:none;
    background-color: #505050;
    content: "";
    height: 8px;
    position: absolute;
    transition: width 0.2s ease-in-out;
    width: 75px; top:0px;
}
.navlist ul li.active{color:#fff; }
.navlist ul li.finish{color:#C7CC2C;}
.navlist ul li.finish.active{ text-decoration:none;}
.navlist ul li.active::before{background:#fff;}
.navlist ul li.finish::before{background:#c0ce21;}
.navlist ul li.finish::after { display:none;
    background:url('../images/correct.png') center center no-repeat; background-size:cover;
    content: "";
    height: 8px;
    position: absolute;
    transition: width 0.2s ease-in-out;
    bottom:0px; height:20px; width:20px; right:0px;
}
.secinner{display:flex; justify-content: space-between;}
.secright{width:30%; overflow: hidden; margin-top:-80px; position:relative; padding-bottom:30px;}
.secright .swiper-pagination{left:0px ; right:0px; margin:0 auto;}
.sectitle{text-align:center;}
.secsubtitle{text-align:center;font-size: 16px; color:#000;}

.whitebgsection{background:#fff; color:#000;}

.swiper-pagination-bullet{background:#fff; opacity:1; border-radius:0px; margin-left:2px; margin-right:2px;}
.swiper-pagination-bullet-active{background:#c2ca22; width:30px;}
.secleft{width:65%;}
.secleft.full{width:100%;}
.secright img{max-width:100%; max-height:450px; object-fit:cover;}
.sectitle h2 {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    line-height: 32px;
    display: flex;
}
.sectdesc { display:none;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    padding-top: 10px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"]{
    -webkit-appearance: none;
    -moz-appearance: textfield; width:50px; height:30px; background:none; border:none; text-align:center; font-size:20px; font-weight:600;
    font-family: sans-serif;	 padding:0px 5px;
}
input[type="number"]:focus{outline:none; box-shadow:none;}
.inputnum{display:flex; margin:9px auto;align-items: center;-webkit-appearance: textfield;
    -moz-appearance: textfield;
    -moz-appearance: textfield;
    justify-content:center;}
.plus{cursor:pointer; width:30px; height:30px; display:flex; background:transparent;justify-content: center;
    align-items: center;font-size: 25px; cursor:pointer; position:relative; z-index:5;

    border-radius: 00px;}
.minus{cursor:pointer; width:30px; height:30px; display:flex; background:transparent;justify-content: center;
    align-items: center;font-size: 25px;
    cursor:pointer;
    border-radius: 00px;}

.clock{ display:flex; width:20px; height:20px; background:url('../images/clock.png') center center no-repeat; background-size:cover}
.error{display:none;}
.error.active{display:block;width: 100%;
    text-align: center;
    font-size: 21px;
    color: #ff0505;}
/*.box .inputnum{display:none;}*/
.box.active .gtitle{display:none;}
.box.active .inputnum{display:flex;justify-content: center; margin-bottom:5px; }


.sixstepboxcontent h3{
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;
}

.sixstepboxcontent .sixstepbox{
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    padding-top: 30px;
}

.sixstepboxcontent .sixstepbox .box::before{
    background-color: #505050;
    content: "";
    height: 8px;
    position: absolute;
    transition: width 0.2s ease-in-out;
    width: 75px;
}
.box{position:relative; cursor:pointer}
.box.active:after{position:absolute; right:10px; top:10px; background:url('../images/checked.png') center center no-repeat; width:32px; height:32px; content:""}


.categorybox{margin-top:50px;}
.catboxex{display:flex; column-gap:20px;}
.catitem{width:25%; position:relative}
.catitem .catcontent{position:absolute; left:0px; right:0px; margin:0 auto; max-width:90%; top:50%; transform:translateY(-50%);}
.catitem:before{position:absolute; left:0px; right:0px; margin:0 auto; height:100%; width:100%; content:""; background:rgba(0,0,0,0.3);}
.catitem .catcontent h2{text-align: center;justify-content: center; font-size:32px; line-height:36px;}
.catitem .catcontent .btn{
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}
.catitem .catcontent .btn:hover{background:#fff; color:#c0ce21; border-color:#c0ce21;}
.sixstepboxcontent .sixstepbox h3{
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 20px;
    line-height: 18px;
}

.cateitem.swiper{padding-left:40px; padding-right:40px;}


.pitem{ color:#000; background:#fff; padding:0px 20px; text-align:center; width: 100%;}
.pitem .pitemimage img{max-width:160px; width:100%; max-height: 160px;
    min-height: 160px; border-radius:10px;
    object-fit: cover;}
.pcarea{padding:15px 15px;}
.pitemtitle{font-size:20px; font-weight:600; line-height:24px;}
.pbotom{display:flex; align-items: center;justify-content: space-around;flex-direction: column;}
.pbotom .price{font-size:15px; line-height:17px;}
.pbotom .inputnum{
    margin:0px;
    margin-top:10px;

}
.pcontent{font-size:15px; line-height:18px; margin:15px 0px;}
.feature{font-size:15px; line-height:18px;}
.feature h4{font-size:18px;}
.pcarea .pcontent{min-height:0px; }
.feature ul{padding-left:0px; list-style:none; margin:10px 0px;}
.feature ul li{ font-size:18px; margin-bottom:7px;}
.feature ul li.tim{padding-left: 0;
    background: none;}


.sixstepboxcontent .sixstepbox img{
    position: relative;
    width: 20px;
    height: 20px;
    top: -20px;
    left: 55px;
}

.catitems{display:none;}
.catitems.active{display:block;}
.categorybox.active{display:none;}

.catnavi{    margin: 20px 0px;
    font-size: 12px;
    padding: 0 !important;}
.catnavi ul{list-style:none; display:flex; justify-content: space-between;}
.catnavi ul li{margin-right:10px;}
.catnavi ul a{padding:5px 15px; border:0px solid #fff; color:#fff; transition:all 0.5s; background: #555A60;
    color: #fff; border-radius:100px 100px 100px 100px}
.catnavi ul a:hover{background:#000; color:#fff;}
.catnavi ul li.active a{background:#000; color:#fff;}
.sixstepboxstepone{
    padding-top: 0px;
}

.cabinbox{  display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 50px; width:100%;
}
.cabinbox .catboxex{width:100%;}
.cabitem{position:relative; width:33%;text-align: center;}
.cabitem:before{position:absolute; left:0px; right:0px; margin:0 auto; height:100%; width:100%; content:""; background:rgba(0,0,0,0.5); display:none}

.cabitem img{  height: 160px; border-radius:10px; margin-bottom:10px;
    object-fit: cover;
    width: 160px;
}
#step5 .cabitem img{  height: 160px; width:160px; object-fit:cover; margin-bottom:10px; border-radius:10px;}
.cabitem .catcontent {

    left: 0px;
    right: 0px;
    margin: 0 auto;
    max-width: 160px;
    position: static;
    transform: none;

}
.cabitem .catcontent h2 {
    text-align: center;
    justify-content: center;
    font-size: 20px;
    line-height: 25px; min-height: 50px;
}
.ptext{font-size:15px; color:#000; margin-right:10px;}
.cabitem .inputnum{justify-content: center;}
.cabitem .inputnum input[type="number"]{color:#000;}
.pricetext{ text-align:center; width:90%; left:0px; right:0px; margin:0 auto; color:#000; font-size:15px; line-height:18px;position: static;
}


.formcontent{text-align:center; margin-top:60px;}

.gprice{display:none;}
.grouped  .gprice{display:inline-block;}
.grouped  .rprice{display:none;}

.finaldecide{display:flex; margin-top:50px;flex-direction: column;}
.leftpart{width:100%;}
.rightpart{width:100%; margin-left:0%;}
.cartitem{width:100%; margin-bottom:0px;}

.cartitemtitle{font-size:30px; color:#000; background:none}
.cartbox{display:flex; align-items: center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #000; background:none}
.cartitem .cartimage{width:30%; max-width:220px;line-height:0 }
.cartitem .cartimage img{height:100px; object-fit:cover; width:200px; line-height:0}
.cartitem .carttitle{width:100%;}
.cartbox .carttitle h2{width:25%; font-size:17px; justify-content:left}
.cartbox .carttitle h3{width:25%;font-size:17px;}
.cartitem .carttitle .features{width:25%;font-size:17px; background: none;}
.cartbox .carttitle .time{width:25%;font-size:17px;background: none;}
.cartbox .carttitle .values{width:25%;font-size:17px;}
.cartbox .cartdetails{width:20%;display: flex;
    justify-content: right; padding-right:30px;
    align-items: center;}
.cartitem .carttitle{display:flex;align-items: center;align-items: baseline;}

.cartitem .carttitle .features{ list-style:none; padding-left:15px;}
.cartitem .carttitle .features li{font-size:18px; color:#000; line-height: 19px;
    margin-bottom: 5px;}
.cartitem .carttitle .features li.tim{
    background-size: auto;
    background-size: 17px auto;background: none;
    padding-left: 0;
}
#nm-widget-panel .product_list_widget li .itemdata img{max-width:50px;}

.product-quantity input[type="number"],.quantity input[type="number"]{font-size:16px;}

.metaitem{font-size:14px;  line-height:16px;}
.custom-data{margin-bottom:10px; display:flex;}
.metaitem{}
.itemdata{display:flex;display: flex;
    align-items: center;    justify-content: space-between;
    font-size: 12px; line-height:16px; margin-bottom:7px;border: 1px solid #f1f1f1;
    padding-bottom: 7px
    color: #000;}
.itemdata strong{font-weight:700;}
.itemdata img{max-width:50px; max-height:50px;}
.itemdata div{margin-right:10px; width:50%}
.itemdata div.iqt{text-align:center; width:15%;}
.itemdata div.ipri{text-align:center; margin-right:0px;width:15%; padding-right:5px;}

.itemdata img{margin-right:10px;width: 15%;}
.cartitem .carttitle h3{margin:0px; padding:0px; font-size:17px; font-weight:600}
.time{font-size:16px; font-weight:400; margin-left:15px;  position:relative; color:#000; }
.cartdetails{text-align:right; color:#000; font-size:16px;}
#step6 .sectdesc{max-width:800px;}

#order_review .shop_table tbody .product-total{vertical-align: bottom;}
.person{display:flex; height:15px; width:15px; background:url('../images/user(1).png') center center no-repeat; background-size:15px auto; margin-right:5px;}


.rbox1{ padding:20px 40px; display:none }
.btitle{font-size:25px; color:#000;}
.bcontent{font-size:16px; line-height:24px; color:#fff;}
.bcontent ul{list-style:outside;}
.bcontent ul li{list-style:inherit;}
.box2{ padding:20px 40px; display:flex;justify-content: space-between; margin-top:20px;flex-direction: column;
    justify-content: center;
    text-align: center; background: none;
}
.box2 span{font-size:30px; font-weight:700; color:#000;}
.box2 span.boxtitle{font-size:17px; font-weight:400;}
.box3{ width:100%; display:flex;max-width: 250px;
    margin: 0 auto; margin-top:20px;}
.box3 .addtocartbtn{background:#fff; width:100%; padding:10px 15px; border:1px solid #000; font-size:16px; color:#000; text-align:center;  padding-top:12px; cursor:pointer; transition:all 0.5s}
.box3 .addtocartbtn:hover{background:#000; color:#fff;}


.box4{ width:100%; display:flex; margin-top:20px;margin:0 auto; max-width:300px; margin-top: 25px;
    margin-bottom: 25px; }
.box4 .gift{background:none; width:100%; padding:10px 15px; border:1px solid #000; font-size:16px; color:#000; text-align:center;  padding-top:12px; cursor:pointer; transition:all 0.5s; display:flex;justify-content: center;
    align-items: center;}
.box4 .gift img{width:30px; margin-right:5px;}
.box4 .gift:hover{background:#000; color:#fff;}
.sixstepboxstepone h2{
    font-size: 24px;
    font-weight: 600;
    color: #000;
    line-height: 32px;
    display: flex;justify-content: center;
}
.values{margin-right:3px;}


.sixstepboxstepone h2 span{
    transform: rotate(180deg);
}

.sixstepboxstepone h3{
    font-size: 14px;
    font-weight: 400;
    color: #000;
    padding-top: 10px;
}
.woocommerce-checkout #coupon_code_form{    margin-top: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    column-gap: 30px;
    row-gap: 19px;}
/*------cuantaspersonas2------*/


.cuantaspersonas2{
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    padding-top: 60px;
}

.cuantaspersonas2 .content{
    width: 100%;
}

.cuantaspersonas2 .sixstepboxcontent h3{
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;
}

.sixstepboxcontent .sixstepbox{
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    padding-top: 30px;
}

.sixstepboxcontent .sixstepbox .box::before{
    background-color: #505050;
    content: "";
    height: 8px;
    position: absolute;
    transition: width 0.2s ease-in-out;
    width: 75px;
}

.sixstepboxcontent .sixstepbox h3{
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 20px;
    line-height: 18px;
}

.sixstepboxcontent .sixstepbox img{
    position: relative;
    width: 20px;
    height: 20px;
    top: -20px;
    left: 55px;
}

.cuantaspersonas2 .sixstepboxstepone{
    margin-top: 50px;
}

.cuantaspersonas2 .sixstepboxstepone h2{
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    line-height: 32px;
    display: flex;
}

.cuantaspersonas2 .sixstepboxstepone h2 span{
    transform: rotate(180deg);
}

.cuantaspersonas2 .sixstepboxstepone h3{
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    padding-top: 10px;
}

.sixstepboxstepone .masajespacks{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 50px;
}

.sixstepboxstepone .masajespacks .image{
    width: auto;
    height: 370px;
    flex: 1 1 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
}

.sixstepboxstepone .masajespacks .image .overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.sixstepboxstepone .masajespacks .image h3{
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    line-height: 34px;
    text-align: center;
}

.sixstepboxstepone .masajespacks .image .btn{
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin-top: 20px;
}

.sixstepboxstepone .masajespacks .image .btn:hover{
    border: 1px solid #ffffff;
    color: #000000;
    background-color: #ffffff;
}


/*------cuantaspersonas2 end------*/


.fivestepbox.firstslider{ display:block; }
.fivestepbox{

}
#step2 .fivestepbox{display:flex; column-gap:30px; margin-top:40px;}
.fivestepbox .swiper-slide{
    padding:20px 20px 20px 20px;
}
.fivestepbox .box{ margin:0 auto;
    flex: 1 1 20px;
    background-color: #ffffff;
    padding: 0px; text-align:center

}

.persons {padding-left:20px; padding-right:20px;}
.fivestepbox .elementor-icon{ font-size:25px;}
.box.active .fa-circle::before {
    content: "\f192";
}
.box.active::after{display:none;}
.fivestepbox .swiper-button-next::after,.fivestepbox .swiper-button-prev::after,.catitems .swiper-button-prev::after,.catitems .swiper-button-next::after{font-size:28px;color: #000;}
.box.disabled{ background: none !important;
    opacity: 1;
    cursor: not-allowed; z-index:-1;
}
.box.disabled a{cursor: not-allowed !important;}
.hasselect .fivestepbox .box{ background: none !important;}
.box.disabled h3,.fivestepbox .box.disabled  .threestep .btn{color: #c3c3c3!important;}

.fivestepbox .box img{
    width:100%; border-radius:10px; height:160px; object-fit:cover; max-width:160px;margin-bottom:10px;
}

.fivestepbox .box .checked-right{
    float: right;
}

.fivestepbox .box h3{
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    padding-top: 25px;
    margin-bottom: -5px;
}

.fivestepbox .threestep h3{
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    padding-top: 8px;
}
.hasselect .fivestepbox .box:not(.active) h3,.hasselect .fivestepbox .box:not(.active) .threestep .btn{  color: #000000;}

.fivestepbox .threestep .btn{
    display: inline-block;
    padding:0px 0px;
    border:0px solid #C5CA2E;
    color: #000000;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin-top: 0px;
    text-align: center;
    width: 100%;
}

.fivestepbox .threestep .btnmargin{
    margin-top:7px;
}

.fivestepbox .box p{
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}

.fivestepbox .box h5{
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    background-color: #C5CA2E;
    display: inline-block;
    padding: 2px 5px;
}

.fivestepbox .adduser{
    display: flex;
    align-items: baseline;
}

.fivestepbox .adduser .minususer{
    padding-right: 6px;
}

.fivestepbox .adduser .plususer{
    padding-left: 6px;
}

.sixstepboxstepone .stepbtn{
    display: flex;
    justify-content: center;
}

.sixstepboxstepone .stepbtn .btn{


    padding:5px 24px;
    border: 1px solid #000;
    color: #000;

    font-size: 15px;
    font-weight: 400;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: flex;
    justify-content: center;align-items: center;column-gap: 5px;

}
.sixstepboxstepone .stepbtn .btn.disabled{color:#D1D1D1; border-color:#D1D1D1;z-index: -1;}
.disabled{cursor:not-allowed;}

.cabitem.disabled{opacity:0.2;}
.cabitem.disabled:after{position:absolute; height:100%; content:""; width:100%; left:0px; top:0px; z-index:6; cursor:not-allowed;}
/* Asegurar que .conditional sin .disabled se vea normal */
.cabitem.conditional:not(.disabled) {
    opacity: 1 !important;
}
.cabitem.conditional:not(.disabled):before {
    display: none !important;
}
/* Texto informativo de cabinas - evitar superposición */
.cabin-info-text {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 15px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    clear: both;
}
.sixstepboxstepone .floatright{
    float: right;
}

.sixstepboxstepone .twostepbtn{
    display: flex;
    justify-content: center;
    gap:10px;   margin-top:50px; margin-left:auto; margin-right:auto;
    margin-bottom:50px;
}

.sixstepboxstepone .twostepbtn .stepbackbtn img{
    width: 20px;
    height: 40px;
    object-fit: contain;

}
.stepbackbtn a{line-height:20px;}
.sixstepboxstepone .stepbackbtn{
    display: flex;
    justify-content: center;align-items: center;
}

.sixstepboxstepone .stepbackbtn .btn{
    display: inline-block;
    padding: 12px 24px;

    color: #000;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    z-index: 0; border:1px solid #000; width:130px; text-align:center;

}

.sixstepboxstepone .stepbtn .btn:hover,.sixstepboxstepone .stepbackbtn .btn:hover{
    border: 1px solid #000;
    color: #fff;
    background-color: #000;
}

.slider{
    width: 30%;
}

.slider .imgs {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.slider .img {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    left: 100%;
    /* animation duration can't be greater than variable interval in JS! */
    /* check JS for other settings */
    animation: .6s cubic-bezier(0.645, 0.045, 0.355, 1) 0s left;
    animation-fill-mode: forwards;
    background-size: cover !important;
    background-position: 50% !important;
}

/* Change images here */
.slider .img:nth-of-type(1) { background: url("../images/pantallas-v1.jpg"); }
.slider .img:nth-of-type(2) { background: url("../images/pantallas-v1.jpg"); }
.slider .img:nth-of-type(3) { background: url("../images/pantallas-v1.jpg"); }
.slider .img:nth-of-type(4) { background: url("../images/pantallas-v1.jpg"); }

.slider .img .contant{
    padding: 30px 30px;
}

.slider .img .contant h2{
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    line-height: 32px;
}

.slider .img .contant p{
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    padding-top: 10px;
    line-height: 22px;
}

.dots {
    position: relative;
    bottom: -18px;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.dot {
    width: 10px;
    height: 4px;
    background: #ffffff;
    border-radius: 0%;
    margin: 0 3px;
    cursor: pointer;
}

.active-dot {
    width: 16px;
    background: #C5CA2E;
    cursor: default;
}


.swiper-button-next, .swiper-button-prev{
    color:transparent !important;
}

.cabinbox p{
    width: 100%;
    padding:20px;
}

@keyframes leftNext {
    from { left: 100%; }
    to { left: 0; }
}

@keyframes leftCurr {
    from { left: 0; }
    to { left: -100%; }
}

@keyframes rightNext {
    from { left: -100%; }
    to { left: 0; }
}

@keyframes rightCurr {
    from { left: 0; }
    to { left: 100%; }
}

.whitebgsection p{
    font-size:14px;
}

@media screen and (max-width:991px){
    html{
        font-size: 55%;
    }

    section{
        padding: 2rem;
    }

    .content{
        width: 50%;
        padding-right: 25px;
    }

    .slider{
        width: 50%;
    }
    .secinner{flex-direction: column; width:100%; overflow:hidden;}
    .secleft {
        width: 100%;
    }
    .secright{display:none;}
    .navlist ul li{min-width:0px; width:100%}
    .navlist ul li::before{width:100%;}
    .fivestepbox{flex-wrap:nowrap; overflow:auto; padding-right:0px; padding-left:0px;}
    .fivestepbox .box{min-width:33%; min-height:150px;}
    /* Reducido min-height en paso 1 para que el botón quede más arriba */
    #step1 .fivestepbox .box{min-width:33%; min-height:auto;}
    /* Elementos vacíos no ocupan espacio */
    #step1 .fivestepbox .box:empty {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Swiper slides vacíos también ocultos */
    #step1 .fivestepbox .swiper-slide:empty,
    #step1 .fivestepbox .swiper-slide:has(> .box:empty) {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Reducir padding del contenedor en paso 1 */
    #step1 .fivestepbox {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    /* Reducir espacio del botón siguiente en paso 1 */
    #step1 .twostepbtn {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
    body{overflow-x:hidden;}
    .catboxex ,.catboxex{
        display: flex;
        column-gap: 20px;flex-wrap:nowrap; overflow:auto; padding-right:50px;
    }
    .catitem,.cabitem {
        width: 50%;
        position: relative;
        min-width: 50%;
    }
    .catitem{width:60%; min-width:60%;}
    .cats {
        flex-wrap:nowrap; overflow:auto; padding-right:00px; margin-left:0px;
    }
    .cateitem.swiper {
        padding-left: 0;
        padding-right: 0;
    }
    .finaldecide{flex-direction: column;}
    .finaldecide .leftpart {
        width: 100%;
    }
    .finaldecide {
        width: 100%;
        margin-left: 0;
    }
    .cartbox{flex-wrap: wrap;}
    .cartitem .carttitle{width:100%; margin-left:0%;}
    .cartitem .cartdetails {
        margin-left: 35%;
        margin-bottom: 20px;
        width: 60%;justify-content: left;
    }
    .cartitem .cartimage{margin-bottom:-45px;}
    .finaldecide .rightpart {
        width: 100%;
        margin-left: 0%;
    }
    .navlist ul li.finish::after{
        bottom: 5px;
        height: 10px;
        width: 10px;
        right: 0px;
    }
    .page-template-template_product #content{width:100%; max-width:1024px !important; padding-left:0px; padding-right:0px;}
    .navi,.sectitle,.sectdesc,.catnavi{width:100%; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px;}
    .fivestepbox{padding-left:0px;}
    .catboxex, .catboxex,.cats{margin-left:0px;}
    .finaldecide {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================
   RESPONSIVE MOBILE - CARRUSELES Y FIXES
   ============================================ */
@media screen and (max-width:768px){
    .fivestepbox .swiper-slide {
        padding: 20px 10px 20px 10px;
    }
    .persons{padding:0px;}
    .fivestepbox .swiper-button-next::after, .fivestepbox .swiper-button-prev::after, .catitems .swiper-button-prev::after, .catitems .swiper-button-next::after{font-size:15px;}
    .swiper-button-next, .swiper-rtl .swiper-button-prev{right:0px;}
    .swiper-button-prev, .swiper-rtl .swiper-button-next{left:-6px;}
    .fivestepbox .box h3{padding-top:0px;}
    .fivestepbox .box p{margin-bottom:7px;}

    .catnavi ul{
        flex-wrap: wrap;
        justify-content: center;
    }
    .catnavi ul li{margin-left:10px; margin-bottom:10px;}
    .sixstepboxstepone .stepbackbtn .btn{margin:0px;}

    /* ============================================
       PASO 1: REDUCIR ESPACIO VERTICAL - MÓVIL
       ============================================ */
    #step1 .fivestepbox.firstslider {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 20px !important;
    }
    
    #step1 .fivestepbox .swiper-slide {
        padding: 10px 5px !important;
    }
    
    #step1 .fivestepbox .box {
        min-height: auto !important;
        padding: 15px 10px !important;
    }
    
    /* Elementos vacíos completamente ocultos */
    #step1 .fivestepbox .box:empty,
    #step1 .fivestepbox .swiper-slide:empty {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Reducir espacio del botón siguiente en paso 1 móvil */
    #step1 .twostepbtn {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Reducir padding del contenedor principal en paso 1 */
    #step1 .secleft.full {
        padding-bottom: 10px !important;
    }

    /* ============================================
       PASO 2: CIRCUITO SPA - CARRUSEL HORIZONTAL
       ============================================ */
    body.single-product #step2 .fivestepbox,
    body #step2 .fivestepbox,
    #step2 .fivestepbox {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    body.single-product #step2 .fivestepbox .box,
    body #step2 .fivestepbox .box,
    #step2 .fivestepbox .box {
        flex: 0 0 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    body.single-product #step2 .box img,
    body #step2 .box img,
    #step2 .box img {
        width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    body.single-product #step2 .box h3,
    body #step2 .box h3,
    #step2 .box h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 10px 0 !important;
        min-height: auto !important;
    }

    body.single-product #step2 .box .price,
    body #step2 .box .price,
    #step2 .box .price {
        font-size: 20px !important;
        font-weight: bold !important;
        color: #007bff !important;
        margin: 8px 0 !important;
    }

    body.single-product #step2 .box .selectbtn,
    body.single-product #step2 .box .threestep .btn,
    body #step2 .box .selectbtn,
    body #step2 .box .threestep .btn,
    #step2 .box .selectbtn,
    #step2 .box .threestep .btn {
        padding: 12px 20px !important;
        font-size: 16px !important;
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 6px !important;
    }

    /* ============================================
       PASO 3: MASAJES - FILTROS + CARRUSEL
       ============================================ */
    body.single-product #step3 .catnavi,
    body #step3 .catnavi,
    #step3 .catnavi {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important;
        padding: 10px 15px !important;
        white-space: nowrap !important;
        margin-bottom: 15px !important;
    }

    body.single-product #step3 .catnavi ul,
    body #step3 .catnavi ul,
    #step3 .catnavi ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    body.single-product #step3 .catnavi li,
    body #step3 .catnavi li,
    #step3 .catnavi li {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    body.single-product #step3 .catnavi li a,
    body #step3 .catnavi li a,
    #step3 .catnavi li a {
        padding: 10px 20px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Paso 3 móvil: CSS puro sin Swiper (igual que Paso 2) */
    /* Hacemos el scroll en .cateitem y dejamos .cateitem-wrapper como tira */
    body.single-product #step3 .cats.active .cateitem,
    body #step3 .cats.active .cateitem,
    #step3 .cats.active .cateitem {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        overscroll-behavior-x: contain !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Sobrescribir .cats para que no interfiera */
    body.single-product #step3 .cats.active,
    body #step3 .cats.active,
    #step3 .cats.active {
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }

    body.single-product #step3 .cateitem-wrapper,
    body #step3 .cateitem-wrapper,
    #step3 .cateitem-wrapper {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        width: auto !important;
        min-width: 100% !important;
    }

    /* En Paso 3 NO usamos Swiper: sus botones pueden quedar encima y bloquear el swipe */
    body.single-product #step3 .swiper-button-next,
    body.single-product #step3 .swiper-button-prev,
    body #step3 .swiper-button-next,
    body #step3 .swiper-button-prev,
    #step3 .swiper-button-next,
    #step3 .swiper-button-prev {
        display: none !important;
    }

    body.single-product #step3 .cateitem-slide,
    body #step3 .cateitem-slide,
    #step3 .cateitem-slide {
        flex: 0 0 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        width: 48% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        box-sizing: border-box !important;
     
        flex-shrink: 0 !important;
    }

    body.single-product #step3 .cateitem-slide .pitem,
    body #step3 .cateitem-slide .pitem,
    #step3 .cateitem-slide .pitem {
        padding: 0px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Asegurar que las imágenes mantengan proporción y no tengan límite de 160px */
    body.single-product #step3 .pitem .pitemimage img,
    body #step3 .pitem .pitemimage img,
    #step3 .pitem .pitemimage img {
        max-width: none !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    body.single-product #step3 .quantityminus,
    body.single-product #step3 .quantityplus,
    body #step3 .quantityminus,
    body #step3 .quantityplus,
    #step3 .quantityminus,
    #step3 .quantityplus {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    body.single-product #step3 .quantityinput,
    body #step3 .quantityinput,
    #step3 .quantityinput {
        width: 60px !important;
        height: 40px !important;
        font-size: 18px !important;
        text-align: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    body.single-product #step3 .pitemquantity,
    body #step3 .pitemquantity,
    #step3 .pitemquantity {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }

    /* ============================================
       PASO 4: CABINAS - CARRUSEL HORIZONTAL
       ============================================ */
    body.single-product #step4 .fivestepbox,
    body.single-product #step4 .cabinbox,
    body #step4 .fivestepbox,
    body #step4 .cabinbox,
    #step4 .fivestepbox,
    #step4 .cabinbox {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        width: 100% !important;
    }

    body.single-product #step4 .fivestepbox .box,
    body.single-product #step4 .cabitem,
    body #step4 .fivestepbox .box,
    body #step4 .cabitem,
    #step4 .fivestepbox .box,
    #step4 .cabitem {
        flex: 0 0 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.single-product #step4 .box img,
    body.single-product #step4 .cabitem img,
    body #step4 .box img,
    body #step4 .cabitem img,
    #step4 .box img,
    #step4 .cabitem img {
        width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    body.single-product #step4 .quantityminus,
    body.single-product #step4 .quantityplus,
    body #step4 .quantityminus,
    body #step4 .quantityplus,
    #step4 .quantityminus,
    #step4 .quantityplus {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    body.single-product #step4 .quantityinput,
    body #step4 .quantityinput,
    #step4 .quantityinput {
        width: 60px !important;
        height: 40px !important;
        font-size: 18px !important;
        text-align: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    /* ============================================
       PASO 5: EXTRAS - CARRUSEL HORIZONTAL
       ============================================ */
    body.single-product #step5 .fivestepbox,
    body.single-product #step5 .cabinbox,
    body #step5 .fivestepbox,
    body #step5 .cabinbox,
    #step5 .fivestepbox,
    #step5 .cabinbox {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        width: 100% !important;
    }

    body.single-product #step5 .fivestepbox .box,
    body.single-product #step5 .cabitem,
    body #step5 .fivestepbox .box,
    body #step5 .cabitem,
    #step5 .fivestepbox .box,
    #step5 .cabitem {
        flex: 0 0 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.single-product #step5 .box img,
    body.single-product #step5 .cabitem img,
    body #step5 .box img,
    body #step5 .cabitem img,
    #step5 .box img,
    #step5 .cabitem img {
        width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    body.single-product #step5 .quantityminus,
    body.single-product #step5 .quantityplus,
    body #step5 .quantityminus,
    body #step5 .quantityplus,
    #step5 .quantityminus,
    #step5 .quantityplus {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    body.single-product #step5 .quantityinput,
    body #step5 .quantityinput,
    #step5 .quantityinput {
        width: 60px !important;
        height: 40px !important;
        font-size: 18px !important;
        text-align: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    /* ============================================
       PASO 6: RESUMEN - PADDING Y LAYOUT
       ============================================ */
    body.single-product #step6,
    body #step6,
    #step6 {
        padding: 15px !important;
    }

    body.single-product #step6 .cartbox,
    body #step6 .cartbox,
    #step6 .cartbox {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        box-sizing: border-box !important;
    }

    body.single-product #step6 .carttitle h4,
    body #step6 .carttitle h4,
    #step6 .carttitle h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    body.single-product #step6 .carttitle .price,
    body #step6 .carttitle .price,
    #step6 .carttitle .price {
        font-size: 24px !important;
        font-weight: bold !important;
        color: #007bff !important;
        display: block !important;
        margin-top: 5px !important;
    }

    body.single-product #step6 .cartdesc,
    body #step6 .cartdesc,
    #step6 .cartdesc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 10px 0 !important;
        color: #666 !important;
    }

    body.single-product #step6 .quantityminus,
    body.single-product #step6 .quantityplus,
    body #step6 .quantityminus,
    body #step6 .quantityplus,
    #step6 .quantityminus,
    #step6 .quantityplus {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

    body.single-product #step6 .quantityinput,
    body #step6 .quantityinput,
    #step6 .quantityinput {
        width: 60px !important;
        height: 40px !important;
        font-size: 18px !important;
        text-align: center !important;
        border-radius: 6px !important;
    }

    body.single-product #step6 .removebtn,
    body #step6 .removebtn,
    #step6 .removebtn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        font-size: 18px !important;
        border-radius: 6px !important;
    }

    body.single-product #step6 .box2,
    body #step6 .box2,
    #step6 .box2 {
        padding: 20px 15px !important;
        margin: 20px 0 !important;
        background: #fff !important;
        border: 2px solid #007bff !important;
        border-radius: 10px !important;
    }

    body.single-product #step6 .box2 #total,
    body.single-product #step6 .box2 span,
    body #step6 .box2 #total,
    body #step6 .box2 span,
    #step6 .box2 #total,
    #step6 .box2 span {
        font-size: 36px !important;
        font-weight: bold !important;
        color: #007bff !important;
        display: block !important;
        margin: 10px 0 !important;
    }

    body.single-product #step6 .box3,
    body #step6 .box3,
    #step6 .box3 {
        padding: 15px !important;
        margin-top: 20px !important;
        max-width: 100% !important;
    }

    body.single-product #step6 .box3 .addtocartbtn,
    body #step6 .box3 .addtocartbtn,
    #step6 .box3 .addtocartbtn {
        background: #28a745 !important;
        color: white !important;
        padding: 18px 20px !important;
        font-size: 18px !important;
        font-weight: bold !important;
        border-radius: 8px !important;
        width: 100% !important;
        min-height: 56px !important;
        border: none !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    body.single-product #step6 .box3 .addtocartbtn:hover,
    body #step6 .box3 .addtocartbtn:hover,
    #step6 .box3 .addtocartbtn:hover {
        background: #218838 !important;
    }

    /* Botones de navegación más grandes */
    body.single-product .nextbtn,
    body.single-product .prevbtn,
    body .nextbtn,
    body .prevbtn,
    .nextbtn,
    .prevbtn {
        padding: 14px 20px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        min-width: 120px !important;
        border-radius: 8px !important;
        margin: 10px 5px !important;
    }

    body #step3 .cateitem-slide, #step3 .cateitem-slide{
         flex: none !important;
         min-width: auto !important;

         width: auto !important;
    }
}
/* FIN RESPONSIVE MOBILE */

/* ============================================
   PASO 3 DESKTOP - Layout de 3 columnas CON scroll horizontal
   ============================================ */
@media screen and (min-width: 769px) {
    /* Asegurar que contenedores padres no bloqueen el scroll */
    body.single-product #step3 .secinner,
    body #step3 .secinner,
    #step3 .secinner {
        overflow: visible !important;
        overflow-x: visible !important;
    }
    
    body.single-product #step3 .secleft.full,
    body #step3 .secleft.full,
    #step3 .secleft.full {
        overflow: visible !important;
        overflow-x: visible !important;
    }
    
    /* Contenedor con scroll horizontal en desktop */
    body.single-product #step3 .cats.active .cateitem,
    body #step3 .cats.active .cateitem,
    #step3 .cats.active .cateitem {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        overscroll-behavior-x: contain !important;
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        /* Forzar scrollbar visible */
        scrollbar-width: thin !important;
        scrollbar-color: #888 #f1f1f1 !important;
    }
    
    /* Scrollbar para webkit browsers */
    body.single-product #step3 .cats.active .cateitem::-webkit-scrollbar,
    body #step3 .cats.active .cateitem::-webkit-scrollbar,
    #step3 .cats.active .cateitem::-webkit-scrollbar {
        height: 8px !important;
        display: block !important;
    }
    
    body.single-product #step3 .cats.active .cateitem::-webkit-scrollbar-track,
    body #step3 .cats.active .cateitem::-webkit-scrollbar-track,
    #step3 .cats.active .cateitem::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }
    
    body.single-product #step3 .cats.active .cateitem::-webkit-scrollbar-thumb,
    body #step3 .cats.active .cateitem::-webkit-scrollbar-thumb,
    #step3 .cats.active .cateitem::-webkit-scrollbar-thumb {
        background: #888 !important;
        border-radius: 4px !important;
    }
    
    /* Flex horizontal con 3 columnas visibles + scroll */
    body.single-product #step3 .cateitem-wrapper,
    body #step3 .cateitem-wrapper,
    #step3 .cateitem-wrapper {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        scroll-snap-type: x mandatory !important;
        gap: 20px !important;
        padding: 20px 15px !important;
        width: auto !important;
        min-width: 100% !important;
    }

    /* Cada slide ocupa ~33% (3 columnas visibles) */
   /* body.single-product #step3 .cateitem-slide,
    body #step3 .cateitem-slide,
    #step3 .cateitem-slide {
        flex: 0 0 calc(33.333% - 14px) !important;
        min-width: calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
        width: calc(33.333% - 14px) !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
    */
    /* Imágenes más grandes en desktop */
    body.single-product #step3 .pitem .pitemimage img,
    body #step3 .pitem .pitemimage img,
    #step3 .pitem .pitemimage img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
    }
    
    /* Ocultar botones Swiper en desktop también */
    body.single-product #step3 .swiper-button-next,
    body.single-product #step3 .swiper-button-prev,
    body #step3 .swiper-button-next,
    body #step3 .swiper-button-prev,
    #step3 .swiper-button-next,
    #step3 .swiper-button-prev {
        display: none !important;
    }
}

/* ============================================
   PARCHE ESPECÍFICO PASO 4 - SOBRESCRIBIR .catboxex
   ============================================ */
@media screen and (max-width:768px) {
    
    /* PASO 4: Sobrescribir .catboxex que viene de línea 838 */
    #step4 .catboxex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        column-gap: 15px !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }
    
    /* PASO 4: Cards 48% */
    #step4 .catboxex .cabitem {
        flex: 0 0 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        width: 48% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

}

/* ============================================
   PARCHE DEFINITIVO PASO 4
   Añadir al FINAL de custome_new.css
   ============================================ */

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

    /* FORZAR .cabinbox como contenedor flex horizontal */
    body #step4 .cabinbox,
    body.single-product #step4 .cabinbox,
    #step4 .cabinbox {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* FORZAR .catboxex como contenedor flex horizontal */
    body #step4 .cabinbox .catboxex,
    body.single-product #step4 .cabinbox .catboxex,
    body #step4 .catboxex,
    body.single-product #step4 .catboxex,
    #step4 .cabinbox .catboxex,
    #step4 .catboxex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        width: 100% !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* FORZAR .cabitem al 48% - SOBRESCRIBIR línea 842 de media query 991px */
    body #step4 .cabinbox .catboxex .cabitem,
    body.single-product #step4 .cabinbox .catboxex .cabitem,
    body #step4 .catboxex .cabitem,
    body.single-product #step4 .catboxex .cabitem,
    body #step4 .cabitem,
    body.single-product #step4 .cabitem,
    #step4 .cabinbox .catboxex .cabitem,
    #step4 .catboxex .cabitem,
    #step4 .cabitem {
        flex: 0 0 48% !important;
        width: 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
    }

    /* Asegurar que items deshabilitados también tengan el layout correcto */
    body #step4 .cabitem.disabled,
    body.single-product #step4 .cabitem.disabled,
    body #step4 .cabitem.conditional,
    body.single-product #step4 .cabitem.conditional,
    body #step4 .cabitem.conditional.disabled,
    body.single-product #step4 .cabitem.conditional.disabled,
    #step4 .cabitem.disabled,
    #step4 .cabitem.conditional,
    #step4 .cabitem.conditional.disabled {
        flex: 0 0 48% !important;
        width: 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
       
    }

    /* Imágenes */
    body #step4 .cabitem img,
    body.single-product #step4 .cabitem img,
    #step4 .cabitem img,
    body #step4 .cabitem .catimage img,
    body.single-product #step4 .cabitem .catimage img,
    #step4 .cabitem .catimage img {
        width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        display: block !important;
    }

    /* Contenido de las tarjetas */
    body #step4 .cabitem .catcontent,
    body.single-product #step4 .cabitem .catcontent,
    #step4 .cabitem .catcontent {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 10px !important;
    }

}
/* new mobile style 08-02-2026*/
.summary{display:none}


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

    .whitebgsection{min-height: 88vh;}
.product_sections{padding-top: 30px;}

.inputnum{border: 1px solid;
    width: fit-content;}
    body.single-product #step2 .fivestepbox .box, body #step2 .fivestepbox .box, #step2 .fivestepbox .box {
        flex: 0 0 45% !important;
        min-width: 45% !important;
        max-width: 45% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        min-height: auto; background: #f1f1f1;background: #f1f1f1;
        padding: 10px; box-shadow: 0px 2px 3px rgba(0,0,0,0.1); border-radius: 5px;
    }
 #step2 .sixstepboxstepone   .hasselect .fivestepbox .box {
    background: #f1f1f1 !important;
}
#step2  .hasselect .fivestepbox .box.active {
    background: #c9c9c9 !important;
}
    body.single-product #step2 .box .selectbtn, body.single-product #step2 .box .threestep .btn, body #step2 .box .selectbtn, body #step2 .box .threestep .btn, #step2 .box .selectbtn, #step2 .box .threestep .btn {
        padding: 5px 20px !important;
        font-size: 15px !important;
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 6px !important;
    }
 body #step3 .catnavi ul, #step3 .catnavi ul { padding-left: 0px;}


body #step6 .box2 span, #step6 .box2 span { font-size: 20px; margin: 0px;}
 body #step6 .box2, #step6 .box2 {
        padding: 2px 15px !important;
        margin: 6px 0px !important
 }
.cartbox .carttitle h2{font-size: 14px;}
.cartitem .carttitle h3{font-size: 12px;}
.cartbox .carttitle .time{font-size: 12px;}
body #step6 .carttitle .price, #step6 .carttitle .price {
        font-size: 15px !important;
}
 body #step6 .box3 .addtocartbtn, #step6 .box3 .addtocartbtn {        padding: 11px 20px !important;        min-height: 50px !important;}

.catboxex, .catboxex {
        display: flex;
        column-gap: 10px;
}
#step5 .cabitem {     background: #f1f1f1;}
.catimage {
    background: #f1f1f1;
    padding: 6px;
}
.cabinbox .catboxex{padding-bottom: 15px;}
 body #step4 .cabinbox .catboxex{display: flex !important;
    flex-flow: row !important;
    width: 100% !important;
    gap: 10px !important;}
body #step4 .cabinbox .catboxex .cabitem, #step4 .cabinbox .catboxex .cabitem{
    background: #f1f1f1;
}
.error.active {
  
    font-size: 17px;
  
}
body #step3 .cateitem-slide, #step3 .cateitem-slide{max-width: 42% !important;        width: 42% !important;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }

.catnavi{margin: 10px 0px;}
 body #step3 .cateitem-wrapper, #step3 .cateitem-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 20px 5px !important;
        width: auto !important;
        min-width: 100% !important;
    }
body #step3 .catnavi ul, #step3 .catnavi ul{padding-bottom: 10px;}
 body #step3 .cateitem-slide .pitem, #step3 .cateitem-slide .pitem { padding: 0px !important;}
  body #step3 .pitem .pitemimage img, #step3 .pitem .pitemimage img { object-fit: cover !important;}
  .feature ul li {
    font-size: 14px;
    margin-bottom: 7px;
    font-weight: 600;
}
.pitemtitle {
    font-size: 16px;
}
#step4 .cabitem{border-radius: 5px !important;    padding: 5px !important;}
 #step5 .cabinbox { padding: 10px 5px !important;}
 .cabitem .catcontent h2 {
    text-align: center;
    justify-content: center;
    font-size: 17px;
    line-height: 20px;
 }
 #step5 .catimage{border-radius: 5px;}
  body  #step5 .cabitem {border-radius: 5px !important;}
  .finaldecide{margin-top: 12px;}
  body #step6 .box2 span, #step6 .box2 span {font-size: 14px !important;margin: 0px 0 !important;}

  .cartbox .carttitle .values {
 
    font-size: 13px;
}
body.single-product #step6 .cartbox, body #step6 .cartbox, #step6 .cartbox { margin-bottom: 5px !important;
        padding: 5px 15px !important;
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
        border: none !important;
    
}
.sixstepboxstepone h2 { font-size: 20px; line-height: 25px;}
    body #step6 .box3 .addtocartbtn, #step6 .box3 .addtocartbtn {
        padding: 5px 20px !important;
        min-height: 39px !important;
        min-height: 30px !important; line-height: 30px !important; font-size: 15px !important;
    }
    body #step6 .box3, #step6 .box3{margin-top: 0px !important;}
    .cartitem .carttitle .features li {
    font-size: 14px;
    }
    body #step6 .box2 #total, body #step6 .box2 span, #step6 .box2 #total, #step6 .box2 span {
        font-size: 16px !important; margin-top: 0px !important;
    }
        body #step6 .box2, #step6 .box2 {flex-direction: row;
        align-items: center;
        column-gap: 10px; margin-top: 0px !important;
        }
    #step6 .box2 #total{font-size: 18px !important;}
    body #step6 .box2 #total,  #step6 .box2 #total{font-size: 18px !important;margin-bottom: 0px !important;}
        .cartbox .carttitle .time {
      margin-left: 5px;
    }
    .whitebgsection p {
    font-size: 15px;
}

        .finaldecide .leftpart {
        width: 100%;
        max-height: 340px;
        overflow: auto;
        padding: 5px;min-height: 340px;
    }
        .product_sections {
        padding-top: 5px;
    }
    body #step6, #step6 {
        padding: 10px 15px !important;
    }
    .cartitem .carttitle .features {
    list-style: none;
    padding-left: 8px;
}
.conditions input[type="checkbox"]{    position: relative;
    top: 2px;}


body.single-product #step2 .box h3, body #step2 .box h3, #step2 .box h3{margin: 5px 0px !important;}
body.single-product #step2 .box img, body #step2 .box img, #step2 .box img {
        width: 100% !important;
        height: auto !important;
        min-height: 143px !important;
        max-height: 145px !important;
}
.formcontent {
    text-align: center;
    margin-top: 30px;
}
.pcarea {
    padding: 7px 10px;
}
.pitem .pitemimage img {
    max-width: 160px;
    width: 100%;
    max-height: 145px;
    min-height: 145px;
}
    body #step3 .cateitem-wrapper, #step3 .cateitem-wrapper {padding:10px 5px !important}
    .pbotom .price{margin-bottom: 0px;}
    .pbotom .inputnum { margin-top:6px;}
    .sixstepboxstepone .twostepbtn{margin-top: 25px; margin-bottom: 25px;}
   .sixstepboxstepone .stepbackbtn .btn{padding: 9px 24px;}
   .sixstepboxstepone .stepbtn .btn{line-height: 28px;}
   .sixstepboxstepone .twostepbtn .stepbackbtn img{height: 33px;}
    .plus,.minus,input[type="number"] { height: 25px;}
    body.single-product #step3 .catnavi, body #step3 .catnavi, #step3 .catnavi{ margin-bottom: 0px !important;}
   .cabin-info-text {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 10px 20px;}
    #step4     .error {
        
        margin-top: -15px;
        margin-bottom: -15px;
    }
  #step6  p:empty { display: none;}
      .whitebgsection p {
        font-size: 15px;
        margin-bottom: 3px;
    }
    .cabitem .catcontent{max-width: 90%;}
     body #step2 .fivestepbox, #step2 .fivestepbox { margin-top: 0px;}
}
@media screen and (max-width:680px) {

	.cartitem .carttitle {
    display: flex;
    align-items: center;
    align-items: start;
    flex-wrap: wrap;
}
.cartitem	.cartbox .carttitle h2 {
    width: 80%; margin:0px;
	}
	    .cartitem .carttitle h3 {
        font-size: 12px;
        width: 80%;
    }
	    .cartbox .carttitle .time {
        margin-left: 0px;
        width: 80%;
    }
	    .cartbox .carttitle .values {
        font-size: 13px;
        width: 80%; line-height: 13px;
    }
	.leftpart .cartitem .cartbox{position:relative;border-radius:0px; box-shadow:none !important; background:none !important; border-bottom:1px dotted #000 !important}
	    #step6 .leftpart .carttitle .price {
        font-size: 15px !important;
        position: absolute;
        right: 15px;
    }
	 body #step6 .cartbox, #step6 .cartbox {
        margin-bottom: 5px !important;
        padding: 5px 0px !important;
        box-shadow: none;
        border: none !important;
        padding-bottom: 10px !important;
        background: none !important;
        border-bottom: 1px dotted #000 !important;
        border-radius: 0px !important;
    }
	.whitebgsection p{padding-left:10px; padding-right:10px}
	.cartitem .carttitle .features{padding-left:0px;}
	  .rightpart  .whitebgsection p {
			font-size: 13px;}
	.summary1{display:none}
	
 body #step2 .fivestepbox, #step2 .fivestepbox { margin-top:0px !important
	}
}

@media screen and (max-width:480px) {
body.single-product #step2 .fivestepbox .box, body #step2 .fivestepbox .box, #step2 .fivestepbox .box{ min-width: 45% !important;}
    body #step3 .cateitem-slide, #step3 .cateitem-slide {
        max-width:170px !important;
        width: 45% !important; min-width: 45% !important;
    }
	    .pitem .pitemimage img {
        max-width: 160px;
        width: 100%;
        max-height: 120px;
        min-height: 120px;
    }
    body #step5 .cabitem {
        max-width: 46% !important;
        width: 46% !important; min-width: 46% !important;
    }
	body #step2 .box img, #step2 .box img {
        width: 100% !important;
        height: auto !important;
        min-height: 123px !important;
        max-height: 125px !important;
    }
	body #step2 .fivestepbox, #step2 .fivestepbox{gap:10px !important}
	.pricetext{font-size:13px; line-height:15px;}
	body #step4 .cabitem .catcontent, #step4 .cabitem .catcontent{padding:5px !important}
	.inputnum { margin:5px auto;}
	body #step2 .box .threestep .btn, #step2 .box .selectbtn, #step2 .box .threestep .btn {
		padding: 5px 5px !important;        line-height: 17px;
        font-size: 13px !important;}
	body #step5 .cabitem img, #step5 .box img, #step5 .cabitem img { max-height:130px !important}
        .cabitem .catcontent h2 {
        text-align: center;
        justify-content: center;
        font-size: 14px;
        line-height: 14px;min-height: 29px;
    }
     body #step3 .catnavi li a, #step3 .catnavi li a {
        padding: 3px 14px !important;
        border-radius: 17px !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        min-height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}