/*
  ROLLS
  Deben respetar los nombres de clases véase cls_roll.css (controlador) 
*/
._favo{
  position:absolute; right:2%; bottom:2%;
  color: var(--btn_bk); cursor:pointer;
}
.roll_item{
  width:20%; height:25rem; position:relative;
  display:inline-flex; justify-content: center; align-items:flex-start; 
  flex-direction: column;
  float:left;
  min-width:18vw;
  padding-top: 1rem !important;
  .roll_card{
    position:relative; width: 90%; height:20rem; float: left; display:block;
    overflow:hidden;  background: var(--bk_strong);
    box-shadow: 0px 4px 5px -4px rgb(76 33 105 / 44%);
    .roll_img{
      width:96%; max-height:70%; height:70%;
      display:flex; justify-content:center;  align-items:center;
      & img{width:95%; transition: 0.45s;}
      & img:hover{
        transform:scale(1.1); transform: perspective(600px) rotateY(20deg);
      }

    }
    & article{
      display:block;width:80%; text-align:center; margin-left:10%;height: 1.85rem;text-wrap: initial; font-size:0.8rem;
      margin-top:0.5rem; font-weight: 400; overflow:hidden;
    }
    .roll_price{
      width:80%; color:var(--btn_bk);
      margin-left:10%;height: auto;text-align:center; font-size:1.1rem;
      margin-top:0.31rem;  
    }
  }
  .it_buy{
    position: relative; display:flex;  justify-content:space-around;  align-items:center;
    height: 3.2rem; width: 90%; padding: 5px;
    transition: all 0.2s ease-in;
    /* transition: all 0.2s ease-in-out allow-discrete; */
    visibility: hidden;
    .it_qty{
      display:flex;  justify-content:space-evenly;  align-items:center;
      height: 2.5rem; width: 40%; background: var(--bk_strong);
      border-radius: 20px; -webkit-box-shadow: 0px 0px 2px var(--btn_bk);
      & *{font-size: 1.6rem; padding-top: 3px; cursor: pointer; font-weight: 600;}
      ._qty{
        pointer-events: none;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 400;
        padding-top: 6px;      
      }
    }
    .btns_cpa{
      border-radius: 20px; background:var(--btn_bk); color:var(--btn_fr); cursor:pointer;
      height: 2.5rem; width: 52%; text-align:center; display:flex;  justify-content:center; align-items:center;
    }
  }
}
.vis{visibility: visible!important; }

.swad2{box-shadow: 0px 0px 2px var(--btn_bk);  -webkit-box-shadow: 0px 0px 2px var(--btn_bk);  -moz-box-shadow: 0px 0px 2px var(--btn_bk);}


/* FIN DE ITEMS Y CARDS DE LOS ROLLS */

/* CONTENER PRINCIPAL, principalmente en consart */

.it_main{
  padding:0rem;margin:0;
  position:relative; float:left; width:100%; 
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:25px;
  transition: all 1s ease-in-out allow-discrete;
  & *{padding:0rem;margin:0;}
  .it{
    width:17%; height:25rem;
    display:inline-flex; justify-content: center; align-items:flex-start; 
    flex-direction: column;
    float:left;
    min-width:16vw;
    padding-top: 1rem !important;
    .card{
      position:relative; width: 100%; height:20rem; float: left; display:block;
      overflow:hidden; background: var(--bk_strong);
      box-shadow: 0px 4px 12px -4px rgb(76 33 105 / 44%);
      .img{
        width:100%; max-height:70%; height:70%;
        display:flex; justify-content:center;  align-items:center;
        & img{max-width:90%; transition: 0.45s; max-height: -webkit-fill-available;}
        & img:hover{
          transform:scale(1.1); transform: perspective(600px) rotateY(20deg);
        }

      }
      & article{
        display:block;width:80%; text-align:center; margin-left:10%;height: 1.85rem;text-wrap: initial; font-size:0.8rem;
        margin-top:0.5rem; font-weight: 500; overflow:hidden;color:var(--fr_gral);
      }
      .price{
        width:80%; color:var(--btn_bk);
        margin-left:10%;height: auto;text-align:center; font-size:1.1rem;
        margin-top:0.31rem;  
      }
    }
    .it_buy{
      position: relative; display:flex;  justify-content:space-around;  align-items:center;
      height: 3.2rem; width: 100%; padding: 5px;
      transition: all 0.2s ease-in-out allow-discrete;
      visibility: hidden;
      .it_qty{
        display:flex;  justify-content:space-evenly;  align-items:center;
        height: 2.5rem; width: 40%;  
        border-radius: 20px; -webkit-box-shadow: 0px 0px 2px var(--btn_bk); 
        & *{font-size: 1.6rem; padding-top: 3px; cursor: pointer; font-weight: 600;color: var(--fr_gral);}
        ._qty{
          pointer-events: none; 
          text-align: center;
          font-size: 1.2rem;
          font-weight: 400;
          padding-top: 6px;      
        }
      }
      .nodispo{color: var(--btn_bk);}
      .btns_cpa{
        border-radius: 20px; background:var(--btn_bk); color:var(--btn_fr); cursor:pointer;
        height: 2.5rem; width: 52%; text-align:center; display:flex;  justify-content:center;  align-items:center;
      }
    }
  }
}
._nav, ._navaux{
  background:transparent;
  float:left; color:var(--fr_gral);
  display: flex; justify-content: start; align-items: center; column-gap: 10px;
  width:100%; height:1.6rem; font-weight:400; font-size:0.8rem; padding:5px;
  margin-bottom:0.5rem; cursor:pointer;
    & i{font-size:18px;}
}

.form_row{ float:left; height:auto; width:100%; display: flex; justify-content: space-between; align-items: center;}
._field{
  position:relative; float:left; width:100%; height:3.30rem; margin:0; margin-top:1.2rem; display:inline-block;
  border:0px solid #fff; 
  background:var(--bk_middle);
  font-size:0.8rem; 
  padding-left:20px;padding-right:20px;padding-top:5px;
  border-radius: 22px;
  & input,select{
    height:1.6rem; width:99.9%; color:var(--fr_middle); margin:0;
    border:0; font-size:1rem;
    padding-left:5px; padding-right:5px;
    background:var(--bk_middle);
    border-bottom: 1px solid #fff;
  }
  & input::placeholder{color:#a6a6a6;}
  & input:focus{border-bottom: 1px solid #7416ba;}
  & label{color: var(--edit_caption);}
  & option[value=""][disabled]{display: none;}
	& option{color:#000;}
  & select{background:var(--bk_middle); color:var(--fr_middle);}
  & select:required:invalid{color: #a6a6a6; background:transparent;}
  & select:focus{background:var(--bk_middle)!important;}
}
.form_action{
  position:absolute; bottom:-7rem; right:1%; width:70%; height:3.5rem;
  display: flex; justify-content: space-between; align-items: center;
  margin:0; margin-top:1.2rem;
  background: inherit;
  padding-left:10px;padding-right:10px;

  & button{
    height:3rem; width:30%;
    font-size: 0.9rem; font-weight: 500;
    /*color: #fff;
    background: gray;*/
    border: 1px solid gray;
    border-radius: 30px;
    transition: 0.25s;
    cursor:pointer;
  }
  & button:hover{transform: scale(1.05);}
  .btn_send{border: 0px;}
  /* .btn_send{background: var(--back_obj); border: 0px; color #fff;} */
}



@media only screen and (min-width : 300px) and (max-width : 480px){
  
}