#qodef-page-inner {
    margin-top: 1vw !important;
}




#main{
    width: 100%;
    height: 32vw;
    padding: 0;
    margin-bottom: 0;
}
#main .section{
    height: 100%;
    transform: scale(0.875) translateX(-3vw);
}




#main #viewer{
    width: 48%;
}



#main #viewer #slider {
    width: 12%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
#main #viewer #slide {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0;
}
#main #viewer #slider #slide .image {
    width: 100%;
    height: auto;
    aspect-ratio: 1.1;
    background-color: white;
    padding: 0.2vw;
    margin: 0.25vw 0;
    overflow: hidden;
    border: 0.05vw solid lightgray;
    border-radius: 0.75vw;
    cursor: pointer;
}
#main #viewer #slider #slide .image img{
    width: auto;
    height: auto;
    border: none;
    cursor: pointer;
}
#main #viewer #slider #slide .image:hover{
    border: 0.15vw outset  #2162a1 !important;
}
#main #viewer #slider #slide .image:hover img{
    transform: scale(1.025);
}







#main #viewer #image {
    width: 87%;
    height: 100%;
    border: 0.02vw solid lightgrey;
}
/*
#main #viewer #image:hover img{
    transform: scale(1.05);
}*/
#main #viewer #image img{
    width: auto;
    height: 90%;
}

.img_width{
    width: 90% !important;
    height: auto !important;
}
.img_height{
    width: auto !important;
    height: 90% !important;
}









#main #viewer .arrow {
    width: 1vw;
    height: auto;
    bottom: 10%;
    cursor: pointer;
    display: none !important;
}
#main #viewer .left{
    left: 1vw;
}
#main #viewer .right{
    right: 1vw;
}
#main #viewer .arrow img{
    width: 100%;
    height: auto;
    opacity: 0.3;
}
#main #viewer .arrow:hover img{
    transform: scale(1.025);
    opacity: 0.75;
}












#main #data{
    width: 35%;
    padding: 0 0.5vw;
}

#main #data .data{
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.05vw;
}




#main #data .stock{
    width: 13vw;
    height: auto;
    top: 0.5vw;
    right: 0vw;
    display: none !important;
    opacity: 0;
    visibility: hidden;
}
#main #data .stock #stock{
    width: auto;
    padding: 0.25vw 0.5vw !important;
    font-size: 1vw;
    font-weight: bold;
    color: white;
    background-color: rgb(27, 169, 27);
    border-radius: 0.25vw;
}

.orange{
    background-color: rgb(255 138 0) !important;
}
.red{
    background-color: rgb(216, 14, 14) !important;
}
.grey{
    background-color: rgb(121, 121, 121) !important;
}




#main #data #title{
    padding: 0;
    font-size: 3vw;
    font-weight: bold;
    text-align: left;
    line-height: 2.9vw;
}
#main #data #description{
    font-size: 1.15vw;
    font-weight: bold;
    text-align: left;
    padding: 0.25vw 0 !important;
}
#main #data #factor{
    font-size: 1.05vw;
    font-weight: bold;
    text-align: left;
    color: #6c6b6b;
}






#main #data #price {
    height: 8vw;
    padding: 1vw 1vw !important;
    margin: 1vw 0 !important;
    border-radius: 0.5vw;
    background-color: #e9aa3526;
}
#main #data #price .offer{
    width: 100%;
}
#main #data #price .offer #total{
    justify-content: center;
}
#main #data #price .values{
    height: 2.5vw;
    padding-right: 1vw;
}
#main #data #price .values .title{
    font-weight: bold;
}
#main #data #price .values .value{
    font-weight: bold;
    text-align: right;
}

#main #data #price .values #price_discounted{
    font-size: 2vw;
}
#main #data #price #discount{
    padding: 0 1vw;
}
#main #data #price #discount span{    
    color: white;
    background-color: rgb(27, 169, 27);
    padding: 0.25vw 0.5vw;
}



#main #data #price #regular {
    width: 100%;
    height: auto;
}
#main #data #price #regular .data{
    width: auto;
    color: grey;
    font-size: 1vw;
}
#main #data #price #regular .data .title{
    font-weight: bold;
}
#main #data #price #regular .data .value{
    margin-left: 0.5vw;
    text-decoration: line-through;
}





#main #data #price #pair{
    width: 100%;
    height: auto;
    padding: 0;
    margin-top: 0.5vw;
}
#main #data #price #pair .data{
    width: auto;
    padding: 0.5vw 2vw !important;
    font-size: 0.85vw;
    color: grey;
    font-weight: normal;
    background-color: #f7f7f7;
}
#main #data #price #pair .data{
    font-weight: bold;
}

#main #data #price #pair .data .values {
    width: auto;
    height: auto;
    padding: 0;
}
#main #data #price #pair .data .values .value{
    font-size: 0.85vw;
    margin-left: 0.5vw;
    text-align: center;
    text-decoration: line-through;
}
#main #data #price #pair .data .values .disc{
    margin-left: 0.5vw;
    font-size: 0.9vw;
    font-weight: bold;
    color: rgb(27, 169, 27);
    text-align: center;
}







#main #data #unit .title,
#main #data #sizes .title{
    width: 17%;
    height: 100%;
    font-weight: bold;
    font-size: 1.1vw;
    padding: 0;
}
#main #data #unit .selectors,
#main #data #sizes .selectors{
    width: 83%;
    height: 100%;
}
#main #data #unit .selectors{
    padding: 0 0.3vw;
}
#main #data #unit .selectors .selector,
#main #data #unit .selectors .selector:nth-child(1){
    margin: 0 !important;
    margin-right: 0.6vw !important;
}



#main #data #unit .selectors .selector, 
#main #data #sizes .selectors .inner .selector {
    width: 4.5vw;
    height: 2.5vw;
    background-color: transparent;
    border: 0.1vw solid lightgray;
    cursor: pointer;
    overflow: hidden;
}
#main #data #unit .selectors .selector:nth-child(2){
    width: 6vw;
}
#main #data #unit .selectors .selector:nth-child(3){
    width: 9vw;
}
#main #data #sizes .selectors .inner{
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
}
#main #data #sizes .selectors .inner .selector{
    margin: 0.3vw;
}
#main #data #unit .selectors .selector input,
#main #data #sizes .selectors .inner .selector input{
    display: none;
}
#main #data #unit .selectors .selector span,
#main #data #sizes .selectors .inner .selector span{
    width: 100%;
    height: 100%;
    color: black;
}

#main #data #unit .selectors .selector input:checked + span,
#main #data #sizes .selectors .inner .selector input:checked + span{
    background-color: black;
    color: white;
}
#main #data #unit .selectors .selector:hover span,
#main #data #sizes .selectors .inner .selector:hover span{
    font-weight:bolder;
    background-color: black;
    color: white;
}



#main #data #unit{
    height: 4vw;
}
#main #data #sizes {
    height: 7.5vw;
}







#main #data #selector{
    padding: 1vw 0 !important;
}
#main #data #selector .value{
    width: 100%;
    padding: 0;
}

#main #data #selector .value .quantity{
    width: 40% !important;
    height: 3.5vw !important;
    padding: 0.72vw 1.5vw;
    margin-right: 1vw;
    border: 0.01vw solid lightgray;
}
#main #data #selector .value .quantity button{
    width: 2vw;
    font-size: 1.75vw;
    font-weight: bold;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    color: black;
    border: none;
    outline: none;
    box-shadow: none;
}
#main #data #selector .value .quantity button:hover{
    transform: scale(1.1);
}
#main #data #selector .value .quantity button:active{
    transform: scale(1);
}
#main #data #selector .value .quantity input {
    width: 4.5vw !important;
    left: 2%;
    margin: 0 1vw;
    font-weight: bold;
    font-size: 1.75vw;
    padding: 0;
    text-align: center;
    display: flex !important;
    padding-block: 0;
    padding-inline: 0;
    color: black !important;
}


#main #data #selector .value .button{
    width: 53% !important;
    height: 3.5vw !important;
}
#main #data #selector .value .button:hover button{
    background-color: black;
    color: white;
}

#main #data #selector .value .button button{
    width: 100%;
    height: 100%;
    padding: 1vw 1.5vw;
    font-size: 1.125vw;
    font-weight: bold;
    border: 0.2vw solid black;
    background-color: white;
}







#main #data #selector .value .button button svg path {
  fill: black; 
  transition: fill 0.3s; 
}
#main #data #selector .value .button button:hover svg path {
  fill: white; 
}




  /**************************************************************************************/
  /**************************************************************************************/
  /**************************************************************************************/

.scale-container {
    position: absolute;
    float: left;
    width: 21% !important;
    height: 100%;
    top: 0;
    right: -4%;
    width: 100%;
    padding: 0;
}

.scale-title {
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: 1vw;
    text-align: center;
    font-size: 1.55vw;
    font-weight: bold;
}
.scale-subtitle {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 1.25vw;
    font-weight: bold;
}

.scales{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
}

.scale-item{
    position: relative;
    float: left;
    width: 100%;
    background: white;
    border: 0.1vw solid black;
    border-radius: 0;
    padding: 1vw;
    margin-bottom: 1vw;
    transition: all 0.3s ease;
}

.scale-item.active {
    border-color: rgb(27, 169, 27);
    background-color: rgb(27 169 27 / 12%);
    transform: scale(1.05);
  }

  .scale-info,
  .scale-offer {
    display: flex;
    justify-content: space-between;
    font-size: 1.05vw;
    font-weight: 600;
    color: #2c3e50;
    width: 100%;
    text-align: center;
  }

  .scale-info span span,
  .scale-offer span{
    color: rgb(27, 169, 27);
  }

  .scale-offer span{
    width: 100%;
  }

  /**************************************************************************************/
  /**************************************************************************************/
  /**************************************************************************************/



.section .arrow {
    width: 1.25vw;
    height: auto;
    bottom: 40%;
    cursor: pointer;
    z-index: 1;
}
.section .arrow:active{
    transform: scale(0.95);
}
.section .left{
    left: -1vw;
    opacity: 0;
    pointer-events: none;
}
.section .right{
    right: -1.5vw;
}
.section .arrow img{
    width: 100%;
    height: auto;
    opacity: 0.4;
}
.section .arrow:hover img{
    transform: scale(1.05);
    opacity: 1;
}






/**************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/
/************************************ MOBILE STYLE ************************************/
/**************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/



@media (max-width: 991px) and (orientation: portrait) {


    #main{
        height: auto !important;
    }    
    #main .section {
        width: 100%;
        height: auto;
        transform: scale(1) !important;
    }



    #main #viewer {
        width: 100%;
        height: 125vw !important;
        display: flex;
        flex-direction: column-reverse;
    }




    #main #viewer #image {
        width: 100% !important;
        height: 70%;
        border: 0.02vw solid lightgrey;
        margin: 5vw 0;
    }
    #main #viewer #image img {
        width: 90%;
        height: auto;
    }
    .img_height {
        width: auto !important;
        height: 75% !important;
    }


    #main #viewer #slider {
        width: 100%;
        height: 30%;
        padding: 0;
        margin: 0;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    #main #viewer #slide {
        width: auto;
        height: 100%;
        min-width: 100%;
        min-height: auto;
        padding: 0;
        flex-direction: row;
    }
    #main #viewer #slider #slide .image {
        width: auto;
        height: 90%;
        aspect-ratio: 1.1;
        padding: 0.2vw;
        margin: 0 0.5vw;
    }







    #main #data {
        width: 100%;
        padding: 0 4.5vw;
        margin-left: 0;
        margin-top: 3vw;
    }
    #main #data span {
        letter-spacing: 0.25vw;
        font-size: 4.5vw;
    }

        
    #main #data .stock {
        width: 100%;
        top: 28vw;
    }
    #main #data .stock #stock {
        padding: 1.25vw 2.5vw !important;
        font-size: 3.5vw;
        border-radius: 1.25vw;
    }



    #main #data #title {
        padding: 3.5vw 0;
        font-size: 11vw;
        line-height: 11vw;
        text-align: center;
        /* letter-spacing: 0.25vw; */
    }
    #main #data #description {
        font-size: 4.5vw;
        padding: 1vw !important;
        text-align: center;
    }
    #main #data #factor {
        font-size: 4.5vw;
        text-align: center;
    }







    #main #data #price {
        height: auto;
        padding: 5vw 0 !important;
        padding-top: 7vw !important;
        margin-top: 7vw !important;
        flex-direction: column;
    }
    #main #data #price .values{
        margin: 1.5vw 0;
    }

    #main #data #price .offer {
        display: block;
    }
    #main #data #price .offer .values{
        width: 100%;
    }   
    #main #data #price .offer #price_discounted {
        font-size: 8vw;
        text-align: center;
    }
      
    #main #data #price .offer #discount {
        font-size: 4.5vw !important;
        margin: 5vw 0;
    }
    #main #data #price #discount span {
        color: white;
        background-color: rgb(27, 169, 27);
        padding: 1.25vw 2.5vw;
    }


    #main #data #price #pair {
        width: 100%;
        margin-top: 0.5vw;
    }
    #main #data #price #pair .data{
        padding: 1.5vw 3vw !important;
    }
    #main #data #price #pair .data .title {
        font-size: 3.5vw;
        font-weight: bold;
    }
    #main #data #price #pair .data .values .value {
        font-size: 3.35vw;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }
    #main #data #price #pair .data .values .disc {
        margin-left: 0vw;
        font-size: 3.4vw;
    }




    #main #data #unit, #main #data #sizes {
        margin-top: 9vw !important;
        height: auto;
    }
    #main #data #unit .title, #main #data #sizes .title {
        width: 100%;
        font-size: 5.1vw;
        text-align: center;
        justify-content: center;
        padding-bottom: 2.25vw;
    }

    #main #data #unit .selectors, #main #data #sizes .selectors {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    #main #data #unit .selectors .selector, 
    #main #data #sizes .selectors .inner .selector {
        width: 23vw;
        height: 10vw;
    }
    #main #data #unit .selectors .selector, 
    #main #data #unit .selectors .selector:nth-child(1) {
        margin: 0 !important;
        margin-right: 2.6vw !important;
    }
    #main #data #unit .selectors .selector:nth-child(2) {
        width: 28vw;
        margin-right: 0 !important;
    }
    #main #data #unit .selectors .selector:nth-child(3) {
        width: 53.5vw;
        margin-top: 3vw !important;
        margin-right: 0 !important;
    }


    #main #data #unit .selectors .selector:hover span, 
    #main #data #sizes .selectors .inner .selector:hover span {
        font-size: 4.2vw;
    }
    #main #data #sizes .selectors .inner {
        width: auto;
        max-width: 100%;
        justify-content: center;
    }
    #main #data #unit .selectors .selector span, #main #data #sizes .selectors .inner .selector span {
        padding: 1.5vw 3vw !important;
    }
    #main #data #sizes .selectors .inner .selector {
        margin: 3vw 1.5vw !important;
        margin-top: 0 !important;
    }






    #main #data #selector {
        padding: 5vw 0 !important;
        display: block !important;
    }
    #main #data #selector span{
        width: 100%;
    }
    #main #data #selector .title {
        font-size: 4vw;
    }
    #main #data #selector .value{
        display: block !important;
    }
    #main #data #selector .value span {
        width: 100% !important;
        margin: 1.5vw 0 !important;
    }
    #main #data #selector .value .quantity {
        width: 100% !important;
        height: 18vw !important;
        padding: 3vw 5vw;
        margin-right: 1.5vw;
        border: 1px solid black;
    }
    #main #data #selector .value .quantity button, #main #data #selector .value .quantity input {
        font-weight: bold;
        font-size: 9vw;
        padding: 0;
    }
    #main #data #selector .value .quantity input {
        left: 0 !important;
        width: 20vw !important;
        text-align: center;
        margin: 0 10vw;
        font-weight: bold;
    }
    #main #data #selector .value .quantity button {
        width: 5vw;
    }

    #main #data #selector .value .button {
        width: 100% !important;
        height: 18vw !important;
        margin-top: 5vw;
    }
    #main #data #selector .value .button button {
        width: 100% !important;
        padding: 4.55vw 5.5vw;
        font-size: 4vw;
    }

    #main #data #selector .value .button:hover button{
        font-size: 4.1vw;
    }








    .scale-container {
        position: relative;
        float: left;
        width: 100% !important;
        height: auto;
        right: 0;
        padding: 0;
        margin-top: 5vw;
    }

    .scales{
        flex-direction: column;        
        display: flex;
        flex-wrap: wrap;
        justify-content: center;   /* centra horizontalmente */
        align-items: center;
    }




    .scale-title{
        padding-bottom: 4vw;
        font-size: 5.5vw;
        line-height: 6.5vw;
    }
    .scale-subtitle {
        padding-top: 4vw;
        text-align: center;
        font-size: 5.5vw;
        line-height: 6.5vw;
        font-weight: bold;
    }

    .scale-item {
        width: 90%;
        padding: 5vw 4vw;
        margin: 1vw 0;
        transition: all 0.3s ease;
    }
    .scale-info {
        font-size: 4.5vw;
    }
  
  .scale-offer span {
        position: relative;
        float: left;
        width: 100%;
        font-size: 4.5vw;
    }


    .slider {
        margin-top: 15vw !important;
    }
    .slider .title {
        height: auto !important;
        padding-bottom: 8vw !important;
    }
    .slider .slide {
        width: 83% !important;
        height: 122.5vw !important;
        margin: 0 8vw !important;
    }
    .section .arrow {
        bottom: 40% !important;
    }
    .section .left {
        left: 1.5vw !important;
    }
    .section .right {
        right: 1.5vw !important;
    }



}