/* ======================================
   Potasa Caustica – Search Bar Styling
   PrestaShop 8.1.5
   ====================================== */
<div class="header-top-free-shipping">
  🚚 <strong>Envío GRATIS</strong> en compras mayores a $1,100.00 MXN
</div>
.header-top-free-shipping {
  background-color: #1f6f78;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 6px 10px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .header-top-free-shipping {
    font-size: 13px;
    padding: 8px 10px;
  }
}
.header-top-free-shipping{
  background:#1f6f78;
  color:#fff;
  text-align:center;
  font-size:14px;
  padding:6px 10px;
  font-weight:500;
}

@media (max-width:768px){
  .header-top-free-shipping{
    font-size:13px;
    padding:8px 10px;
  }
}
.header-top-free-shipping{
  background:#1f6f78;
  color:#fff;
  text-align:center;
  font-size:13px;
  padding:4px 10px;     /* antes 6-8 */
  font-weight:600;
  letter-spacing:.2px;
}
.header-top-free-shipping{
  background:#1f6f78;
}
.header-top-free-shipping strong{
  background:rgba(255,255,255,.15);
  padding:2px 8px;
  border-radius:999px;
}
/* Topbar: que no se parta raro */
.topbar-custom{
  white-space: nowrap;
}

.topbar-custom span,
.topbar-custom a{
  white-space: nowrap;
}

/* Si en pantallas pequeñas no cabe, permitimos wrap ordenado */
@media (max-width: 768px){
  .topbar-custom{
    white-space: normal;
    display: flex;
    gap: 8px;
  }
}
/* Banner promo (la barra verde) */
.envio-gratis-bar{
  padding: 6px 10px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
/* 1) Fuerza una sola línea en el texto del contacto */
#_desktop_contact_link,
#_desktop_contact_link #desktop_contact_link,
#_desktop_contact_link #contact-link,
#_desktop_contact_link #contact-link a {
  white-space: nowrap !important;
}

/* 2) Evita que el contenedor se quede "chico" y obligue a partir */
#_desktop_contact_link {
  width: auto !important;
  max-width: none !important;
}

/* 3) Si el tema tiene float/width raro, lo alineamos */
#_desktop_contact_link #desktop_contact_link {
  display: flex !important;
  align-items: center !important;
}

/* 4) En pantallas pequeñas sí permitimos que se acomode (no se sale) */
@media (max-width: 768px) {
  #_desktop_contact_link #desktop_contact_link,
  #_desktop_contact_link #contact-link {
    white-space: normal !important;
  }
}
/* ===== Limitar tamaño del zoom en desktop ===== */
@media (min-width: 992px){

  /* EasyZoom (muy común en PrestaShop) */
  .easyzoom-flyout,
  .easyzoom--overlay{
    max-width: 75vw !important;   /* antes 100% -> baja a 75% del ancho visible */
    max-height: 75vh !important;  /* antes 100% -> baja a 75% de la altura visible */
    overflow: hidden !important;
  }

  /* ElevateZoom (algunos temas) */
  .zoomWindowContainer .zoomWindow{
    max-width: 75vw !important;
    max-height: 75vh !important;
  }

  /* Lightbox/Modal (si el tema usa fancybox u otro) */
  .fancybox-stage img,
  .modal-dialog img{
    max-width: 90vw !important;
    max-height: 90vh !important;
    object-fit: contain !important;
  }
}
@media (min-width: 992px){
  .easyzoom{
    display: inline-block;
    position: relative;
  }
}
/* Fuerza a que el bloque se vaya debajo del botón */
.product-add-to-cart .cta-trust,
.product-add-to-cart .hero-percarb__note,
.product-add-to-cart .trust-below-cart {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  margin-top: 10px;
}

/* Por si el contenedor del botón está en flex */
.product-add-to-cart .product-quantity,
.product-add-to-cart .add,
.product-add-to-cart .product-actions {
  flex-wrap: wrap;
}
/* 1) El contenedor del botón debe permitir salto de línea */
.product-add-to-cart .product-quantity{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 2) Tu "Compra segura" abajo, 100% ancho y centrado */
.product-add-to-cart .cta-trust{
  flex: 0 0 100%;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

/* 3) Asegura que el corazón se quede arriba en su línea normal */
.product-add-to-cart .wishlist-button-product,
.product-add-to-cart .add-to-cart,
.product-add-to-cart .add{
  flex: 0 0 auto;
}
/* CONTENEDOR: permite 2 filas */
.product-add-to-cart .product-quantity{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Fila 1: cantidad + botón (se quedan arriba) */
.product-add-to-cart .product-quantity #quantity_wanted,
.product-add-to-cart .product-quantity .input-group,
.product-add-to-cart .product-quantity .add,
.product-add-to-cart .product-quantity .add-to-cart{
  flex: 0 0 auto;
}

/* Fila 2: corazón y “Compra segura” */
.product-add-to-cart .product-quantity .wishlist-button-product,
.product-add-to-cart .product-quantity .wishlist,
.product-add-to-cart .product-quantity #wishlist_button{
  order: 3;
}

.product-add-to-cart .product-quantity .cta-trust,
.product-add-to-cart .product-quantity .compra-segura,
.product-add-to-cart .product-quantity .trust-badge{
  order: 4;
}

/* Si tu “Compra segura” no tiene clase, atacamos el texto común */
.product-add-to-cart .product-quantity *:is(p,span,div){
  /* no hace nada por sí solo; sirve para no romper nada */
}

/* Estilo de la fila 2: corazón + texto alineados */
.product-add-to-cart .product-quantity .wishlist-button-product,
.product-add-to-cart .product-quantity .wishlist,
.product-add-to-cart .product-quantity #wishlist_button{
  margin-top: 8px;
}

.product-add-to-cart .product-quantity .cta-trust,
.product-add-to-cart .product-quantity .compra-segura · Pago protegido,
.product-add-to-cart .product-quantity .trust-badge{
  margin-top: 8px;
  margin-left: 6px;
}
/* Centrar solo el texto de compra segura en línea completa */
.product-add-to-cart .product-quantity .cta-trust,
.product-add-to-cart .product-quantity .compra-segura · Pago protegido,
.product-add-to-cart .product-quantity .trust-badge{
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  margin-left: 0;
}
#block-newsletter-label{
  font-weight: 600;
  line-height: 1.35;
}
#block-newsletter-label .newsletter-sub{
  display:block;
  font-weight: 400;
  font-size: .92em;
  opacity: .8;
  margin-top: 4px;
}
.home-trust{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
  padding:14px 0;
  font-size:.95em;
  opacity:.9;
}
.home-trust span{ white-space:nowrap; }
.footer-seo-note{
  margin-top: 12px;
  padding-bottom: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #9aa3ad;
  text-align: center;
}
/* BOTÓN PRINCIPAL (CTA) */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
input.btn-primary {
  background: #1F8FBF
 !important;
  border-color: #1F8FBF
 !important;
  color: #fff !important;
}

/* HOVER */
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover {
  filter: brightness(0.92) !important;
}

/* FOCUS (accesibilidad) */
.btn-primary:focus,
.btn.btn-primary:focus,
button.btn-primary:focus,
input.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(36, 185, 215, 0.35) !important;
}
a { color: #1F8FBF
; }
a:hover { filter: brightness(0.85); }

.mercadopago-logo {
  width: 64px;
  height: auto;
  margin-right: 10px;
}

@media (max-width: 768px) {
  .mercadopago-logo {
    width: 48px;
  }
}
.mercadopago-badge {
  display: flex;
  align-items: center;
  margin-top: 12px;
  gap: 10px;
}