/* ===========================================================
   Adiestradogs · CSS personalizado del tema PRS028
   Se carga el último (prioridad 1000) desde FrontController.
   =========================================================== */

/* --- Amazzing Filter: vista compacta en móvil -------------------
   El módulo inyecta @media(max-width:767px){#amazzing_filter{position:fixed;opacity:0}}
   pero el tema gana en especificidad y deja el bloque en position:relative.
   Resultado: el filtro quedaba con opacity:0 (invisible) y el modo
   compacto (botón "Filtrar" + panel lateral) nunca se activaba, porque
   front.js decide con  af.isCompact = $filterBlock.css('position')=='fixed'.
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    #amazzing_filter {
        position: fixed !important;
    }
}

/* --- Iconos de ventajas (home y footer): 2 en 2 en móvil -----------------
   Las cuatro cajas están en columnas .elementor-col-25. Elementor solo baja
   a 50% entre 768 y 1024 px; por debajo de 768 pasan a 100% y salían una
   debajo de otra. Las dejamos a 50% también en móvil (rejilla 2x2) y con
   la misma altura para que queden cuadradas.
     · home   → sección 30ee7d4
     · footer → sección 2ace012
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
    .elementor-element-30ee7d4 > .elementor-container > .elementor-row > .elementor-column,
    .elementor-element-2ace012 > .elementor-container > .elementor-row > .elementor-column {
        width: 50%;
    }
    .elementor-element-30ee7d4 > .elementor-container > .elementor-row,
    .elementor-element-2ace012 > .elementor-container > .elementor-row {
        flex-wrap: wrap;
        align-items: stretch;
    }
    .elementor-element-30ee7d4 .elementor-icon-box-wrapper,
    .elementor-element-2ace012 .elementor-icon-box-wrapper {
        text-align: center;
        padding: 0 6px;
    }
}

/* --- Landings de servicios -------------------------------------------
   Se identifican por la clase `landing-adiestradogs` que lleva la primera
   sección de Elementor (así no dependemos del id_cms, que cambia de una
   instalación a otra). Cada landing trae su propio hero con H1, de modo que
   ocultamos el título que imprime el tema encima y quitamos el contenedor
   para que el hero llegue de lado a lado.
   -------------------------------------------------------------------- */
body.page-cms:has(.landing-adiestradogs) .breadcrumb h1.page-heading,
body.page-cms:has(.landing-adiestradogs) .page-header {
    display: none;
}

body.page-cms:has(.landing-adiestradogs) #content.page-content {
    padding: 0;
    margin: 0;
    overflow: visible;
}

body.page-cms:has(.landing-adiestradogs) #wrapper > .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* que las secciones internas sigan respirando como el resto de la web */
body.page-cms:has(.landing-adiestradogs) .elementor-section .elementor-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Miniaturas: quitar los iconos flotantes -------------------------
   Solo ocultar la compra original si existe el botón sustituto real.
   Los productos simples y los botones nativos interceptados se conservan.
   Con rkrquickcombinations algunos productos tienen su botón «Añadir al
   carrito» debajo (y abre el panel de opciones si tiene combinaciones),
   así que los tres iconos que salían sobre la foto —carrito/seleccionar
   opción, vista rápida y lista de deseos— sobraban y ensuciaban la tarjeta.
   Para recuperar alguno, basta con borrar su línea.
   ------------------------------------------------------------------ */
.js-product-miniature:has(.rkrqc-open) .button-container .product-add-to-cart,
.js-product-miniature .button-container .quick-view-wrapper,
.js-product-miniature .button-container .wishlist {
    display: none;
}

/* --- Botón del módulo de combinaciones ------------------------------
   El tema capitaliza cada palabra («Añadir Al Carrito»). Lo dejamos en
   mayúscula solo la primera, como el resto de textos de la web.
   ------------------------------------------------------------------ */
.rkrqc-open,
.rkrqc-panel .rkrqc-add,
.rkrqc-panel button {
    text-transform: none !important;
}

/* --- Combinaciones: estado «añadiendo» ------------------------------
   Solo CSS: el JS se limita a poner la clase. Si se tocara el HTML del
   botón, PrestaShop perdería el clic delegado y el formulario acabaría
   enviándose de verdad (llevándote a /carrito en vez de abrir el aviso).
   -------------------------------------------------------------------- */
.rkrqc-form [data-button-action="add-to-cart"].rkrqc-busy {
    pointer-events: none;
    opacity: .75;
    position: relative;
}
/* el texto original se oculta y se sustituye visualmente, sin tocar el DOM */
.rkrqc-form [data-button-action="add-to-cart"].rkrqc-busy > * {
    visibility: hidden;
}
.rkrqc-form [data-button-action="add-to-cart"].rkrqc-busy::before {
    content: "Añadiendo…";
    position: absolute;
    left: 0;
    right: 22px;
    text-align: center;
}
.rkrqc-form [data-button-action="add-to-cart"].rkrqc-busy::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rkrqc-giro .7s linear infinite;
}
@keyframes rkrqc-giro { to { transform: rotate(360deg); } }

/* --- Botón de compra en la miniatura --------------------------------
   Integrado el 23/10/2026 desde diseno-local/hover.css tras la revisión
   del titular. Botón verde corporativo con el mismo acabado que el del
   panel de combinaciones (radio 8 px, peso 600), que se despliega al
   pasar el ratón y queda fijo en táctil.

   Tres peculiaridades del tema PRS028 que hay que neutralizar:
   · font-size:0 en los botones de la miniatura — el rótulo existía en el
     HTML pero no se veía, y solo quedaba el icono: de ahí el circulito.
   · max-height:0 + opacity:0 en .product-add-to-cart.
   · el icono del ::before va en position:absolute centrado, así que con
     un botón ancho caía ENCIMA del texto.
   -------------------------------------------------------------------- */
.js-product-miniature.ad-hover-buy .thumbnail-inner {
  position: relative;
  overflow: hidden;
}

/* la barra ocupa el pie de la foto, de borde a borde */
.js-product-miniature.ad-hover-buy .button-container {
  position: absolute !important;
  display: block !important;
  left: 10px !important;
  right: 10px !important;
  top: auto !important;
  bottom: 10px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 12;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(calc(100% + 14px));
  transition: transform .22s ease, opacity .22s ease;
}

.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart form,
.js-product-miniature.ad-hover-buy .button-container .product-quantity {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* el tema repliega este bloque con max-height:0 + opacity:0 y lo despliega
   al hover; aquí sobra, porque quien se mueve es la barra entera */
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart {
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* el botón, igual para simples y para combinaciones */
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .rkrqc-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100% !important;
  max-width: none !important;
  min-height: 46px;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #155832 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15, 45, 28, .18) !important;
  cursor: pointer;
}

/* El icono del tema vive en el ::before y el tema lo centra con
   position:absolute; top:50%; left:50%. Con el botón redondo de 34 px eso
   quedaba bien, pero con un botón ancho el icono caía ENCIMA del texto.
   Aquí vuelve al flujo normal y se coloca como un elemento flex más,
   a la izquierda del rótulo y separado por el gap del botón. */
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* --- Producto agotado -----------------------------------------------
   El tema reutiliza el mismo botón con las clases .out-of-stock .disabled
   y solo le baja la opacidad, así que seguía verde y con pinta de comprar
   (y además aceptaba el clic). Aquí se ve claramente como no disponible. */
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn.out-of-stock,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn.disabled,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn:disabled {
  background: #e9ecea !important;
  color: #5d6b63 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  cursor: default !important;
}
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn.out-of-stock::before,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn.disabled::before {
  display: none !important;
}

.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .rkrqc-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn:hover,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn:focus-visible,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .rkrqc-open:hover,
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .rkrqc-open:focus-visible {
  background: #0f3f24 !important;
  color: #fff !important;
}

.js-product-miniature.ad-hover-buy .button-container .btn:focus-visible {
  outline: 2px solid #155832;
  outline-offset: 2px;
}

/* el botón original queda oculto cuando el módulo ha puesto su sustituto */
.js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn[data-ad-original-hidden] {
  display: none !important;
}

/* el tooltip del tema sobra: el rótulo ya está a la vista */
.js-product-miniature.ad-hover-buy .button-container .tip_inside::after,
.js-product-miniature.ad-hover-buy .button-container .tip_inside .tip {
  display: none !important;
}

/* ratón: la barra sube al pasar por encima de la tarjeta */
@media (hover: hover) and (pointer: fine) {
  .js-product-miniature.ad-hover-buy:hover .button-container,
  .js-product-miniature.ad-hover-buy:focus-within .button-container {
    transform: translateY(0);
  }
}

/* táctil: no hay hover, así que la barra se queda siempre visible */
@media (hover: none), (pointer: coarse) {
  .js-product-miniature.ad-hover-buy .button-container {
    transform: none !important;
    opacity: 1 !important;
  }
  .js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .btn,
  .js-product-miniature.ad-hover-buy .button-container .product-add-to-cart .rkrqc-open {
    min-height: 44px;
    font-size: 12px !important;
    padding: 10px 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-product-miniature.ad-hover-buy .button-container { transition: none; }
}

/* --- Barra flotante de compra (rkr_stickycart) -----------------------
   Instalada el 23/10/2026. El color del botón se fija en la configuración
   del módulo (verde corporativo), no aquí. Lo que sigue son dos ajustes
   que el módulo no contempla.
   -------------------------------------------------------------------- */

/* 1. El icono, el mismo de la cabecera. El módulo trae un SVG propio;
      la cabecera usa <i class="la la-shopping-cart">, que es la fuente
      Line Awesome. Se oculta el SVG y se pinta el mismo glifo (\f07a),
      así los dos carritos de la página son idénticos. */
#rkr-stickycart-bar .rkr-stickycart-btn .rkr-stickycart-icon {
    display: none !important;
}
#rkr-stickycart-bar .rkr-stickycart-btn::before {
    content: "\f07a";
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    margin-right: 8px;
    display: inline-block;
}

/* 2. El botón flotante de WhatsApp queda a 25 px del suelo y la barra
      ocupa de 24 a 90 px, así que se solapaban. Cuando la barra está
      visible, el botón sube por encima de ella; al ocultarse, vuelve a
      su sitio. Solo CSS: el módulo ya marca .is-visible. */
a.float.float-bottom-left {
    transition: bottom .4s cubic-bezier(.16, 1, .3, 1);
}
body:has(#rkr-stickycart-bar.is-visible) a.float.float-bottom-left {
    bottom: 102px;
}
/* En móvil la barra es más alta (90 px frente a 66), porque el nombre del
   producto y el precio se reparten en dos líneas: hay que subirlo más. */
@media (max-width: 767px) {
    body:has(#rkr-stickycart-bar.is-visible) a.float.float-bottom-left {
        bottom: 128px;
    }
}

/* --- Etiqueta «N opciones de talla» ----------------------------------
   Pastilla gris bajo el precio, al estilo de las grandes tiendas de
   mascotas. Solo aparece en los productos con combinaciones (212 de 690),
   así que se deja sin reservar hueco: no desplaza a los demás.
   -------------------------------------------------------------------- */
.js-product-miniature .ad-opciones {
    display: inline-block;
    margin: 8px 0 0;
    padding: 5px 12px;
    border-radius: 6px;
    background: #f2f4f3;
    color: #5d6b63;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}