hr {
  width: 100%;
  border: 1px solid var(--azul-electrico);
}

h1,h2,h3,h4,h5,h6, a, p, li, label{
  color: var(--blanco);
}

h1, h2, h3, h4, h5, h6{
  margin: 1rem 0;
}

/* Cart styles */
@media screen and (min-width: 1024px){

  #cart-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    padding: 2rem;
  }
  #cart-section {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-grow: 1;
    margin: 1rem;
  }
  #cart-article {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    border: 1px solid var(--blanco);
    border-radius: 0.5rem;
    margin: 1rem;
    width: 768px;
  }
  #cart-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 1rem;
    gap: 1rem;
  }
  
  #card-title {
    width: 100%;
    border-bottom: 1px solid var(--blanco);
    margin: 1rem 0;
  }
  .cart-item {
    margin: 1rem;
    width: 100%;
    height: 256px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    border: 1px solid var(--blanco);
    border-radius: 0.5rem;
  }
  
  .item-description {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
  }
  
  .item-description h3 {
    color: var(--blanco);
    padding: 1rem;
  }
  
  .item-details_commercial {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    padding: 0.5rem 1rem;
    border-left: 1px solid var(--blanco);
  }
  
  .item-details_commercial div:first-of-type{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 1rem;
  }
  
  .item-details_commercial div:first-of-type div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  } 

  .item-details_commercial div:first-of-type p{
    background-color: var(--blanco);
    padding: 1rem;
    border-radius: .5rem;
    color: var(--negro);
  }
  
  .item-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  .item-details ul{
    list-style-type: none;
    padding: 0;
    margin: 0 .5rem;
  }
  
  .item-details ul li{
    margin: 1rem;
  }
  
  .item-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;
  }
  
  .delete-button {
    padding: 0.7rem;
    border: 1px solid transparent;
    background-color: var(--rojo);
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  
  .increment-button {
    padding: 0.7rem;
    border: 1px solid transparent;
    background-color: var(--azul-electrico);
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  
  .decrement-button {
    padding: 0.7rem;
    border: 1px solid transparent;
    background-color: var(--rosa-intenso);
    border-radius: 0.5rem;
    margin: 1rem 0;
  }

  .delete-button, .decrement-button, .increment-button{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow .5s;
  }

  .delete-button:hover{
    box-shadow: 0 0 .5rem var(--rojo);
  }
  .decrement-button:hover{
    box-shadow: 0 0 .5rem var(--rosa-intenso);
  }
  .increment-button:hover{
    box-shadow: 0 0 .5rem var(--azul-electrico);
  }
  
  #cart-resume {
    border: 1px solid var(--blanco);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem;
    width: 320px;
  }
  
  #cart-resume div ul{
    margin: 0 1rem;
    padding: 1rem 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #cart-resume div:first-of-type {
    width: 100%;
    border-bottom: 1px solid var(--blanco);
  }

  #cart-resume div:nth-of-type(2){
    width: 100%;
    border-top: 1px solid var(--blanco);
  }
  
  #cart-resume div:last-of-type{
    border-top: 1px solid var(--blanco);
    width: 100%;
    padding: 1rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: space-evenly;
  }

  #cart-resume div button{
    cursor: pointer;
    font-size: 1rem;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow .5s;
  }

  #cart-resume div button:first-of-type{
    background-color: var(--azul-electrico);
    font-family: "Open Sans", sans-serif, system-ui;
    font-weight: 500;
  }
  #cart-resume div button:first-of-type:hover{
    box-shadow: 0 0 .5rem var(--azul-electrico);
  }

  #cart-resume div button:last-of-type{
    background-color: var(--rojo);
    font-family: "Open Sans", sans-serif, system-ui;
    font-weight: 500;
  }
  #cart-resume div button:last-of-type:hover{
    box-shadow: 0 0 .5rem var(--rojo);
  }

  .list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }
  
  .list-item:nth-child(even){
    border-top: 1px solid var(--azul-electrico);
    border-bottom: 1px solid var(--azul-electrico);
  }
  
  #items-list {
    padding: 0 1rem;
    margin: 1rem 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
  }
  
  img {
    border-radius: 0.5rem 0 0 0.5rem;
    width: 254px;
    height: 254px;
  }

}

/* Responsive -------------> 1024px */
@media screen and (max-width: 1024px){

  h1, h2{
    margin: 1rem 0;
  }
  
  #cart-section{
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  #cart-article {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    border: 1px solid var(--blanco);
    border-radius: 0.5rem;
    margin: 1rem 4rem;
  }

  
  #cart-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 1rem;
    gap: 1rem;
  }

  #card-title {
    width: 100%;
    margin: 1rem 0;
    border-bottom: 1px solid var(--blanco);
  }

  .cart-item {
    margin: 1rem;
    width: 100%;
    /* height: 380px; */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    border: 1px solid var(--blanco);
    border-radius: 0.5rem;
  }

  .item-description{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
  }

  .item-details{
    padding: 1rem 0;
  }
  
  .item-details h3 {
    color: var(--blanco);
    padding: 1rem;
  }

  .item-details ul{
    padding: 0 1rem;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
  }

  .item-details_commercial{
    padding: 1rem 0;
    border-top: 1px solid var(--blanco);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }

  .item-details_commercial div:first-of-type{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 1rem;
  }

  .item-details_commercial div:first-of-type div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  } 

  .item-details_commercial div:first-of-type p{
    background-color: var(--blanco);
    padding: 1rem;
    border-radius: .5rem;
    color: var(--negro);
  }

  .item-buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;
    margin: 1rem 0;
  }

  .item-buttons button{
    border: 1px solid transparent;
    border-radius: .5rem;
    padding: 1rem;
    font-size: 1rem;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow .5s;
  }

  .delete-button {
    padding: 0.7rem;
    border: 1px solid transparent;
    background-color: var(--rojo);
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  
  .increment-button {
    padding: 0.7rem;
    border: 1px solid transparent;
    background-color: var(--azul-electrico);
    border-radius: 0.5rem;
    margin: 1rem 0;
  }
  
  .decrement-button {
    padding: 0.7rem;
    border: 1px solid transparent;
    background-color: var(--rosa-intenso);
    border-radius: 0.5rem;
    margin: 1rem 0;
  }

  .delete-button, .decrement-button, .increment-button{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow .5s;
  }

  .delete-button:hover{
    box-shadow: 0 0 .5rem var(--rojo);
  }
  .decrement-button:hover{
    box-shadow: 0 0 .5rem var(--rosa-intenso);
  }
  .increment-button:hover{
    box-shadow: 0 0 .5rem var(--azul-electrico);
  }


  /* #cart-resume container */
  #cart-section article:last-of-type{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 4rem;
  }
  
  #cart-resume {
    border: 1px solid var(--blanco);
    border-radius: 0.5rem;
    padding: 1rem;
    width: 100%;
    /* margin: 1rem; */
    /* width: 320px; */
  }
  
  #cart-resume div ul{
    margin: 0 1rem;
    padding: 1rem 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #cart-resume div:first-of-type {
    width: 100%;
    border-bottom: 1px solid var(--blanco);
  }

  #cart-resume div:nth-of-type(2){
    width: 100%;
    border-top: 1px solid var(--blanco);
  }

  #cart-resume div:last-of-type{
    border-top: 1px solid var(--blanco);
    width: 100%;
    padding: 1rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }

  #cart-resume div button{
    cursor: pointer;
    font-size: 1rem;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow .5s;
    font-family: "Open Sans", sans-serif, system-ui;
    font-weight: 500;
  }

  #cart-resume div button:first-of-type{
    background-color: var(--azul-electrico);
  }
  #cart-resume div button:first-of-type:hover{
    box-shadow: 0 0 .5rem var(--azul-electrico);
  }

  #cart-resume div button:last-of-type{
    background-color: var(--rojo);
  }
  #cart-resume div button:last-of-type:hover{
    box-shadow: 0 0 .5rem var(--rojo);
  }

  .list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }
  
  .list-item:nth-child(even){
    border-top: 1px solid var(--azul-electrico);
    border-bottom: 1px solid var(--azul-electrico);
  }
  
  #items-list {
    padding: 0 1rem;
    margin: 1rem 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
  }

  img {
    border-radius: .5rem 0 0 0;
    width: 320px;
    height: 320px;
  }


  
}

/* Responsive -------------> 768px */
@media screen and (max-width: 768px){

  h1, h2{
    margin: 1rem;
  }
  
  .cart-item{
    margin: 1rem 2rem;
  }
  
  .item-description{
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  img{
    width: 100%;
    height: 420px;
    border-radius: .5rem;
  }
}



/* Responsive -------------> 576px */
@media screen and (max-width: 576px){
  #cart-article{
    margin: 1rem 2rem;
  }

  #cart-list{
    margin: 1rem;
  }

  .item-details h3{
    margin: .5rem 0;
  }

  .item-details_commercial{
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  .item-details_commercial div:first-of-type div h4, .item-details_commercial div:first-of-type div p{
    margin: 1rem 0;
  } 

  img{
    width: 100%;
    height: 320px;
    border-radius: .5rem;
  }

}


/* Responsive -------------> 480px */
@media screen and (max-width: 480px){

  h1, h2{
    margin: 1rem;
  }

  #cart-article{
    margin: 0 1rem;
  }

  #cart-list{
    margin: 0 1rem;
  }

  .item-buttons{
    margin: .5rem 0;
  }

  .item-buttons button{
    padding: .7rem;
  }
  
  #cart-resume div:last-of-type{
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 1rem;
  }

  img{
    width: 100%;
    height: 240px;
    border-radius: .5rem;
  }

}