/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
#banner-892365834 {
  padding-top: 1000px;
}
.shop-container header.woocommerce-products-header, div.woocommerce-message{
  display: none !important;
}
/* Estilo para el área verde */
#masthead.header-main::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important; /* Comienza desde el borde izquierdo */
    width: 50% !important; /* Ancho del área verde */
    height: 100% !important;
    background-color: #b3e65c !important; /* Color verde */
    z-index: -1 !important;
    border-bottom-right-radius: 300px !important; /* Curvatura en el borde inferior derecho */
}
/* PRODUCT PAGE */
.tab{
  width: 50%;
  margin: 0 !important;
  margin-bottom: -1px !important;
}
.tab a{
  width: 100%;
  display: block;
  text-align: center !important;
  font-size: 90%;
  padding: 7px 0;
}
/* SHOP PAGE */
/* Estilo del formulario */
form.cart {
  display: flex;
  flex-direction: column; /* Alinea los elementos en columna */
  gap: 10px; /* Espacio entre el selector de cantidad y el botón */
  width: 100%; /* Asegura que el formulario ocupe todo el ancho */
}

/* Selector de cantidad */
form.cart .ux-quantity {
  display: flex;
  justify-content: space-between; /* Espacio uniforme entre los elementos */
  width: 100%; /* Ocupa el 100% del ancho */
}

form.cart .ux-quantity .ux-quantity__button {
  flex: 0 0 23%; /* Los botones "+" y "-" ocupan un 15% del ancho */
  height: 40px; /* Altura fija */
  font-size: 18px; /* Tamaño del símbolo */
  border: 1px solid #ddd; /* Borde del botón */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Indicador de clic */
  text-align: center; /* Centra el contenido */
  line-height: 38px; /* Centra el texto verticalmente */
}

form.cart .ux-quantity .ux-quantity__button:hover {
  background-color: #f0f0f0; /* Cambia ligeramente el fondo al pasar el cursor */
}

.custom-product-page .row .col .col-inner .add-to-cart-container form.cart .ux-quantity input[type="number"]{
  max-width: 17.5em !important;
}
form.cart .ux-quantity input[type="number"]{
  flex: 1; /* Hace que el campo ocupe el espacio restante */
  width: auto; /* Ajusta automáticamente el ancho */
  text-align: center; /* Centra el texto dentro del campo */
  padding: 5px; /* Espaciado interno */
  font-size: 16px; /* Ajusta el tamaño de la fuente */
  border: 1px solid #ddd; /* Borde del campo */
  border-radius: 5px; /* Bordes redondeados */
  box-sizing: border-box; /* Incluye padding y borde en el ancho total */
}

/* Botón Añadir al carrito */
form.cart button.add_to_cart_button {
  display: block;
  width: 100%; /* Ocupa el 100% del ancho */
  text-align: center; /* Centra el texto */
  font-size: 14px; /* Ajusta el tamaño del texto */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Indicador de clic */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}

form.cart button.add_to_cart_button:hover {
  filter: brightness(0.9); /* Oscurece ligeramente al pasar el cursor */
}
.quantity input[type=number]{
  max-width: 6.5em;
  height: auto;
}
.mantenimiento{
background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 99% 100%, hsla(81,43%,81%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(80,42%,84%,1) 0px, transparent 50%);
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

/* Estilo para el área verde */
#masthead.header-main::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important; /* Comienza desde el borde izquierdo */
  width: 48% !important; /* Ancho del área verde */
  height: 100% !important;
  background-color: #b3e65c !important; /* Color verde */
  z-index: -1 !important;
  border-bottom-right-radius: 300px !important; /* Curvatura en el borde inferior derecho */
}
}