/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css  fpp-result
 */

/* overlay PFI correcto (SALIAN ICONOS DE CARACTERISTICAS EN UNA LISTA DEBAJO de la miniatura, NO SUPERPUESTOS) */
.product-miniature,
.js-product-miniature,
.thumbnail-container,
.product-thumbnail,
.product-image {position: relative !important;}

/* ✅ PFI overlay sin comerse el header */
ul.pfi-product-miniature-features-images {
  position: absolute !important;
  z-index: 10 !important;  /* 🔥 antes 999 */

  top: var(--pfi-miniature-position-top, 20px) !important;
  left: var(--pfi-miniature-position-left, 0%) !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: flex !important;
  flex-direction: column !important;
  gap: var(--pfi-miniature-image-gap, 8px) !important;
}


/* iconos de caracteristicas que no salgan en miniaturas en tablet/móvil */
@media (max-width: 767px) { ul.pfi-product-miniature-features-images { display: none !important; }}


/* Centrar el botón de envío del Contact Form Ultimate (para que salga centrado en la pagina de login "hazte distribuidor" */
#open_form_by_button_wpcfu-f23-o1{float: none !important; position: static !important; display: table !important;width: fit-content !important; margin: 12px auto !important;}

/* Permitir salto de línea y partir el texto en 2 líneas */
#open_form_by_button_wpcfu-f23-o1{
  white-space: normal !important;   /* permite saltos */
  max-width: 280px;                 /* ajusta hasta que queden 2 líneas */
  text-align: center !important;
  line-height: 1.2;
}



/* Fondos europeos en copyright: 60% en PC, 90% en tablet/móvil */
#footer img[src*="fondos-europeos-safetop.jpg"]{display:block;width:60%;height:auto;margin:0 auto;}
@media (max-width: 992px){#footer img[src*="fondos-europeos-safetop.jpg"]{width:90% !important;}}


/* Carrito: CAMBIAR SOLO el color del precio de la columna derecha (tu 163,63 €) (salia en rojo) a negro */
body#cart .cart-item .product-line-actions .price > span.product-price {
  color: #000 !important;
}

/* CMS (Aviso legal, Privacidad, etc.) - dar margen interno a los textos */
#cms .page-content,
.page-cms .page-content,
#content-wrapper .page-content {padding-left: 18px;padding-right: 18px;}

/* En escritorio, un poco más de margen */
@media (min-width: 992px) {#cms .page-content, .page-cms .page-content, #content-wrapper .page-content {padding-left: 28px;padding-right: 28px;}}


/* CMS: títulos de las paginas por ejm "Contacto" SALIAN PEGADOS A LA IZQUIERDA sin margen, añado margen/padding a la izquierda */
body#cms #main h1,
body#cms .page-heading,
body#cms .cms-page-title {padding-left: 10px !important;}


/* Separación del footer en móvil */
@media (max-width: 768px) {
  footer#footer,
  #footer {
    margin-top: 18px !important;   /* separa del bloque anterior */
    padding-top: 10px !important;  /* aire dentro del footer */
  }
}



/* Iconos de features con tamaño ajustado dentro del bloque específico boncategoryproduct de CreativeElements en la pagina INICIO (sino salian enormes) */
.feat-icons-boncat .boncategoruproduct img {
  min-width: 40px !important;
}
 


 /* Cuadro completo del newsletter (email + botón + check RGPD) con bordes redondeados */
#footer .footer-style-3 .block-newsletter .ps-emailsubscription-block {
  border: 1px solid #e8e8e8;   /* borde fino gris claro */
  border-radius: 8px;          /* redondeo de las esquinas */
  padding: 8px 10px;           /* un poco de aire interior */
  background-color: #a6a2a2;   /* fondo gris fuera del cuadrado */
  color: #ffffff;
}

#footer-container-first {color: #e83737;}

/* Newsletter footer estilo 3: input + botón bajitos, una sola línea */
#footer .footer-style-3 .block-newsletter .ps-emailsubscription-block input.form-control {
  height: 26px;          /* ajusta 36–42px a tu gusto */
  line-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}

#footer .footer-style-3 .block-newsletter .ps-emailsubscription-block .btn,
#footer .footer-style-3 .block-newsletter .ps-emailsubscription-block button[type="submit"] {
  height: 20px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Botón newsletter en footer: naranja SAFETOP */
#footer .footer-style-3 .block-newsletter .ps-emailsubscription-block button[name="submitNewsletter"] {
  background-color: #ff6600;   /* naranja */
  border-color:    #ff6600;
  color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover: gris */
#footer .footer-style-3 .block-newsletter .ps-emailsubscription-block button[name="submitNewsletter"]:hover {
  background-color: #666666;
  border-color:    #666666;
  color: #ffffff;
}

/* Borde para el cuadro del email en el newsletter del footer */
#footer .footer-style-3 .block-newsletter .ps-emailsubscription-block .input-subscription {
  border: 1px solid #d0d0d0;  /* ajusta el color si quieres más oscuro/claro */
  background-color: #ffffff;   /* por si el fondo del footer es blanco roto */
  box-shadow: none;            /* por si el tema añade sombras raras */
}




/* Ocultar el rectángulo vacío debajo del newsletter */
#footer .footer-style-3 .block-newsletter .min-text-check {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* Separacion entre el modulo del newsletter y el modulo de abajo del todo (footer) */
#footer-container-main, #checkout-footer {
  padding-top: 0.7rem;
}



/* PUESTO POR PABLO 1-12-2025 CAMBIAR COLOR DEL PRECIO EN FICHA DE PRODUCTO  */

/* Estilo del precio en la ficha de producto */
body#product .product_header_container .product-price,
body#product .product_p_price_container .product-price {
    color: #333333 !important;              /* gris oscuro */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}




/* PUESTO POR PABLO 20-11-2025 PARA BOTON DE COPIAR LA REFERENCIA DE PRODUCTO. crece en hover*/

/* Botón copiar referencia */
.copy-ref-btn {
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Icono redondo con fondo blanco */
.copy-ref-icon {
  background: #ffffff;
  border-radius: 999px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Imagen dentro del icono */
/* Blindar el tamaño del SVG para que no lo toque el CSS del tema */
.copy-ref-icon img {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  display: block;
}



/* Texto "copia" */
.copy-ref-label {
  font-size: 12px;
  text-transform: uppercase;
}

/* Efecto zoom al pasar el ratón */
.copy-ref-btn .copy-ref-icon {
  transition: transform 0.15s ease;
}

.copy-ref-btn:hover .copy-ref-icon {
  transform: scale(1.2);
}


/* Texto "OK!" (feedback) */

.copy-ref-feedback {
  display: none;

margin-top:4px;
padding:4px;
background:#e8f5e8;
color: #15803d;
border-left:3px solid #4CAF50;
border-radius:3px;
font-weight: 500;

  margin-left: 6px;
  font-size: 0.9em;
  
}