.elementor-kit-112094{--e-global-color-primary:#FFB624;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#0049DB;--e-global-color-a9c2f82:#FFFFFF;--e-global-color-f87e589:#FFB624;--e-global-color-e22f6c5:#6EC1E4;--e-global-color-55948de:#000000;--e-global-color-d45b153:#03242E;--e-global-color-c0052e3:#FFB624;--e-global-color-19a1fea:#9E5E00;--e-global-color-7c472f8:#B3531A;--e-global-color-989dbe9:#8A5200;--e-global-color-19ccb91:#C97F00;--e-global-color-ef24a6e:#7A7A7A38;--e-global-typography-primary-font-family:"Roboto Condensed";--e-global-typography-primary-font-size:18px;--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Roboto Condensed";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Roboto Condensed";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto Condensed";--e-global-typography-accent-font-weight:500;font-family:"Roboto Condensed", Sans-serif;}.elementor-kit-112094 e-page-transition{background-color:#FFBC7D;}.elementor-kit-112094 a{color:var( --e-global-color-55948de );font-family:"Roboto Condensed", Sans-serif;text-decoration:underline;}.elementor-kit-112094 a:hover{color:var( --e-global-color-primary );}.elementor-kit-112094 h1{font-family:"Roboto Condensed", Sans-serif;font-weight:900;}.elementor-kit-112094 h2{font-family:"Roboto Condensed", Sans-serif;font-weight:700;}.elementor-kit-112094 h3{font-family:"Roboto Condensed", Sans-serif;}.elementor-kit-112094 h4{font-family:"Roboto Condensed", Sans-serif;}.elementor-kit-112094 h5{font-family:"Roboto Condensed", Sans-serif;}.elementor-kit-112094 h6{font-family:"Roboto Condensed", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Aseguramos que el contenedor de la imagen principal está posicionado */
.woocommerce ul.products li.product > a {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Imagen secundaria posicionada encima de la principal, pero debajo de título/precio */
.product-secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Aseguramos que título, precio y otros están por encima */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
    position: relative;
    z-index: 2;
}

/* Mostrar imagen secundaria solo al hacer hover sobre el enlace */
.woocommerce ul.products li.product > a:hover .product-secondary-image {
    opacity: 1;
}



/* Estilos base (ocultos antes de hacer scroll) */
.waypoint,
.waypoint2 {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

/* Animación al entrar en viewport */
.waypoint.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Segunda animación diferente */
.waypoint2.animate {
  opacity: 1;
  transform: translateX(0); /* por ejemplo, slide desde la izquierda */
}

/* Estilo inicial diferente para .waypoint2 (desde la izquierda) */
.waypoint2 {
  transform: translateX(-30px);
}


/*oculta missatge*/
.archive .woocommerce-message {
  display: none !important;
}



/* Fondo y estilo general del bloque de comparación */
.woocommerce-products-compare-compare-button {
    background-color: #f3f4f6;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: "Barlow Condensed", "Roboto Condensed", sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
    text-transform: uppercase;
}

/* Checkbox + texto "Compare" */
.woocommerce-products-compare-compare-button label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* Estilo visual del checkbox */
.woocommerce-products-compare-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #CF2027;
}

/* Enlace con icono de Font Awesome */
.woocommerce-products-compare-compare-link {
    background-color: transparent;
    color: #CF2027;
    padding: 0;
    border: none;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

/* Reemplaza dashicon con ícono Font Awesome */
.woocommerce-products-compare-compare-link .dashicons::before {
    content: "";
}

.woocommerce-products-compare-compare-link::before {
    content: "\f061"; /* Unicode flecha fa-arrow-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
}

/* Hover más oscuro */
.woocommerce-products-compare-compare-link:hover {
    color: #000000;
}

.mi-flecha::before {
    content: "\f061"; /* Código de la flecha */
    font-family: "Font Awesome 6 Free"; /* Fuente Font Awesome */
    font-weight: 900; /* Peso para el estilo sólido */
    font-size: 18px;
    color: #8A5200;
    margin-left: 6px;
}

/* crea cercle */
.circle-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: #f82232; /* Color de fondo */
  color: #fff; /* Color del número */
  font-weight: bold;
  border-radius: 50%; /* Hace el círculo */
  font-size: 30px;
}

/* Evita que el carrusel provoque scroll horizontal en todo el documento */
html, body {
  overflow-x: hidden;
}

/* Asegurar que el contenedor del carrusel no se desborde */
.elementor-loop-carousel__swiper {
  overflow: hidden !important;
  padding: 0 40px;
}

/* ==============================
   Estilos globales para precios WooCommerce
   ============================== */

/* Precio original (tachado) en gris */
.woocommerce del .woocommerce-Price-amount.amount {
    color: #999; /* gris */
}

/* Precio rebajado (final) en rojo y negrita */
.woocommerce ins .woocommerce-Price-amount.amount {
    color: #03242E; /* blue */
    font-weight: bold;
    text-decoration: none !important; /* quitar subrayado */
}

/* Espaciado entre precio original y rebajado */
.woocommerce del {
    margin-right: 6px;
}



/* ===== Estilo base ===== */
.loop-sale-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #F82232 !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    min-width: 80px !important;
    min-height: 28px !important;
    border-radius: 0 !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    margin: 0 !important;
    z-index: 10 !important;
    font-family: "Barlow Condensed", sans-serif !important; 
}

/* ===== Desktop ===== */
@media (min-width: 1025px) {
    .loop-sale-badge {
        font-size: 14px !important;
        padding: 6px 12px !important;
        top: 10px !important;
        right: 10px !important;
    }
}

/* ===== Tablet ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .loop-sale-badge {
        font-size: 13px !important;
        padding: 5px 10px !important;
        top: 8px !important;
        right: 8px !important;
    }
}

/* ===== Móvil ===== */
@media (max-width: 767px) {
    .loop-sale-badge {
        font-size: 11px !important;
        min-width: 65px !important;
        min-height: 24px !important;
        padding: 4px 8px !important;
        top: 6px !important;
        right: 6px !important;
    }
}/* End custom CSS */