/*:root {
	--sis_back: #fff;
	--sis_fore: #006098;

  --btn_baseC_back:#006080; --btn_baseC_fore:#f1f1f1; --btn_baseC_hover:#fff;
  --btn_baseO_back:#d6e5e5; --btn_baseO_fore:#006080; --btn_baseO_hover:#d6e5e5;
  
  --footer_back: #006080; --footer_fore: #fff;
  --box_body: #fff; 
  --box_title_back: #006080; --box_title_fore: #fff; 

}*/


.h_img img{max-height: 2.8rem;}
.roll_card{border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; position:relative;}
/* .roll:hover {transform:scale(1.02);} */
.roll_card .roll_img{
  width:96%; margin:0; padding:0;
  max-height:70%; height:60%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.roll_card .roll_img img{width:95%; transition: 0.45s;}
.roll_card .roll_img img:hover{
   transform:scale(1.1); 
   transform: perspective(600px) rotateY(20deg);
}

.roll_card label{display:block;width:80%; text-align:center;margin-left:10%;color:#000; text-wrap:auto; font-size:0.8rem;}

.roll_card .roll_btn{
  text-align:center; height:3rem; position:absolute; bottom:0px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.roll_card .price{
  left:0px; width:65%; color:#000;
  border-radius: 0px 0px 0px 0px;
  /* background: radial-gradient(90.07% 90.07% at 22.04% 7.13%, #62636D 0%, #181A1E 100%) */
  background-color:#babbca;
}
.roll_card .go{
  right:0px;width:35%; color:#000;

  border-radius: 0px 0px 25px 0px;
  /* border: 2px solid rgba(255, 255, 255, 1); */
  /* background: rgba(71, 72, 84, 1); */
  background-color:#babbca;

}
.roll_card .go span{font-size:24px; color:#000;cursor:pointer;}
.roll_card .go span:hover{font-size:30px!important; color:#c0c0c0;}






.sis_btn{ 
  background-color:var(--btn_baseC_back); color:var(--btn_baseC_fore);
  border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
  cursor:pointer; text-align:center;
  transition: all 0.5s ease-in-out;
}
.sis_btn:hover{color:var(--btn_baseC_hover);transform:scale(1.1);}

.sis_btn_dark{ 
  background-color:var(--btn_baseO_back); color:var(--btn_baseO_fore);
  border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
  cursor:pointer; text-align:center;
  transition: all 0.5s ease-in-out;
}
.sis_btn_dark:hover{background-color:var(--btn_baseO_hover);transform:scale(1.1);}

.it_main{
  position:relative; float:left; background-color:rgb(252,252,252);
  display:grid; width:100%;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  border: 0px solid blue;
  gap:25px;
  /* row-gap:51.5px; */
  padding:25px; padding-top:5px;
  min-height:350px;
}
/*.it_main:has(.skin:hover) {
  row-gap:0px;
}*/

/********************************************* QUERY *********************************/
.query{background: #fcfcfc;	display:flex; justify-content:space-between; padding:1rem 0.8rem;}

.mostrando{padding:0.5rem; margin: auto 0;}

.filtro_base{display:flex; gap: 15px;}

.filtro_select{border:none;	background: #fcfcfc; font-size:1rem;}

.filtro_select:hover{cursor:pointer;}

.filtro_select option{background:black;	color:white; /*padding:10px;*/}

.filtro_stock{display:flex;	gap:5px; /*padding:1rem;*/}

.filtro_stock label{margin:auto;}
.filtro_stock i{ font-size:2rem;}
.filtro_stock i:hover{cursor:pointer;}

/***************************************************** FIN QUERY **********************/

.skin{
  position:relative;  border: 0px solid red; padding:5px;   border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;background-color:#fff; 
  max-height:20rem; overflow:hidden;
  height:20rem;
  transition: all 1.6s ease-in-out;
}
.skin:hover{
  max-height:25rem; 
}
.skin ._favorito{position:absolute; top:0.7rem; right:3%; color:red; z-index:9; cursor:pointer; }
.skin .it_img{
  width:100%; height:10rem; cursor:pointer; margin-top:1.5rem;
  display: flex; justify-content: center;  align-items: center;
  border: 0px solid green;
}
.it_img img{position:relative; max-width:95%; max-height:95%;} 
.it_codiart{font-size:0.75rem;text-align:left;}
.it_title{font-size:0.75rem; 
  display: -webkit-box; height:2.3rem; text-align:center; text-overflow: ellipsis; overflow:hidden; -webkit-line-clamp: 2;    -webkit-box-orient: vertical;
  padding:8px; margin-top:25px; font-weight:500;
}
.it_precio{font-size:0.95rem; 
  height:1.3rem; text-align:center; 
  padding:5px; margin-top:15px; width:100%; font-weight:bold;
}
.it_nodispo{
  height:3rem; width:100%; 
  padding:5px; margin-top:15px;
  position:relative;
  display:none; text-align:center;
}

.it_comprar{
  height:3rem; width:100%; 
  padding:5px; margin-top:15px;
  position:relative;
  display:none; 
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); */
  gap:8px;
  border: 0px solid blue;

}
.it_comprar .it_qty{
	border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
  border: 0px solid red;
  text-align:center;
    display:grid; max-height: 2.2rem;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); */
  gap:10px;
  padding-left:5px; padding-right:5px;
}

.it_qty ._less{font-size:1.6rem;padding-top:3px; cursor:pointer;font-weight:500;}
.it_qty ._qty{pointer-events: none; text-align:center;font-size:1.2rem; font-weight:400; padding-top:6px}
.it_qty ._more{ font-size:1.6rem;padding-top:3px; cursor:pointer;font-weight:500;}

.btns_cpa{
	border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; height:2.3rem;
  cursor:pointer;
  padding-top:0.6rem;
  font-size:0.9rem;  text-align:center; 
  background-color:var(--btn_baseC_back); color:var(--btn_baseC_fore);
}
.btns_cpa:hover{font-weight:500;}


/**************************************************************/

.h_skin .it_img{
  width:100%; height:9rem; margin-top:0.5rem;
}

.h_skin .it_title{
  padding:8px; margin-top:15px;
}
.h_skin .it_precio{
  padding:5px; margin-top:15px;
}
.h_skin .it_comprar{
  padding:5px; margin-top:15px;
  display:grid;
}
.h_skin .it_nodispo{
  padding:5px; margin-top:15px;
  display:block;
}


/* <div class="_it _image"><img src="../imgart/cx23100.png"></div> */

.gcard {
	display:flex!important;flex-wrap:wrap!important;justify-content:space-evenly;
	& .row_new{width:clamp(220px,20%,240px);height:322px!important; margin-top: 1rem; border-radius: 20px!important; transition:unset;}
	& .row_new:nth-child(odd) {background-color: var(--consart_row_back)!important;}
	.row_new{
    .row_head{
      height: -webkit-fill-available!important; display: block!important;
      
      .div_main{position:absolute!important; width: 100%!important; height: -webkit-fill-available!important;}
      ._descart{
        position:absolute!important; top:69%!important;
        font-size: 1.4rem; text-align: center; width: 94%;
      }
      ._codbarra{display:none!important;}
      ._codiart{position:absolute!important; width:80%!important; top:5%!important;}
      ._neto{display:none!important;}
      .div_stock{position:absolute!important; top:85%!important; width:50%!important;}
      ._precio{
        position:absolute!important; top:85%!important; width:40%!important; min-height:unset!important;
        right:6%!important; font-size: 1.4rem!important;
      }
      ._estado{position:absolute!important; top:80%!important; width:90%!important; left:1%!important;}
      ._precioold{display:none!important;}
      ._image{position:absolute!important; top:7%!important;}
    }
    
  }

/*
	& .row_new article{width:clamp(220px,20%,240px)!important; border:1px solid #000; position:relative;}

	& .row_new ._descart {width:100%!important;top:64%!important;text-align:center!important;white-space: unset !important;font-size:12px!important;}
	& .row_new ._image {position:absolute;width:80%;top:6%;left:5%; display:block!important;}
	& .row_new ._image img {width:100%!important;}
	& .row_new ._codiart{width:50%!important;top:4px!important;left:3%!important;font-size:0.8rem!important;}
	& .row_new ._codbarra{display:none; width:100%!important;top:unset!important;bottom:1%!important;left:3%!important;font-size:8px!important;}
	& .row_new ._neto{display:none!important;}
	& .row_new ._precio{width:50%!important;top:89%!important;right:3%!important;font-size:14px!important;}
	& .row_new ._precioold{width:50%!important;top:84%!important;right:3%!important;font-size:12px!important;}
	& .row_new ._estado{width:96%!important;top:77%!important;left:2%!important;text-align:center!important;}
	& .row_new .stock_label{width:43%!important;top:85%!important;left:3%!important;font-size:7px!important;}
	& .row_new .stock{width:43%!important;top:89%!important;left:3%!important;font-size:9px!important;}
	& .row_new ._cnt{width:unset!important;right:3%!important;top:54%!important;font-size:24px!important;}
	& .row_new ._mi{width:unset!important;top:12%!important;right:3%!important;font-size:24px!important;}
	& .row_new ._fav{width:unset!important;top:5%!important;right:3%!important;font-size:24px!important;}
	& .row_new .mi{display:none!important;}
*/
}
.gcard .row_new:hover{transform:scale(1.02);}

@media only screen and (min-width : 300px) and (max-width : 480px){
  .gcard {
    display:flex!important;flex-wrap:wrap!important;justify-content:space-evenly;
    
    & .row_new{width:clamp(170px, 48%, 206px)!important;height:270px!important; margin-top: 0.5rem; border-radius: 20px!important; transition:unset;}
    /* & .row:nth-child(odd) {background-color: var(--consart_row_back)!important;} */
    & .row_new article{width:100%!important; border:1px solid #000; position:relative;}

    & .row_new ._descart {width:100%!important;top:55%!important;text-align:center!important;white-space: unset !important;font-size:12px!important;}
    & .row_new ._image {position:absolute;width:70%;top:6%;left:5%; display:block!important;}
    & .row_new ._image img {width:100%!important;}
    & .row_new ._codiart{width:70%!important;top:4px!important;left:3%!important;font-size:0.8rem!important;}
    & .row_new ._codbarra{display:none; width:100%!important;top:unset!important;bottom:1%!important;left:3%!important;font-size:8px!important;}
    & .row_new ._neto{display:none!important;}
    & .row_new ._precio{width:50%!important;top:87%!important;right:2%!important;font-size:16px!important;}
    & .row_new ._precioold{width:50%!important;top:81%!important;right:2%!important;font-size:12px!important;}
    & .row_new ._estado{width:96%!important;top:73%!important;left:2%!important;text-align:center!important;}

    & .row_new .stock_label{
      width:43%!important;top:81%!important;left:3%!important;font-size:0.8rem!important;
      & *{width:16%!important;}
    }
    & .row_new .stock{
      width:43%!important;top:87%!important;left:3%!important;font-size:0.8rem!important;
      & *{width:16%!important;}
    }

    & .row_new ._cnt{width:unset!important;right:3%!important;top:40%!important;font-size:36px!important;}
    & .row_new ._mi{width:unset!important;top:14%!important;right:3%!important;font-size:24px!important;}
    & .row_new ._fav{width:unset!important;top:5%!important;right:3%!important;font-size:24px!important;}
    & .row_new .mi{display:none!important;}
  }  
} 