/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Version:      1.0
*/
.menu-activo {
  position: relative;
  color: #131c35;
}

.menu-activo::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: red;
  border-radius: 2px;
}

.discount-flag {
    position: absolute;
top: -15px; 
right: -20px;
    width: 50px;
    height: 60px;
    background-color: #3F5FE0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	border-top-right-radius: 37px; /* Añade esta línea. Ajusta el valor según sea necesario */
}
.discount-flag i {
    color: white;
    font-size: 20px;
}

.discount-flag.with-text {
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 5px;
}

/* CSS para el Discount Flag (contexto 'card' - el que ya tenías) */
.discount-flag {
    position: absolute;
    top: -15px;
    right: -20px;
    width: 50px;
    height: 60px;
    background-color: #3F5FE0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-top-right-radius: 37px;
}
.discount-flag i {
    color: white;
    font-size: 20px;
}

/* CSS para el Discount Ribbon (contexto 'product' - usando imagen) */
.discount-ribbon-image-wrapper {
    position: absolute; /* MUY IMPORTANTE: Asegúrate de que el contenedor padre tenga position: relative; */
    top: 15px;   /* Ajusta la posición vertical de la imagen */
    right: 0px; /* Ajusta la posición horizontal de la imagen */
    width: 33px; /* Ancho exacto solicitado */
    height: 37.5px; /* Alto exacto solicitado */
    z-index: 10; /* Asegura que esté por encima de otros elementos */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga de estas dimensiones si la imagen es más grande */
    
    /* ¡IMPORTANTE! Elimina cualquier sombra o borde si los tenías antes en este wrapper */
    box-shadow: none; /* Asegura que no haya sombras */
    border: none;     /* Asegura que no haya bordes */
    background-color: transparent; /* Asegura que no haya fondo */
}

.discount-ribbon-image {
    display: block; /* Elimina espacio extra debajo de la imagen */
    width: 100%; /* La imagen llenará el 100% del ancho de su wrapper (33px) */
    height: 100%; /* La imagen llenará el 100% del alto de su wrapper (37.5px) */
    object-fit: contain; /* Ajusta la imagen dentro de las dimensiones sin recortarla, manteniendo su proporción. */
                         /* Si quieres que rellene todo el espacio y se recorte si es necesario, usa 'cover'. */
                         /* Si quieres que se estire para rellenar, usa 'fill' (no recomendado si la proporción importa). */
}

.elementor-widget-taxonomy-filter .e-filter {
    --e-filter-space-between: 6px;
}

/* permite dar separación a checkbox de filtros */
.wpfFilterContent .wpfCheckboxHier ul.wpfFilterVerScroll li {
    margin-bottom: 8px !important; /* Puedes ajustar este valor (ej: 5px, 10px, 15px) para más o menos espacio */
}


/* Solo forms de variaciones */
.woocommerce div.product form.variations_form.cart {
  margin-bottom: 0 !important;
}