@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700;800&family=Rubik:wght@300;400;500;600&display=swap');


:root{
      --color-primario: #ea553e;            /*--primary-color:*/
      --color-secundario: #33FFCC;          /*--secondary-color:*/
      --color-secundario-oscuro: #33FFCC;   /*--secondary-dark-color:*/
      
      --color-blanco:#ffffff;               /*--white-color:*/
      --color-claro-bg: #f2f3f5;            /*--light-bg-color:*/
      --color-texto-claro: #1a2141;         /*--light-text-color:*/
      --color-borde: #e5e8ec;               /*--border-color:*/
      --color-borde-dpt: #ea553e;               /*--border-color:*/
      --color-oscuro: #1a2141;              /*--dark-color:*/

      --color-fly-item: #1a2141;
      --color-all-dpt: #1a2141;

      --fuente-maspequeña: 11px;              /*--font-smaller:*/ 
      --fuente-pequeña: 13px;                 /*--font-small:*/       
      --fuente-mediana: 14px;                 /*--font-mediana:*/

      --porciento100: 100%;                   /*--percent100:*/
      --porciento50: 50%;                     /*--percent50:*/

      --fw3: 300;
      --fw5: 500;
      --fw6: 600;
      --fw7: 700;
      --fw8: 800;

      --trans-background-color: background-color .3s, color.3s;
      --trans-background: background-color .3s;
      --trans-color: color .3s;
     }


*{
  margin:0;      
  padding: 0; 
 }     

 *,::before,::after{
                    box-sizing: border-box;
                   }

body{
     font-family: 'Rubik', sans-serif; 
     font-size: 16px;
     font-weight: 400;
     line-height: 1.4;
     color: var(--color-oscuro);
     background-color: var(--color-blanco);     
    }                   

a{
  text-decoration: none;    
  color: inherit;
  -webkit-tap-highlight-color: transparent;
 }    

 ul{
    list-style: none;
   }

img{
    max-width: var(--porciento100);
    vertical-align: middle;
   }   

strong{
       font-weight: var(--fw8);
      }   

table{
      border-collapse: collapse; 
      border-spacing: 0;
     }      

input::placeholder{
                   font: inherit;
                  }     

h1,h2,h3,h4{
            font-family: 'Poppins';
           }
           
h1{
   font-size: calc(1.3em + 1vw);
   font-weight: var(--fw8);
   line-height: 1;   
  }           

h2{
   font-size: 2.5em;
  }  

h3{
   font-size: 1.2em;
   font-weight: var(--fw7);    
  }  

h4{
   font-size: 1em;
   font-weight: var(--fw6);
  }  

/***********************************************************************************************
                                   CODIGO REUTILIZABLE                                      
 ***********************************************************************************************/  

 .container{
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 0.938em;            
           }

.column{
        margin-left: -0.938em;  
        margin-right: -0.938em;
       }           

.column .row{
             padding: 0 0.938em;              
            }       

.flexwrap{
          display: flex; 
          flex-wrap: wrap;
         }            

.flexcenter{
            display: flex;
            align-items: center;
            justify-content: center;            
           }         

.flexitem{
          display: flex; 
          align-items: center;          
         }           

.flexcol{
         display: flex; 
         flex-direction: column;
         gap: 1em;         
        }         

.main-links a:hover{
                    color: var(--color-primario); 
                   }

.second-links a:hover{
                      color: var(--color-texto-claro); 
                     }                   
        
.icon-small, .icon-large{
                         display: flex;
                         align-items: center;
                         padding: 0 0.25em;
                         font-weight: normal;
                        }

.icon-small{
            font-size: 1.25em;
            margin-left: auto;
           }                        

.icon-large{
            font-size: 1.75em;
            padding: 0 0.75em 0 0;
           }           

.mobile-hide{
             display: none;
            }   

.object-cover img{
                  position: absolute;
                  object-fit: cover;
                  width: var(--porciento100);
                  height: var(--porciento100);
                  display: block;
                 }            

.products .media{
                 position: relative;
                 flex-shrink: 0;
                 overflow: hidden;
                }             

.primary-button, .secondary-button, .light-button{
                                                  font-size: var(--fuente-pequeña);
                                                  padding: 0.9em 2em;
                                                  height: auto;
                                                  width: fit-content;
                                                  border-radius: 2em;
                                                  transition: var(--trans-background-color);
                                                 }    
                                                 
.primary-button{
                background-color: var(--color-primario);
                color: var(--color-oscuro);
               }
               
.primary-button:hover{
                      background-color: var(--color-secundario);                                            
                     }               

.secondary-button{
                  background-color: var(--color-secundario-oscuro);
                  color: var(--color-blanco);
                 }

.secondary-button:hover{
                        background-color: var(--color-claro-bg);
                        color: var(--color-secundario-oscuro);
                       }                 

.light-button{
              background-color: var(--color-claro-bg);
             }

.light-button:hover{
                    background-color: var(--color-secundario-oscuro);
                    color: var(--color-blanco);
                   }

.view-all{
          font-size: var(--fuente-pequeña);
          display: flex;
          gap: 1em;
          transition: var(--trans-color);
         }

.mini-text{
          font-size: var(--fuente-pequeña);
          color: var(--color-texto-claro);
          }         

.circle{
        position: absolute;
        top: -15px;
        left: 3px;
        width: 38px;
        height: 38px;
        border-radius: var(--porciento50);
        background-color: var(--color-oscuro);
        z-index: -1;
       }          

.circle::before{
                content: '';
                position: absolute;
                width: 28px;
                height: 28px;
                border-radius: var(--porciento50);
                background-color: var(--color-primario);
                bottom: 5px;
                right: 5px;
                opacity: .8;
               }       

/***********************************************************************************************
                                   1. HEADER                                      
 ***********************************************************************************************/           

:where(.off-canvas, header) li > a{
              display: flex;
              position: relative;
              line-height: inherit;
              transition: var(--trans-color);
             }

/*************HEADER TOP*************/             

.header-top .wrapper{
                     font-size: var(--fuente-pequeña);
                     font-weight: var(--fw3);
                     justify-content: space-between;
                     line-height: 42px;                     
                    }

.header-top .wrapper ul{
                        gap: 2em;
                       }                    

.header-top li{
               position: relative;
              }        
              
.header-top ul ul{
                  position: absolute;
                  left: -1em;
                  line-height: 2em;
                  background-color: var(--color-blanco);
                  border: 1px solid var(--color-borde);
                  z-index: 1;
                  display: none;
                 }             
                 
:where(.header-top, .thetop-nav) .right ul ul li a{
                                                   padding: 0.25em 1em;                              
                                                  }                 

:where(.header-top, .thetop-nav) .right ul ul li.current a{
                                                           background-color: var(--color-borde); 
                                                           }                             

.header-top li:hover ul{
                        display: block;
                       }                                     

/*************HEADER NAV*************/             

.header-nav{
            padding: 0.5em 0;
            margin-bottom: 1.5em;
            border-bottom: 1px solid var(--color-borde);
           }

.trigger{
         font-size: 1.5em;
         display: flex;
         padding: 0.25em;
         margin-right: 0.5em;
        }

.logo a{              
        position: relative;        
        display: flex;        
        margin-right: 2.125em; 
       }     

.header-nav nav > ul{
                     line-height: 100px;
                     gap: 2.125em;
                    }        
                    
.fly-item{
          position: absolute;
          height: 16px;
          font-size: var(--fuente-maspequeña);
          padding: 3px;
          text-align: center;
          line-height: 10px;
          color: var(--color-fly-item);
         }              
         
nav .fly-item,
.header-nav .mini-cart .price .fly-item{
                                        top: 50%;
                                        margin-top: -24px;
                                        width: 30px;
                                        border-radius: 3px;
                                        right: -32px;
                                        background-color: var(--color-primario);              
                                       }         

.header-nav .right{
                   position: relative; 
                   margin-left: auto;
                  }             

.header-nav .right .icon-large{
                               position: relative;
                              }                  

.header-nav .right .fly-item{
                             top: 50%;
                             margin-top: -24px;
                             width: 30px;
                             border-radius: 3px;
                             right: -32px;
                             background-color: var(--color-primario);  
                            }                              

.mega .flexcol{
               flex: 1;
               min-width: 180px;
               padding-right: 2.5em;
               margin-bottom: 1.5em;
               z-index: 1;
              }                            

/*************HEADER MAIN, CATEGORIA DEPARTAMENTOS*************/                  

.header-main{
             background-color: var(--color-secundario-oscuro);
             padding: 1.5em 0;
             margin-bottom: 2em;
            }

.dpt-cat{
         position: relative;
         z-index: 10;
        }            

.dpt-cat .dpt-head{
                   position: relative; 
                   width: 300px;
                   padding: 0.63em 1.5em;
                   background-color: var(--color-primario);
                   border-radius: 7px 7px 0 0;
                   color: var(--color-all-dpt);
                   margin-bottom: -2.15em;
                  }

.dpt-cat .dpt-head .mini-text{
                              color: var(--color-all-dpt);
                             }                  

.dpt-cat .dpt-trigger{
                      position: absolute;
                      right: 0;
                      top: 0;
                      padding: 1.3em;
                      height: 60px;
                      width: 60px;                      
                     }                
                     
.dpt-menu > ul > li > a{
                        font-size: var(--fuente-pequeña);
                        height: 46px;
                        align-items: center;
                       }                 
                       
.dpt-menu .has-child:hover ul{
                              display: block;
                             }           
                             
.dpt-menu .has-child li a:hover{
                               text-decoration: underline;
                               }                             


/*************SEARCH FORM*************/                       

.header-main .right{
                    flex: 1;
                   }

form{
     position: relative;
    }                   

form.search input{
                  line-height: 3.25em;
                  padding: 0 7em 0 4.5em;
                  border: 0;
                  outline: 0;
                  width: var(--porciento100);
                  border-radius: 7px;
                  font-size: 0.9em;
                  font-weight: var(--fw3);
                 }

form.search :where(span, button){
                                 position: absolute;
                                 top: 0;
                                 padding: 0.55em 1.5em;
                                 font-size: 1em;
                                 color: var(--color-texto-claro);
                                 height: var(--porciento100);                                 
                                }        
                                
form.search button{
                   right: 0;
                   border: 0;
                   outline: 0;
                   font-size: 0.875em;
                   font-weight: var(--fw6);
                   background-color: var(--color-primario);
                   color: var(--color-texto-claro);
                   border-radius: 0 7px 7px 0;
                   cursor: pointer;
                   transition: var(--trans-background);
                  }                                 

form.search button:hover{
                         background-color: var(--color-oscuro);
                         color: var(--color-primario);
                        }

/*************RESPONSIVE MENU - OFF CANVAS*************/  

.site-off{
          position: fixed;
          width: 320px;
          height: var(--porciento100);
          background-color: var(--color-blanco);
          overflow-y: auto;
          z-index: 1000;
          transform: translateX(-100%);
          visibility: hidden;
          transition: transform .4s, visibility .4s;
          will-change: transform, visibility;
         }

.showmenu .site-off{
                    transform: translateX(0);
                    visibility: visible;
                    transform: transform .4s 0s, visibility 0s 0s;
                   }         

.off-canvas{
            width: var(--porciento100);
            height: var(--porciento100);
            touch-action: auto;
            padding: 1.5em;
           }         

.off-canvas .canvas-head{
                         color: var(--color-blanco);
                         justify-content: space-between;
                         padding: 1.5em;
                         margin: -1.5em -1.5em 1.5em;
                         background-color: var(--color-secundario-oscuro);
                         border-bottom-right-radius: 160px 25px;
                        }
                        
.off-canvas .canvas-head .logo{
                               z-index: 10;
                               position: relative;
                              }
                              
.t-close{
         font-size: 1.25em;
         width: 32px;
         height: 32px;
         border-radius: var(--porciento50);
         background-color: var(--color-secundario-oscuro);
         color: var(--color-blanco);
         transition: var(--trans-background-color);
        }                              

.t-close:hover{
               background-color: var(--color-blanco);
               color: var(--color-secundario-oscuro);
               opacity: .75;
              }        

.off-canvas .dpt-head{
                      font-size: var(--fuente-pequeña);
                      padding: 1em;
                      margin-bottom: 1em;
                      text-align: center;
                      background-color: var(--color-primario);
                      border-radius: 7px 7px 0 0 ;
                     }

.off-canvas .has-child > :where(ul, .mega){
                                           font-size: var(--fuente-pequeña);
                                           font-weight: var(--fw3);
                                           line-height: 28px;
                                           padding-left: 3em;

                                           height: auto;
                                           max-height: 0;
                                           overflow: hidden;
                                           transition: max-height .3s cubic-bezier(0.215, 0.610, 0.355, 1);                                           
                                          }

.off-canvas .expand > :where(ul, .mega){
                                        max-height: 2000px;        
                                       }

.off-canvas .thetop-nav ul, .off-canvas nav > ul{
                                                 flex-direction: column;
                                                 align-items: flex-start;
                                                 font-size: var(--fuente-pequeña);
                                                 line-height: 36px;
                                                 padding-top: 1.25em;
                                                 margin: 1.25em 0;
                                                 border-top: 1px solid var(--color-borde);  
                                                }
                                                
.off-canvas nav .mega{
                      padding: 0;
                     }                                                

.off-canvas nav .mega .products{
                                display: none;
                               }                     

.off-canvas .has-child .icon-small{
                                   padding: 0.5em;
                                   line-height: initial;
                                  }                               

.off-canvas .dpt-menu .icon-small{
                                  transform: rotate(90deg);
                                 }                                  

.off-canvas .has-child{
                       width: var(--porciento100);
                      }                                 

.off-canvas .thetop-nav .right > ul > :where(:nth-child(4), li:nth-child(5) > a){
                                                                                 display: none;            
                                                                                }                      

.off-canvas .thetop-nav .right ul ul{
                                     display: flex;
                                     flex-direction: row;
                                    }                                                                                

.off-canvas .thetop-nav .right ul ul li a{
                                          padding: 0.5em;
                                          border: 1px solid var(--color-borde);
                                          line-height: 16px;
                                          margin: 0 0.5em 0.5em 0;
                                         }                                    


/***********************************************************************************************
                                   2. SLIDER                                      
 ***********************************************************************************************/           
                                         
.slider .item{
              position: relative; 
              height: 474px;
             }       

.slider .item::before{
                      content: '';
                      position: absolute;
                      top: 30%;
                      left: 0;
                      width: 450px;
                      height: 300px;
                      background-color: var(--color-blanco);
                      z-index: 1;
                      filter: blur(50px);
                      opacity: .8;
                     }             
             
.slider .text-content{
                      position: relative;
                      height: var(--porciento100);
                      justify-content: flex-end;
                      padding: 0 0 8% 8%;
                      z-index: 1;
                     }             

.slider h4{
           font-size: var(--fuente-maspequeña);
           font-weight: var(--fw7);
           width: fit-content;
           padding: 4px 10px;
           background-color: var(--color-oscuro);
           color: var(--color-blanco);
           border-radius: 4px;
           letter-spacing: 3px;
          }                     

.text-content :where(h2, h3) span:first-child{
                                              font-weight: var(--fw3);
                                              color: var(--color-texto-claro);
                                              letter-spacing: 3px; 
                                             }

.text-content :where(h2, h3) span:last-child{
                                             color: var(--color-secundario-oscuro);
                                             text-transform: uppercase;
                                             letter-spacing: 3px;
                                            }

.swiper-pagination .swiper-pagination-bullet-active{
                                                    background-color: var(--color-secundario-oscuro);
                                                   }               

.swiper-button-next:after, .swiper-button-prev:after{
   color: var(--color-secundario-oscuro);
  }

/***********************************************************************************************
                                   3. BRANDS 
 ***********************************************************************************************/   

.brands .wrapper{
                 justify-content: space-around;
                 flex-wrap: wrap;
                 padding: 2em 0; 
                }  

.brands .item img{
                  opacity: .21;
                  transition: opacity 0.3s;
                 }                

.brands .item a:hover img{
                          opacity: 1;
                         }                 

/***********************************************************************************************
                                   4. PRODUCT BLOCK STYLE
 ***********************************************************************************************/                          

.sectop{
        justify-content: space-between;
        padding-bottom: 0.5em;
        margin-bottom: 2em;
        border-bottom: 1px solid var(--color-borde);
       }

.sectop h2{
           position: relative;
           font-size: 1.5em;
           font-weight: var(--fw7);
          }       

.sectop h2 span:not(.circle){
                             padding: 0 0 0 2em;
                            }

.sectop h2 .circle{
                   top: -5px;
                  }                            

.trending .products{
                    flex: 0 0 33.3333%;
                   }                  

/*************GLOBAL PRODUCT*************/

.products .offer{
                 text-align: center; 
                 margin-bottom: 1.5em;
                }

.products .offer p{
                   text-transform: uppercase;
                   margin-bottom: 0.5em;
                  }                

.products .offer ul{
                    gap: 1em;
                   }                  

.products .offer ul li{
                       position: relative;
                       width: 55px;
                       height: 55px;
                       padding: 0.5em;
                       line-height: initial;
                       color: var(--color-oscuro);
                       background-color: var(--color-primario);
                       border-radius: 8px;
                      }                   

.products .offer ul li:not(:last-child)::before{
                                                content: ':'; 
                                                position: absolute;
                                                right: -0.6em;
                                                color: var(--color-texto-claro);
                                               }        
                                               
.products :where(.image, .thumbnail) img{
                                         transition: transform .3s;
                                        }                                               

.products :where(.image, .thumbnail):hover img{
                                               transform: scale(1.1);
                                              }           
                                              
.products .hoverable{
                     position: absolute;
                     top: 0;
                     right: 0;
                    }                                              

.products .hoverable li a{
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          width: 28px;
                          height: 28px;
                          padding: 0.25em;
                          margin: 0.25em;
                          border-radius: var(--porciento50);
                          line-height: 1;
                          background-color: var(--color-blanco);
                          opacity: .5;
                          transition: var(--trans-background-color), opacity .3s;
                         }                    

.products .item:hover .hoverable li a{
                                      opacity: 1;
                                     }    
                                     
.products .hoverable li a:hover{
                                color: var(--color-blanco); 
                                background-color: var(--color-oscuro);
                               }                                     

.products .hoverable li.active a:hover{
                                       background-color: var(--color-primario--color);
                                      }                               

.products .hoverable li:not(.active){
                                     transform: translateX(100%); 
                                     opacity: 0;
                                     transition: transform .3s opacity .2s;
                                    }

.products .item:hover .hoverable li{
                                    transform: translateX(0);
                                    opacity: 1;
                                   }                                    

.products .hoverable li:last-child{
                                   transition-delay: .1s;
                                  }                                   

.products .discount{
                    top: auto;
                    right: 0;
                    left: auto;
                    bottom: 0;
                    background-color: transparent;
                    z-index: 1;
                   }                                  

.products .discount::before{
                            background-color: #ced1dd;
                           }                   

.products .discount span{
                         position: relative;
                         font-size: var(--fuente-maspequeña);
                         font-weight: var(--fw5);
                         color: #000000;
                        }         
                        
.products .content{
                   display: flex;
                   flex-direction: column;
                  }                        

.products:where(.big, .main, .one) .content{
                                            gap: 1em;
                                            margin-top: 1.25em;
                                           }                  

.products .rating{
                  display: flex;
                  align-items: center;
                  gap: 0.5em;
                 }                                         

.products .rating .stars{
                         width: 80px;
                         height: 20px;
                         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z' fill='rgba(240,187,64,1)'%3E%3C/path%3E%3C/svg%3E");
                         background-position-y: top;
                         background-repeat-y: no-repeat;
                        } 
                        
/*to set width of stars*/                        

.products .item:where(:nth-child(3), :nth-child(3)) .stars{
                                                           width: 64px;
                                                          }

.products h3{
             font-family: 'Rubik'; 
             font-size: 1em;
             overflow: hidden;
             text-overflow: ellipsis;
             -webkit-line-clamp: 2;
             display: -webkit-box;
             -webkit-box-orient: vertical;
            }                        

.products h3 a:hover{
                     text-decoration: underline;
                    }            

.products .price .current{
                          font-size: calc(1em + 1vw);
                          color: var(--color-primario);
                          margin-right: 0.25em; 
                         }                    

.products .price .normal{
                         color: var(--color-texto-claro);
                         text-decoration: line-through;
                        }                         

.products .stock .qty{
                      display: flex;
                      justify-content: space-between;
                     }                        

.products .stock .bar{
                      height: 3px;
                      margin-top: 1em;
                      background-color: var(--color-borde);
                      overflow: hidden;
                     }                     

.products .stock .available{
                            height: 3px;
                            width: 21%;
                            background-color: var(--color-secundario);
                           }            

.products .item{
                display: flex;
                position: relative;
                padding: 3px;
               }

.products .stock-danger{ 
                        color: var(--color-primario);
                       }               

.flexwrap .row{
               flex: 0 0 100%;
               width: 100%;
               margin-bottom: 2em;
              }



/*************BIG PRODUCT*************/

.products.big .item{
                    flex-direction: column; 
                    padding: 2.5em;
                    border: 2px solid var(--color-secundario-oscuro);
                    border-radius: 7px;
                    max-width: 460px;
                    margin: 0 auto;
                   }

/*************MINI PRODUCT*************/

.products.mini .media{
                      margin-bottom: 2em;
                     }

.products.mini .media{
                      width: 130px;
                      height: 160px;
                      margin-right: 1.25em;
                     }                     

.products.mini .content{ 
                        margin: 0;
                        gap: 0.75em;
                       }                     

.products:where(.mini, .main) h3{
                                 font-weight: 400; 
                                }

/*************MAIN PRODUCT*************/                                

.products.main .item{
                     flex-direction: column;
                     flex: 0 0 100%;
                     padding: 0 0.938em;
                     padding-bottom: 2em;
                    }

.products.main .media{
                      height: 390px;
                     }                    

.products.main .footer{
                       position: absolute;
                       left: 0;
                       right: 0;
                       padding: 0 1em 1em;
                       border-radius: 7px;
                       z-index: 1;
                       background: linear-gradient(0deg, --color-claro-bg) 0%, var(--color-blanco) 70%;
                       opacity: 0;
                       visibility: hidden;
                       will-change: opacity;
                       transition: all .2s ease-in-out;
                      }                     

.products.main .item:hover .footer{
                                   opacity: 1;
                                   visibility: visible;
                                  }                      

.products.main .footer ul{
                          list-style: disc;
                          padding: 1.25em 0 0 1.25em;
                          line-height: 1.8;
                          border-top: 1px solid --color-borde;
                          margin-top: 145px;
                         }                      

.products.main .item:hover .content > *:not(.footer){ 
                                                     z-index: 3;
                                                    }

/***********************************************************************************************
                                   5. BANNER                                      
 ***********************************************************************************************/          

.banners .item{
               position: relative;
               background-color: var(--color-blanco);
               border: 1px solid var(--color-borde);
              }

.banner .image{
               text-align: right;
              }              

.banner .get-gray{
                  background-color: var(--color-borde);
                 }              

.banner :where(.text-content, .over-link){
                                          position: absolute;
                                          top: 0;
                                          left: 0;
                                          width: var(--porciento100);
                                          height: var(--porciento100);
                                         }     

.banner .text-content{
                      padding: 1.5em 2.5em;
                     }                                         

.banner h3{
           font-size: calc(1em + 0.5vw);
           font-weight: var(--fw3);
          }                     

.banner h3 span{
                font-size: 80%;
               }          

.banner .primary-button{
                        z-index: 3;
                       }

.banners .product-categories .item{
                                   display: flex;
                                   padding: 1.5em;
                                  }                       

.banners .product-categories .image{
                                    max-width:  150px;
                                   }                                  

.mini-links ul{
               font-size: var(--fuente-pequeña);
               color: var(--color-texto-claro);
               margin-top: 1em;
              }                                   

.banners .second-links{
                       margin-top: 2em;
                      }

.mini-links li a:hover{
                       text-decoration: underline;
                      }                      

/***********************************************************************************************
                                   6. FOOTER
 ***********************************************************************************************/          

/*************INSTAGRAM POST*************/

.instagram-lista-posteo{
                        margin: 21px;
                        gap: 0;                        
                       }

.instagram-lista-posteo .instagram-item-posteo{
                                               position: relative; 
                                               min-width: 11.33%;
                                               aspect-ratio: 1/1;
                                              }
                                              
.instagram-link-posteo{
                       position: absolute;
                       inset: 0;
                       display: grid;
                       place-items: center;
                       background: #33ffcc2d;
                       opacity: 0;
                       transition: 0.25s ease;
                      }                                              

.instagram-link-posteo{
                       color: var(--color-blanco);
                       font-size: 40px;
                      }

.instagram-link-posteo:is(:hover, :focus){
                                          opacity: 1;
                                         }

.has-scrollbar{
               display: flex;
               gap: 25px;
               overflow-x: auto;
               padding-bottom: 20px;
               scroll-snap-type: inline mandatory;
              }      

.has-scrollbar > li{
                    min-width: 100%;
                    scroll-snap-align: start;
                   }

.has-scrollbar::-webkit-scrollbar{
                                  height: 10px;
                                 }                   

.has-scrollbar::-webkit-scrollbar-track{
                                        background: #ffffff;
                                        border-radius: 20px;
                                        outline: 2px solid #ea553e;
                                       }
                                       
.has-scrollbar::-webkit-scrollbar-thumb{
                                        background: #ea553e;
                                        border: 2px solid #ffffff;
                                        border-radius: 20px;
                                       }                                       


 /*************NEWS LETTER*************/

 .newsletter{
             padding: 2.5em 0;
             background-color: var(--color-oscuro);
             color: var(--color-blanco);
            }

.newsletter h3{
               font-size: 1.5em;
              }            

.newsletter p{
              font-weight: var(--fw3);
              color: var(--color-borde);
              margin: 0.5em 0 1.5em;
             }              

.newsletter p strong{
                     color: var(--color-primario);
                    }             
.newsletter form{
                 max-width: 500px;
                 width: var(--porciento100);
                }

/*************WIDGETS*************/                

.widgets{
         padding: 3.5EM 2.5EM;
         background: var(--color-claro-bg);
        }

/*************INFO*************/         

.footer-info{ 
             padding: 3.5em 0 5em;
            }

.footer-info .wrapper .flexcol{
                               align-items: center;
                               gap: 0;
                              }            

.footer-info ul li a{
                     font-size: 1.25em;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     width: 40px;
                     height: 40px;
                     background-color: var(--color-secundario);
                     border-radius: var(--porciento50);
                     margin: 0.25em;
                     transition: var(--trans-background);
                    }                              

.footer-info ul li a:hover{ 
                           background-color: var(--color-primario); 
                          }                    

.footer-info .mini-text{
                        margin-top: 2em;
                        text-align: center;
                       }                          

/***********************************************************************************************
                                   7. BOTTOM MENU                                      
 ***********************************************************************************************/          

 .menu-bottom{
              position: fixed;
              left: 0;
              right: 0;
              bottom: 0;
              height: 60px;
              background-color: var(--color-blanco);
              box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
              z-index: 900;
             }

.menu-bottom nav li{
                    flex: 1;
                   }             

.menu-bottom nav li a{
                      position: relative;
                      display: flex;
                      flex-direction: column; /**ACA: MINUTO 1:59:53***/
                      align-items: center;
                      padding: 0.5em 0;
                      color: var(--color-texto-claro);
                      transition: var(--trans-color);
                     }                   

.menu-bottom nav li a:hover{
                            color: var(--color-oscuro);
                           }                     

.menu-bottom nav li a span{
                           font-size: var(--fuente-maspequeña);
                          }                           

.menu-bottom nav li a i{ 
                        font-size: 1.25em;
                       }                  
                       
.menu-bottom .fly-item{
                       right: 50%;
                       width: 16px;
                       border-radius: var(--porciento50);
                       margin-right: -20px;
                       background-color: var(--color-secundario-oscuro);
                      }                       

/*************SEARCH*************/                        

.search-bottom{
               position: fixed;
               bottom: 60px;
               width: var(--porciento100);
               padding: 2.5em 0;
               background-color: var(--color-secundario-oscuro);
               z-index: 1000;
               visibility: hidden;
               opacity: 0;
               will-change: visibility, opacity;
              }

.showsearch .search-bottom{
                           visibility: inherit;
                           opacity: 1;
                          }              

.search-bottom .t-close{
                        position: absolute;
                        top: -54px;
                        right: 0;
                        color: var(--color-oscuro);
                       }              

.search-bottom .t-close:hover{ 
                              background-color: var(--color-primario);
                             }                       

/***********************************************************************************************
                                   8. OVERLAY  
 ***********************************************************************************************/          

.overlay{
        position: fixed;
        width: var(--porciento100);
        height: var(--porciento100);
        top: 0;
        left: 0;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.4);
        visibility: hidden;
        opacity: 0;
        will-change: visibility, opacity;
       } 

.showmenu .overlay{
                   opacity: 1;
                   visibility: inherit;
                  }       

/***********************************************************************************************
                                   9. PAGE SINGLE
 ***********************************************************************************************/          



 /*************DEPARTMENT MENU*************/   

 .page-home .dpt-cat .dpt-trigger,
 .dpt-trigger .ri-close-line,
 .showdpt .dpt-trigger .ri-menu-3-line{
                                       display: none;
                                      } 

.showdpt .dpt-trigger .ri-close-line{
                                     display: block;
                                    }   
                                    
/*************BREADCRUMB*************/                                      

.breadcrumb{
            font-size: var(--fuente-pequeña);             
            margin-bottom: 2em;
           }

.breadcrumb li:not(:last-child)::after{
                                       content: '/';
                                       padding: 0 0.35em;
                                      }     

.breadcrumb li:last-child{
                          display: block;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          color: var(--color-texto-claro);
                         }         

/*************PRODUCT DETAILS*************/   

.products.one .item{
                    flex-direction: column;
                   }

.products.one .price .discount{ 
                               font-size: 1em;
                               font-weight: var(--fw7);
                               line-height: 1.3;
                               position: absolute;
                               top: 0;
                               bottom: auto;
                               padding: 1em;
                               z-index: 2;
                               background-color: var(--color-oscuro);
                               color: var(--color-blanco);
                               border-radius: var(--porciento50);
                               margin: 0.5em;
                              }

.products.one :where(.big-image, .small-image){ 
                                               overflow: hidden;
                                              }                               

.products.one .big-image{
                         position: relative;
                         margin-bottom: 1em;
                        }

.products.one :where(.big-image, .small-image) img{
                                                   object-fit: cover;
                                                   width: var(--porciento100);
                                                   height: var(--porciento100);
                                                   display: block;
                                                  }                         

.products.one .thumbnail-show{
                              position: relative;
                              width: 130px;
                              height: 110px;
                              overflow: hidden;
                              margin: 0 2em 2em 0;
                             }                         

.products :is(.swiper-button-next, .swiper-button-prev){
                                                         outline: 0;
                                                         color: var(--color-secundario-oscuro);
                                                         transition: var(--trans-background), transform .3s;
                                                       }      
                                                       
.products .big-image:hover .swiper-button-next{
                                               transform: translateX(10px);
                                              }
                                              
.products .big-image:hover .swiper-button-prev{
                                               transform: translateX(-10px);
                                              }                     
                                              
.products :is(.swiper-button-next, .swiper-button-prev)::after{
                                                               font-size: 1.5em; 
                                                              }  

.products .big-image:hover :is(.swiper-button-next, .swiper-button-prev){
                                                                         background-color: var(--color-claro-bg);
                                                                        }                                                             
/*************lightbox: go to fslightbox.com*************/
                             
/*************PRODUCT DESCRIPTION*************/  

.products.one .available{
                         font-size: var(--fuente-pequeña);
                         font-weight: var(--fw5);
                         padding: 0.5em;
                         margin-right: 1em;
                         border-radius: 3px;
                         color: var(--color-oscuro);
                         background-color: var(--color-claro-bg);
                        }

.products.one .add-review{
                          color: var(--color-primario);
                         }                        

.products.one .price{ 
                     display: flex;
                     gap: 1em;
                     align-items: center;
                     flex-wrap: wrap;
                    }

.products.one .price .current{
                              font-size: 2.5em;
                             }                    

.products .variant form{
                        display: flex;
                        margin-top: 0.5em;
                       }                             

.products .variant form p{
                          position: relative;
                          margin: 0 0.5em 0.5em;
                         }

.products :where(.variant, .actions) .circle{
                                             display: block;
                                             position: static;
                                             top: 0;
                                             margin: 0;
                                             cursor: pointer;
                                             z-index: 1;
                                            }
                          
:where(.products .variant, .filter-block:not(.pricing)) input{
                                                              clip: rect(0,0,0,0);
                                                              overflow: hidden;
                                                              position: absolute;
                                                              height: 0;
                                                              width: 0;
                                                             }
                        
.products .colors .variant label::before{
                                 opacity: 1;
                                }                        

.products .variant label[for="cogrey"]::before{
                                               background-color: #576574;
                                              }

.products .variant label[for="coblue"]::before{
                                               background-color: #45a0ff;
                                              }
                                               
.products .variant label[for="cogreen"]::before{
                                                background-color: #1dd1a1;
                                               }

.single-product .variant form p input:checked + label{
                                                      background-color: transparent;
                                                      border: 2px solid var(--color-oscuro); 
                                                      color: var(--color-borde-dpt);
                                                     }                                               

.products .sizes .variant label::before{
                                        background-color: var(--color-blanco);
                                       }
                                       
.products .sizes .variant label span{
                                     position: absolute;
                                     top: 0;
                                     left: 0;
                                     width: var(--porciento100);
                                     height: var(--porciento100);
                                     font-size: 0.85em;
                                     display: flex;
                                     align-items: center;
                                     justify-content: center;
                                    }

.single-product .sizes .variant form p input:checked + label::before{
                                                                     background-color: var(--color-blanco);
                                                                     opacity: 1;
                                                                    }         

.products .actions{
                   display: flex;
                   flex-wrap: wrap;
                   margin-top: 2em;
                   padding: 0.4em;
                  }

.products .qty-control{
                       width: fit-content;
                       padding: 0.5em;
                       border: 1px solid var(--color-borde);
                       margin:  0 2em 2em 0;
                      }
                      
.products .actions :where(input, button){                                         
                                         font-size: 1.25em;
                                         outline: 0;
                                         border: 0;                                         
                                        }

.products .actions input{
                         width: 50px;
                         text-align: center;
                        }                   
                        
.products .qty-control button::before{
                                      background-color: transparent;
                                     }                        

.products .actions .button-cart{
                                flex: 1;
                                min-height: 70px;
                               }                                     

.products .actions .button-cart button{
                                       width: var(--porciento100);
                                       cursor: pointer;
                                      }

.wish-share a{
              display: flex;
              align-items: center;
              text-transform: uppercase;
              font-weight: var(--fw7);
              margin: 1em 2em 1em 0;
              transition: var(--trans-color);
             }                                      


/*************PRODUCT REVIEW*************/ 

.products .collapse .has-child > a{
                                   position: relative;
                                   font-weight: var(--fw7);
                                   text-transform: uppercase;
                                   padding: 1em 1.25em;
                                   border-top: 1px solid var(--color-borde);
                                   gap: 1em;
                                   align-items: flex-start;
                                  }

.products .collapse .has-child > a::before{
                                           content: '+'; 
                                           position: absolute;
                                           left: 0;
                                          }         
                                          
.products .collapse .content{
                             margin: 0 0 1.5em 2em;
                             font-size: var(--fuente-mediana);
                            }                                          

.products .collapse .content li span:first-child{
                                                 min-width: 100px;
                                                 display: inline-flex;
                                                 font-weight: var(--fw7);
                                                 text-transform: uppercase;
                                                }                            

.products .collapse table{ 
                          line-height: 3em;
                         }                                                

.products .collapse table thead th{
                                   vertical-align: bottom;
                                   border-bottom: 2px solid var(--color-oscuro);
                                  }                         

.products .collapse table :where(th, td){
                                         border-bottom: 1px solid var(--color-borde);
                                         padding-left: 2em;
                                        }                  
                                        
.products .collapse .content{
                             display: none;
                            }                                        

.products .collapse .expand .content{
                                     display: flex;                                      
                                    }               

.products .collapse .expand > a::before{
                                        content: '-';
                                       }                                    

/*************PRODUCT REVIEW FORM*************/ 

.products .reviews h4{
                      font-size: 2em;
                      color: var(--color-texto-claro);
                      padding-top: 1em;
                      margin: 1em 0 0.5em;
                      border-top: 1px solid var(--color-borde);
                     }

.products .review-block-head > a{
                                 display: block;
                                 font-size: 1.25em;
                                 width: var(--porciento100);
                                 margin-top: 1em;
                                 text-align: center;
                                }

.products .review-block-head .rate-sum{
                                       position: relative;
                                       font-size: 4em;
                                       font-weight: var(--fw7);
                                       padding: 0.5em;
                                      }                                

.products .review-block-head .rate-sum::before{
                                               content: '';
                                               width: 2px;
                                               height: 50px;
                                               display: block;
                                               position: absolute;
                                               top: 10px;
                                               right: 13px;
                                               transform: rotate(22deg);
                                               background-color: var(--color-claro-bg);
                                              }
                                              
.products .review-block-body .item{
                                  gap: 1em;
                                  padding-bottom: 2.5em;
                                  margin-top: 3.5em;
                                 }                                              

.products .review-block-body :where(.person, .rewiew-title){
                                                            font-weight: var(--fw7);
                                                            text-transform: uppercase;
                                                           }

.products .review-block-body :where(.review-title, .view-all){
                                                              font-size: 1.25em;
                                                              justify-content: end;
                                                             }                                                           

.products .review-block-body .item:not(:last-child){
                                                    border-bottom: 1px solid var(--color-borde);
                                                   }                                                             

/*************PRODUCT REVIEW FORM*************/                                                    

.review-form .rating{
                     flex-wrap: wrap;
                    }

.review-form p{
               font-size: 1.25em;
               margin-right: 1em;
              }

.review-form .rate-this input{
                              display: none;
                             }              

.review-form .rate-this label{
                              float: right;
                              font-size: 2em;
                              color: var(--color-oscuro);
                             }                             

.rate-this > input:checked ~ label,
.rate-this:not(:checked) > label:hover,
.rate-this:not(:checked) > label:hover ~ label{
                                               color: #f1c40e;
                                              }                             

.rate-this > input:checked + label:hover,
.rate-this > input:checked ~ label:hover,
.rate-this > label:hover ~ input:checked ~ label,
.rate-this > input:checked ~ label:hover ~ label{
                                                 color: #ffed85; 
                                                }

.review-form form{
                  margin-top: 2.5em;
                 }                                                

form p{
       display: flex;
       flex-direction: column;
       margin-bottom: 2em;
      }                 

form :where(input, textarea){
                             line-height: 1;
                             padding: 1em;
                             border: 1px solid var(--color-borde);
                             outline: 0;
                            }      

form label{
           font-weight: var(--fw5);
           margin-bottom: 0.5em;
           text-transform: uppercase;
          }                            

/***********************************************************************************************
                                   10. PAGE SINGLE: SPECIAL OFFER 
 ***********************************************************************************************/           

.page-single .stock{
                    margin: 2em 0;
                   }

.page-single .stock .qty span:last-child{
                                         color: initial;
                                        }                   

.page-single .stock .bar{
                         height: 10px;
                        }                                        

.page-single .stock .bar .available{
                                    margin: 0;
                                    border-radius: 0;
                                    background-color: var(--color-secundario-oscuro);
                                   }                        

.related-products .content{
                           height: var(--porciento100);
                          }                                   

.related-products .offer{
                         margin: 0;
                        }                          

.related-products .offer p{ 
                           margin: 0 1em 0 0;
                           text-transform: none;
                           line-height: 1;
                          }               

.related-products .offer ul li{
                               width: 28px;
                               height: 28px;
                               font-size: var(--fuente-pequeña);
                               padding: 0.5em 0.25em;
                              }
                              
.related-products .content .stock{
                                  margin-top: auto;
                                 }                              


/***********************************************************************************************
                                   11. PAGE CATEGORY
 ***********************************************************************************************/
 
.single-category .holder{
                         display: flex;
                         flex-direction: column;
                        }

.single-category .sidebar,
.single-category .section{
                          flex: 1 0 100%; 
                         }                        

 /*************SIDEBAR PRODUCTS FILTER*************/  

.filter-block{
              margin-bottom: 1em;
              padding-bottom: 1em;
             }

.filter-block:not(:last-child){
                               border-bottom: 1px solid var(--color-borde);
                              }

.filter-block h4{
                 font-size: 1.25em;
                 margin-bottom: 0.5em;
                }                              

.filter-block li{
                 display: flex;
                 font-size: 0.9em;
                 position: relative;
                 line-height: 2;
                }
                
.filter-block label .checked{ 
                             width: 16px;
                             height: 16px;
                             position: relative;
                             line-height: 0;
                             display: inline-block;
                             border: 2px solid var(--color-secundario-oscuro);
                             vertical-align: text-top;
                             margin: 0 7px 0 0;
                             cursor: pointer;
                            }                

.filter-block label .checked::before{
                                     content: '';
                                     position: absolute;
                                     width: 8px;
                                     height: 8px;
                                     background-color: var(--color-secundario-oscuro);
                                     top: 2px;
                                     left: 2px;
                                     opacity: 0;
                                    }                            

.filter-block input:checked + label .checked::before{ 
                                                     opacity: 1;
                                                    }                                    

.filter-block li .count{
                        margin-left: auto;
                        color: var(--color-texto-claro);
                       }                                                    

.bycolor label[for="cored"]::before{
                                    background-color: var(--color-primario);
                                   }

.bycolor label[for="colight"]::before{
                                      background-color: var(--color-borde);
                                     }               
                                     
.bycolor input:checked + label{
                               background-color: transparent;
                               border: 2px solid var(--color-oscuro);
                              }
                              
input[type="range"]{
                    -webkit-appearance: none; 
                    width: var(--porciento100);
                   }
                   
input[type="range"]:focus{
                         outline: 0;
                         }          
                         
input[type="range"]::-webkit-slider-runnable-track{ 
                                                   width: var(--porciento100);
                                                   height: 5px;
                                                   cursor: pointer;
                                                   background-color: var(--color-borde);
                                                   box-shadow: none;
                                                   border: 0;
                                                  }

input[type="range"]::-webkit-slider-thumb{
                                          z-index: 2;
                                          position: relative;
                                          height: 18px;
                                          width: 14px;
                                          background-color: var(--color-primario);
                                          -webkit-appearance: none;
                                          margin-top: -7px;
                                         }                                                  

.byprice .price-range{
                      display: flex;
                      justify-content: space-between;
                      color: var(--color-texto-claro);
                      margin-top: 0.5em;
                     }                                         

/*************HEAD & PRODUCTS BLOCK*************/                       

.page-title{
            margin-bottom: 3em;
           }

.cat-descripion p{
                  font-weight: var(--fw3);
                  font-size: 0.9em;
                 }

.cat-navigation{
                font-size: 0.85em;
                margin: 2em 0;
                justify-content: flex-end;
                gap: 1em;
               }      
               
.cat-navigation .item-filter{
                             margin-right: auto;
                            }               

.cat-navigation > div{
                      position: relative;
                     }               

.cat-navigation .item-filter a{
                               align-items: center;
                               text-transform: uppercase;
                              }                     

.cat-navigation ul{ 
                   display: none;
                   position: absolute;
                   left: 0;
                   min-width: var(--porciento100);
                   width: max-content;
                   z-index: 10;
                  }                              

.cat-navigation .label, .cat-navigation ul li{
                                              display: flex;
                                              gap: 0.5em;
                                              padding: 0.5em 1em;
                                              transition: var(--trans-color);
                                             }                  

:where(.item-sortir, item-options) .label,
.cat-navigation ul{
                   color: var(--color-texto-claro);
                   background-color: var(--color-claro-bg);
                   cursor: pointer;
                  }

.cat-navigation :where(label, ul li):hover{
                                           color: var(--color-oscuro);
                                          }

:where(.item-sortir, .item-options):hover ul{ 
                                             display: block;
                                            }              
                                            
.load-more{
           margin: 2em 0 4em;
          }                       
          
.filter{ 
        position: fixed; 
        top: 0;
        left: 0;
        bottom: 0;
        padding: 2em;
        max-width: 400px;
        width: 90%;
        background-color: var(--color-blanco);
        overflow: auto;
        z-index: 1000;
        box-shadow: rgb(0 0 0 / 30%) 0 10px 50px;
        visibility: hidden;
        opacity: 0;
       }
       
.filter.show{
             visibility: visible;       
             opacity: 1;
            }       

/***********************************************************************************************
                                   12. CART
 ***********************************************************************************************/

 .mini-cart{
            position: absolute;
            width: 400px;
            top: 100%;
            right: 0;
            background-color: var(--color-blanco);
            z-index: 1000;
            box-shadow: rgb(0 0 0 / 30%) 0 10px 50px;
            visibility: hidden;
            opacity: 0;
           }

.iscart:hover .mini-cart{
                          visibility: visible;
                          opacity: 1;
                         }           

:is(.mini-cart .products, .products.cart, .checkout .products) .thumbnail img{
                                                                              transform: none;
                                                                             }           

.mini-cart ul :where(li, .price){
                 position: relative;
                }                   
                
.mini-cart .content{
                    width: var(--porciento100);
                    height: var(--porciento100);
                    touch-action: auto;
                    padding: 1.5em;
                   }                

.mini-cart .cart-head{
                      font-size: 1.5em;
                      font-weight: var(--fw5);
                      color: var(--color-texto-claro);
                      padding-bottom: 0.5em;
                      margin-bottom: 1em;
                      border-bottom: 1px solid var(--color-borde);
                     }                   

.mini-cart .cart-body{
                      padding: 0 1.5em;
                      margin: 0 -1.5em;
                      max-height: 450px;
                      overflow: auto;
                     }                     

:where(.mini-cart, .products.cart, .checkout) .thumbnail{ 
                                                         position: relative;
                                                         width: 80px;
                                                         height: 80px;
                                                         flex-shrink: 0;
                                                         margin-right: 1em;
                                                        }                     

.mini-cart .item-content p{ 
                           font-size: var(--fuente-pequeña);
                           font-weight: var(--fw5);
                           margin-bottom: 1.5em;
                           line-height: 1.2;
                          }               
                          
.mini-cart .item-remove{
                        margin-left: 1em;
                        flex: 1;
                        justify-content: flex-end;
                       }                          

.mini-cart .subtotal{
                     display: flex;
                     flex-direction: column;
                     padding-top: 1em;
                     margin-bottom: 2em;
                     border-top: 1px solid var(--color-borde);
                    }                       

.mini-cart .subtotal p:last-child{ 
                                  font-size: 2em;
                                 }

.mini-cart .actions a{ 
                      display: block;
                      width: var(--porciento100);
                      text-align: center;
                      margin-bottom: 1em;
                     }                                 

.mini-cart.show{
                visibility: visible;
                opacity: 1;
                position: fixed;
                top: 0;
                bottom: 0;
                max-width: 400px;
                width: 90%;
               }                     

/***********************************************************************************************
                                   13. PAGE CART
 ***********************************************************************************************/

 .products.cart form{
                    width: var(--porciento100);
                   }

.products.cart table thead th{ 
                              vertical-align: middle;
                              background-color: var(--color-claro-bg);
                             }                   

.products.cart table :where(th, td){
                                    padding: 2em 1em;
                                    text-align: center;
                                   }

.products.cart table :where(th, td):first-child{ 
                                                text-align: left;
                                                padding-left: 2em;
                                               }                                   

.products.cart table tbody td:first-child{
                                          padding-left: 0;
                                         }                                               

.products.cart table td :where(.content, .qty-control, p){
                                                          margin: 0;
                                                          padding: 0;
                                                         }

.products.cart .qty-control :where(button, input){
                                                  width: 32px;
                                                  height: 32px;
                                                  padding: 0.25em;
                                                  text-align: center;
                                                  outline: 0;
                                                  border: 0;
                                                  background-color: transparent;
                                                 }             
                                                 
.products.cart .qty-control button{
                                   cursor: pointer;
                                  }                                                 

.products.cart table tbody tr{
                              border-bottom: 1px solid var(--color-borde);
                             }                              
                             
.cart-summary{
              width: var(--porciento100);
              margin: 2.5em 0 4em;
             }                             

.cart-summary .item{
                    background-color: var(--color-claro-bg);
                   }             

.cart-summary .coupon{
                       position: relative;
                     }                   

.cart-summary .coupon input{
                            font-size: 1.1em;
                            outline: 0;
                            width: var(--porciento100);
                            padding: 0 1.5em;
                            line-height: 50px;
                            background-color: var(--color-blanco);
                            border: 3px solid var(--color-oscuro);
                           }

.cart-summary .coupon button{
                             position: absolute;
                             top: 0;
                             right: 0;
                             border: 0;
                             outline: 0;
                             font-size: 1em;
                             padding: 0 2.5em;
                             line-height: 56px;
                             background-color: var(--color-oscuro);
                             color: var(--color-blanco);
                             cursor: pointer;
                            }                           

.cart-summary .shipping-rate{ 
                             padding: 0 2em 0 1em;
                            }                            

.cart-summary .shipping-rate .has-child > a{
                                            font-size: 1em;
                                            margin: 2em 0;
                                            border: 0;
                                           }     
                                           
.cart-summary .content form{
                            display: flex;
                            flex-direction: column;
                            margin-bottom: 1em;
                           }                                           

.styled :where(input, select, textarea){
                                        padding: 0.75em;
                                        outline: 0;
                                        background-color: var(--color-blanco);
                                        border-width: 0 0 3px 0;
                                        border-style: solid;
                                        border-color: var(--color-borde);
                                       }

.products .cart-summary .variant form label{
                                            position: relative;
                                            border: 0;
                                            background-color: var(--color-blanco);
                                            transform: scale(.5) translateX(-25px);
                                           }                                       

.cart-summary .variant p span{
                              position: absolute;
                              top: 0;
                              left: 20px;
                              line-height: 3;
                             }                                           

.cart-summary .variant input:checked + label::before{
                                                     opacity: 1;
                                                    }                          
                                                    
.products.cart .cart-total table tr > *{
                                        padding: 0;
                                       }                                                    

.products.cart .cart-total table td{
                                    text-align: right;
                                   }                                       

.cart-summary .cart-total{  
                          padding: 2em;
                          background-color: var(--color-borde);
                          line-height: 2em;
                         }                                   

.cart-summary .cart-total table{ 
                                width: var(--porciento100);
                               }                         

.cart-summary .cart-total table tr{
                                   display: flex;
                                   justify-content: space-between;
                                  }                               

.cart-summary .grand-total td{ 
                             font-size: 2em;
                             font-family: 'Poppins';
                             font-weight: var(--fw8);
                             line-height: 2em;
                            }

.cart-summary .cart-total > a{
                              width: var(--porciento100);
                              display: block;
                              text-align: center;
                              margin-top: 2em;
                              font-size: 1.25em;
                             }                            

/***********************************************************************************************
                                   14. PAGE CHECKOUT
 ***********************************************************************************************/
 
 .checkout{
           margin: 5em 0;
          }

.checkout .left{
               padding: 4em;
               background-color: var(--color-claro-bg);
               box-shadow: 0 15px 70px -8px rgb(0 0 0 / 20%);
              }          

.checkout .item{
                width: var(--porciento100);
               }              
 
.checkout .left h1{
                   /*font-weight: var(--fw3);*/
                   margin-bottom: 34px;
                  }               

.checkout .left label{
                      font-size: var(--fuente-pequeña);
                      text-transform: capitalize;
                      position: relative;
                      width: fit-content;
                     }                  

.checkout .left label span{
                           position: absolute;
                           top: 0;
                           right: -10px;
                           width: 6px;
                           height: 6px;
                           background-color: var(--color-primario);
                           border-radius: var(--porciento50);
                          }                     

.checkout p :where(input, textarea){
                                    background-color: rgb(255 255 255 / 50%);
                                    font-family: inherit;
                                   }

.checkout p input:focus{
                        background-color: var(--color-blanco);
                       }                                   

.checkout p.checkset{
                     flex-direction: row;
                    }

.checkout p.checkset label{
                           margin: 0 0 0 1em;
                           cursor: pointer;
                          }                    

.checkout h2{
             padding-top: 0.5em;
             margin-bottom: 0.75em; 
             border-top: 1px solid var(--color-borde);
            }                          

.primary-checkout button{
                         display: block;
                         border: 0;
                         outline: 0;
                         cursor: pointer;
                         width: var(--porciento100);
                         max-width: 280px;
                         font-size: 1.2em;
                         margin: 3em auto 0;
                        }            

.checkout .item.right{
                      padding: 5em 0 0;
                     }                        

.summary-totals ul{
                   max-width: 335px;
                   line-height: 2;
                   margin-bottom: 3em;
                   padding-bottom: 2em;
                   border-bottom: 1px solid var(--color-secundario-oscuro);
                  }

.summary-totals li{
                   display: flex;
                   justify-content: space-between;
                   font-weight: var(--fw5);
                  }                  

.summary-totals li strong{    
                          font-size: 2.5em;
                          line-height: 1;
                         }                  

.summary-totals li:last-child{
                              margin-top: 2em;
                             }

.summary-totals li:not(:last-child) span:first-child{ 
                                                     color: #855e5e;
                                                    }                             

.summary-order .price{
                      display: flex;
                      flex-direction: column;
                      color: var(--color-texto-claro);
                      font-size: 0.85em;
                      margin-top: 0.5em;
                     }                                                    






/***********************************************************************************************
                                   15. RESPONSIVE                                      
 ***********************************************************************************************/          

 @media screen and (min-width: 481px){
                                      .products.main .item{
                                                           flex: 0 0 50%;
                                                          }

                                       /*page single*/                   

                                       .products.one .big-image{
                                                                margin-bottom: 2em;
                                                               }

                                       .products.one .image-show{
                                                                 height: 680px;
                                                                }
               
                                       .products.one .thumbnail-show{
                                                                     height: 160px;
                                                                    }

                                     }

@media screen and (min-width: 639px){
                                     #cart-table thead{
                                                       display: none;
                                                      }                                     

                                     #cart-table tbody tr{
                                                          display: flex;
                                                          flex-wrap: wrap;
                                                          position: relative;
                                                          align-items: center;
                                                         }                 

                                     #cart-table tbody tr td:first-child{
                                                                         width: var(--porciento100);
                                                                         min-width: var(--porciento100);
                                                                         position: relative;
                                                                        }                     

                                      #cart-table tbody tr td:not(:first-child){
                                                                                flex-basis: 0;
                                                                                flex-grow: 1;
                                                                                max-width: var(--porciento100);
                                                                               }                                  

                                      #cart-table tbody tr td:last-child{
                                                                         position: absolute;
                                                                         top: 0;
                                                                         right: 0;
                                                                        }                                        
                                     }

@media screen and (min-width: 768px){
                                     .products .price .current{
                                                               font-size: 1.25em;      
                                                              } 

                                     .products.mini, 
                                     .banner .row, 
                                     .widgets .row,
                                     .checkout .item{
                                                     flex: 0 0 50%;
                                                    }              
                                                  
                                     .products.main .item{
                                                          flex: 0 0 33.3333%;
                                                         }

                                     .products.one .row{
                                                        flex: 0 0 50%;
                                                        width: 50%;
                                                       }   
                                                     
                                     .products.one .is_sticky,
                                     .is_sticky{
                                                position: sticky;
                                                top: 2em;
                                               }                  
                                                
                                     .checkout .item.right{
                                                           padding: 5em 0 0 5em;
                                                          }          
                                    }


@media screen and (min-width: 992px){
                                     .container{
                                                padding: 0 2em;
                                               } 

                                     .desktop-hide{
                                                   display: none;
                                                  }      
                                                  
                                     .mobile-hide{
                                                  display: block;
                                                 }            

                                     .logo a{
                                             margin-right: 2em;
                                            }            

                                     .header-nav{
                                                 padding: 0;
                                                 margin: 0;
                                                 border-bottom: 0;
                                                }       
                                               
                                     .header-nav .right li > a{
                                                               margin-left: 1em;
                                                              }           
                                      
                                     /* Mega Menu */                         

                                     nav .mega{
                                               position: absolute;
                                               width: var(--porciento100);
                                               height: auto;
                                               top: auto;
                                               left: 0;
                                               right: 0;
                                               padding: 2.5em;
                                               line-height: 2em;
                                               background-color: var(--color-claro-bg);
                                               box-shadow: rgb(0 0 0 / 20%) 0 30px 20px -30px;
                                               z-index: 100;

                                               display: none;
                                              }

                                     nav li.has-child:hover .mega{
                                                                  display: block;
                                                                 }   
                                              
                                     nav .mega .wrapper{
                                                        display: flex;
                                                       }   
                                                       
                                     nav .mega h4{
                                                  font-size: 0.8em;
                                                  text-transform: uppercase;
                                                 }                  

                                     nav .mega ul{
                                                  font-size: var(--fuente-pequeña);
                                                 }            

                                     nav .mega .women-brands{
                                                             display: flex;
                                                             flex-wrap: wrap;
                                                             max-width: 180px;
                                                            }    
                                                            
                                     nav .mega .women-brands li{
                                                                min-width: 89px;
                                                               }     
                                                               
                                     nav .mega .view-all{
                                                         margin-top: 1em;
                                                        }                          

                                     nav .mega .products{
                                                         flex: 2;
                                                         padding: 0;
                                                         align-items: center;
                                                         position: relative;
                                                        }

                                     nav .mega .products .row{
                                                              width: var(--porciento100);
                                                             }           
                                                             
                                     nav .mega .products .media{
                                                                height: 400px;
                                                               }                        

                                     nav .mega .products .text-content{
                                                                      line-height: initial; 
                                                                      display: flex;
                                                                      flex-direction: column;
                                                                      align-items: center;
                                                                      gap: 0.5em;
                                                                      margin-top: 0.5em;
                                                                      position: absolute;
                                                                      bottom: 4em;
                                                                      width: var(--porciento100);
                                                                     } 

                                     nav .mega .products .text-content h4{
                                                                          font-size: 2em;
                                                                          font-weight: var(--fw8);
                                                                          text-align: center;
                                                                          color: var(--color-secundario-oscuro);
                                                                         }                                

                                     .header-main .right{
                                                         max-width: 600px;
                                                         margin-left: auto;                                                         
                                                        }                                    

                                     /* DEPARTAMENTO MENU */                     

                                     .dpt-menu{
                                               position: absolute;
                                               top: var(--porciento100);
                                               width: 300px;
                                               background-color: var(--color-blanco);
                                               border: 1px solid var(--color-borde-dpt);
                                               border-top: 0;
                                               border-bottom: 0;                                               
                                              }

                                     .dpt-menu > ul > li > a{
                                                             font-weight: var(--fw5);
                                                             padding: 0 1.5em;
                                                             border-bottom: 1px solid var(--color-borde-dpt);                                                             
                                                            }         
                                       
                                     .dpt-menu .has-child > ul, .dpt-menu .mega{
                                                                                position: absolute;
                                                                                top: 0;
                                                                                left: var(--porciento100);
                                                                                width: var(--porciento100);
                                                                                height: auto;
                                                                                min-height: var(--porciento100);
                                                                                padding: 1.5em;
                                                                                font-size: var(--fuente-pequeña);
                                                                                line-height: 2.5em;
                                                                                border: 1px solid var(--color-borde);
                                                                                border-top: 0;
                                                                                display: none;
                                                                                background-position: right bottom;
                                                                                background-repeat: no-repeat;
                                                                                background-size: auto;
                                                                               }  

                                     /* Showing the first sub meny*/
                                     
                                     .dpt-menu .aire_acondicionado_convencional ul{
                                                                                   background-image: url("../images/menu/menu_bg1.jpg");
                                                                                  }                                       

                                     .dpt-menu .electric ul{
                                                            background-image: url("../images/menu/menu_bg2.jpg");
                                                           }

                                     .dpt-menu .fashion ul{
                                                           background-image: url("../images/menu/menu_bg3.jpg");
                                                          }

                                     .dpt-menu .homekit .mega{
                                                              background-image: url("../images/menu/menu_bg4.jpg");
                                                             }

                                     .dpt-menu .has-child > :where(ul, .mega)::before{
                                                                                      content: ''; 
                                                                                      position: absolute;
                                                                                      top: 0;
                                                                                      left: 0;
                                                                                      right: 0;
                                                                                      bottom: 0;
                                                                                      background: linear-gradient(90deg, rgba(225,225,255,1) 0%, rgba(225,225,255,0));                                                                                            
                                                                                     }                        

                                     .dpt-menu .mega{
                                                     width: auto;
                                                     min-width: var(--porciento100);                                                                                                          
                                                    }              
                                                    
                                     .dpt-menu .has-child:hover .mega{
                                                                     display: flex;
                                                                     }   
                                                                     
                                     /* slider */  
                                     
                                     .slider > div > .wrapper{                                                              
                                                              width: 100%;
                                                              margin-left: auto;
                                                             }  
                                     
                                     /* products */                          
                                         
                                     .trending .products, .product-categories .row{
                                                                                   flex: 0 0 33.3333%;
                                                                                  }                         
                                      
                                     .products.big .media{
                                                          max-height: 373px;
                                                         } 
                                                        
                                     .products.main .item, .widgets .row{
                                                                         flex: 0 0 25%;
                                                                        }  
                                                         
                                     /* footer */                       
                                     
                                     .newsletter .box{
                                                      display: flex;
                                                      justify-content: space-between;
                                                      align-items: center;
                                                     }

                                      /* page single */
                                      
                                      #page:not(.page-home) .dpt-menu{
                                                                      display: none;
                                                                     }
                                                                    
                                      #page.showdpt .dpt-menu{
                                                              display: block;
                                                             }  
                                                             
                                      .products.one .flexwrap > .row:last-child > .item{
                                                                                        padding-left: 2em; 
                                                                                       }  
                                                                                       
                                      /* Page Category */                                                   
                                      .single-category .holder{
                                                               flex-direction: row;
                                                              }

                                      .single-category .sidebar{
                                                                flex: 1 0 25%;
                                                               }                        

                                      .single-category .section{
                                                                flex: 1 0 75%;
                                                               }                         

                                       .single-category .sidebar .filter{
                                                                         padding: 0 1.5em 0 0;
                                                                         position: sticky;
                                                                         top: 2em;
                                                                         box-shadow: none;
                                                                         width: var(--porciento100);
                                                                         z-index: initial;
                                                                         visibility: visible;
                                                                         opacity: 1;
                                                                        }          
                                                                        
                                      .single-category .products.main .item{
                                                                            flex: 0 0 33.3333%; 
                                                                           }      
                                                                           
                                      /* Page Cart*/                                     

                                      .products.cart .form-cart{
                                                                width: 66%;
                                                               }

                                      .products.cart .cart-summary{
                                                                   width: 34%;
                                                                   padding-left: 2.5em;
                                                                   margin-top: 0;
                                      }                         

                                    }