/* =============================================================================
   HostNauta / WebNinja - hn-frontend.css
   CSS migrado desde functions.php (Hello Elementor child)
   ============================================================================= */

/* -------------------------------------------------------------
   1) Botones "Añadir al carrito" (icono Remix)
------------------------------------------------------------- */
.add_to_cart_button i.ri-shopping-cart-line,
.single_add_to_cart_button i.ri-shopping-cart-line{
  margin-right: 6px;
}

/* -------------------------------------------------------------
   2) Qty buttons (+ / -)
------------------------------------------------------------- */
.quantity{
  margin: 0;
}

.quantity-button-wrapper{
  display:inline-flex;
  align-items:center;
  border: 0px solid rgba(0,0,0,.10);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  height: 56px;
}


.cart input[type="number"] {
width: 72px !important;
}

.quantity-button-wrapper .button-qty{
  width: 42px;
  height: 42px;
  line-height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  color: #111;
  box-shadow: none;
}

.quantity-button-wrapper .button-qty:hover{
  background: rgba(0,0,0,.04);
}

/* El input de cantidad (Woo) queda en el medio */
.quantity-button-wrapper input.qty{
  width: 56px;
  height: 42px;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 600;
  background: transparent;
  box-shadow: none;
  -moz-appearance: textfield;
}

.quantity-button-wrapper input.qty::-webkit-outer-spin-button,
.quantity-button-wrapper input.qty::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* En algunos temas el input trae borde propio */
.quantity-button-wrapper input.qty:focus{
  outline: none;
}

/* Evita que el wrapper se “rompa” en móviles */
@media (max-width: 480px){
  .quantity-button-wrapper{ height: 56px; }
  .quantity-button-wrapper .button-qty{ width: 40px; height: 40px; line-height: 40px; }
  .quantity-button-wrapper input.qty{ height: 40px; }
}

/* -------------------------------------------------------------
   2b) Hover segunda imagen en la tienda (loop)
------------------------------------------------------------- */
/* -------------------------------------------------------------
   2) Shop thumbnail hover (2nd image)
-------------------------------------------------------------- */
/* Contenedor donde WooCommerce imprime la imagen principal */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Imagen principal: no se deforma */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Imagen secundaria (la que insertamos por PHP) */
.woocommerce ul.products li.product .webninja-hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
  pointer-events: none;
}

/* Mostrar la secundaria al hover */
.woocommerce ul.products li.product:hover .webninja-hover-img {
  opacity: 1;
}


/* -------------------------------------------------------------
   3) Filtro categorías (shortcode [filtro_categorias_woo])
------------------------------------------------------------- */
.webninja-categorias-wrapper{
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.categoria-padre{ display:flex; flex-direction:column; }
.categoria-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:transparent !important;
  border-radius:6px;
  padding:8px 12px;
  border:1px solid #f5f5f5 !important;
}
.categoria-nombre{
  text-decoration:none;
  color:#111 !important;
  font-weight:400 !important;
  flex-grow:1;
}
.toggle-subcategorias{
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
  color:#111 !important;
}
.toggle-subcategorias:hover,
.toggle-subcategorias:focus{
  background:transparent !important;
}
.icon-caret{
  width:10px;
  height:6px;
  transition:transform .3s ease;
  color:#111 !important;
}
.toggle-subcategorias.active .icon-caret{
  transform: rotate(180deg);
}
.subcategorias{
  display:none;
  flex-direction:column;
  margin-left:20px;
  margin-top:6px;
  gap:4px;
}

/* ✅ FIX duplicado en móvil: ocultar wrapper normal y mostrar solo dentro del menú */
@media (max-width:767px){
  .webninja-categorias-wrapper{ display:none !important; }
  #mobile-filter-menu .webninja-categorias-wrapper{ display:flex !important; }
}

/* -------------------------------------------------------------
   4) Drawer filtro móvil
------------------------------------------------------------- */
.hn-mobile-filter-button{
  background-color: transparent;
  color:#111;
  border:none;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  margin-bottom:16px;
  font-weight:300;
  font-family: inherit;
  padding:0 !important;
}
.hn-mobile-filter-button svg{ width:18px; height:18px; }

.hn-mobile-filter-menu{
  transform: translateX(-100%);
  transition: transform .3s ease;
  position: fixed;
  top:0;
  left:0;
  width:300px;
  height:100%;
  background:#fff;
  z-index:9999;
  box-shadow: 2px 0 5px rgba(0,0,0,.1);
  overflow-y:auto;
}
.hn-mobile-filter-menu.active{ transform: translateX(0%); }
.hn-mobile-filter-inner{ padding:20px; }
.hn-mobile-filter-close{
  width:100%;
  padding:12px;
  text-align:center;
  font-weight:700;
  border-top:1px solid #eee;
  cursor:pointer;
  background:#fff;
}
@media (min-width:768px){
  #mobile-filter-button, #mobile-filter-menu{ display:none !important; }
}

/* -------------------------------------------------------------
   5) AJAX Search (shortcode [wn_product_search])
------------------------------------------------------------- */
.wn-ajax-search-wrap{ position:relative; }

/* Overlay */
.wn-ajax-search-overlay{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,.25);
  opacity:0; visibility:hidden;
  transition: opacity .3s ease;
  z-index:98;
}
.wn-ajax-search-wrap.active .wn-ajax-search-overlay{
  opacity:1; visibility:visible;
}

/* Toggle lupa */
.wn-ajax-search-toggle{
  background:none !important;
  padding:0 !important;
  border:none;
  cursor:pointer;
  color:#ffffff !important;
  mix-blend-mode:difference;
}
.wn-ajax-search-toggle *,
.wn-ajax-search-toggle:hover,
.wn-ajax-search-toggle:focus{
  color:#ffffff !important;
}
.wn-ajax-search-toggle svg{
  fill: currentColor !important;
  transition: opacity .2s ease;
}
.wn-ajax-search-toggle:hover svg{ opacity:.8; }

/* Drawer */
.wn-ajax-search-modal{
  display:flex;
  flex-direction:column;
  height:100%;
  position:fixed;
  top:0;
  right:0;
  width:450px !important;
  background:#ffffffed !important;
  border-radius:12px !important;
  padding:20px 30px !important;
  margin-right:15px !important;
  margin-top:30px !important;
  box-shadow:none !important;
  transform: translateX(calc(100% + 30px));
  transition: transform .3s ease;
  z-index:9999;
  max-height:93%;
}
.wn-ajax-search-wrap.active .wn-ajax-search-modal{
  transform: translateX(0);
  box-shadow: 0 0 20px rgba(0,0,0,.2) !important;
}

/* Close */
.wn-ajax-search-close{
  background:none !important;
  border:none;
  padding:0;
  cursor:pointer;
  position:absolute;
  top:12px;
  right:12px;
  z-index:10001;
}
.wn-ajax-search-close svg{
  display:block;
  width:24px;
  height:24px;
  fill:#69727d;
}

/* Header */
.wn-ajax-search-header{
  font-size:32px !important;
  color:#000;
  font-weight:600;
  margin-bottom:12px;
  margin-top:40px;
  padding:8px 12px;
}

/* Input */
.wn-ajax-search-modal .wn-ajax-search-input{
  width:100%;
  margin-top:0;
  padding:8px 12px;
  border:1px solid #ccc;
  border-radius:24px;
  font-size:14px;
}

/* Container */
.wn-ajax-search-container{
  margin-top:12px;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.wn-ajax-search-list{ list-style:none; margin:0; padding:0; }
.wn-ajax-search-item{
  display:flex;
  align-items:center;
  padding:10px;
  cursor:pointer;
  transition: background .2s;
}
.wn-ajax-search-item:hover{ background:#f9f9f9; }
.wn-ajax-search-item img{ width:50px; height:auto; margin-right:10px; }
.wn-ajax-search-title{ flex:1; font-size:14px; color:#111; }
.wn-ajax-search-price{ font-size:14px; color:#111; }
.wn-search-loading, .wn-no-results{
  padding:12px;
  text-align:center;
  font-size:14px;
  color:#555;
}

/* Ver todo */
.wn-ajax-search-more{
  display:block;
  text-align:right;
  padding:12px 0;
  font-weight:600 !important;
  color: var(--e-global-color-primary) !important;
  text-decoration: underline !important;
}
.wn-ajax-search-more::after{
  content:"→";
  display:inline-block;
  margin-left:6px;
  transition: transform .2s ease;
}
.wn-ajax-search-more:hover::after{ transform: translateX(4px); }

@media (max-width:768px){
  .wn-ajax-search-modal{
    width:100% !important;
    margin:0 !important;
    border-radius:12px !important;
    padding:15px !important;
    min-height:100%;
  }
}

/* -------------------------------------------------------------
   6) WhatsApp floating button
------------------------------------------------------------- */
.whatsapp-btn{
  position:fixed;
  bottom:100px;
  right:20px;
  z-index:98;
  width:60px;
  height:60px;
  border-radius:50%;
  background-color:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  animation: hn-breathe 2s ease-in-out infinite;
}
.whatsapp-btn i{
  color:#fff;
  font-size:24px;
  animation: hn-beat 2s ease-in-out infinite;
  text-decoration:none;
}
@keyframes hn-breathe{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow: 0 0 0 15px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes hn-beat{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
  100%{ transform: scale(1); }
}

/* -------------------------------------------------------------
   7) Shortcode [mi_cuenta]
------------------------------------------------------------- */
.mi-cuenta-shortcode{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:500;
  text-decoration:none;
  line-height:1;
}
.mi-cuenta-emoji{ line-height:1; }
.mi-cuenta-text,
.mi-cuenta-icon-wrap{
  color:#ffffff !important;
  mix-blend-mode:difference;
}
.mi-cuenta-icon-wrap svg{
  width:22px;
  height:22px;
  display:block;
  stroke: currentColor;
}

/* -------------------------------------------------------------
   8) Envío gratis barra (shortcode [envio_gratis_barra])
------------------------------------------------------------- */
.envio-box{
  margin-top:20px;
  padding:15px 20px;
  border:1px solid #ddd;
  background:#f9f9f9;
  border-radius:6px;
  font-size:15px;
  line-height:1.6;
  display:block;
  flex-direction:column;
  gap:8px;
  position:relative;
  transition: all .3s ease;
}
.envio-box.envio-full{
  background:#e8f5e9;
  border-color:#c8e6c9;
}
.envio-icono{
  font-size:20px;
  color: var(--e-global-color-accent, #1e88e5);
  margin-right:6px;
  vertical-align: middle;
}
.envio-barra{
  background:#e0e0e0;
  height:12px;
  border-radius:6px;
  overflow:hidden;
  margin-top:5px;
}
.envio-barra-fill{
  height:100%;
  background: var(--e-global-color-accent, #1e88e5);
  animation: hn-cargaBrillante 2s infinite linear;
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.2) 75%,
    transparent 75%,
    transparent
  );
  background-size:40px 40px;
}
@keyframes hn-cargaBrillante{
  0%{ background-position:0 0; }
  100%{ background-position:40px 0; }
}