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

/* -------------------------------------------------------------
   2) Qty buttons (+ / -)
------------------------------------------------------------- */
.woocommerce .quantity { margin: 0; }
.quantity-button-wrapper {
  display: inline-flex; align-items: center; gap: 0;
  border: 0; border-radius: 3px; overflow: hidden;
  background: #fff; height: 56px;
}
.quantity-button-wrapper .button-qty {
  width: 40px !important; height: 42px; line-height: 42px;
  padding: 1px !important; margin-right: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: #f1f1f1 !important; color: #333 !important;
  font-size: 18px !important; font-weight: 500; text-align: center;
  cursor: pointer; box-shadow: none; transition: background-color .3s;
}
.quantity-button-wrapper .button-qty:hover { background: #e0e0e0 !important; }
.quantity-button-wrapper .button-qty:active { background: #ccc !important; }
.quantity-button-wrapper input.qty {
  width: 72px !important; height: 42px;
  margin: 0 -1px 0 -4px !important; padding: 16px !important;
  border: 0; text-align: center; font-weight: 600;
  background: transparent; box-shadow: none;
  -moz-appearance: textfield; 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;
}
.quantity-button-wrapper :is(button, input):focus-visible {
  outline: 2px solid currentColor; outline-offset: -3px;
}
@media (max-width: 480px) {
  .quantity-button-wrapper .button-qty { 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:0;
  background:#f8f8f8;
  border-radius:10px;
  padding:20px;
}
.hn-filter-heading{font-size:15px;font-weight:600;padding-bottom:16px}
.hn-filter-section{border-top:1px solid #ddd;padding:18px 0}
.hn-filter-section:last-child{padding-bottom:0}
.hn-filter-section summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-size:14px;font-weight:600;margin-bottom:0}
.hn-filter-section summary::-webkit-details-marker{display:none}
.hn-filter-section summary:after{content:'+';font-weight:400}
.hn-filter-section[open]>summary{margin-bottom:14px}
.hn-filter-section[open]>summary:after{content:'−'}
.hn-brand-section .categoria-nombre[aria-current]{font-weight:600!important;text-decoration:underline}
.hn-filter-price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.hn-filter-price label{flex:1;min-width:0;font-size:12px;color:#666}
.hn-filter-price input[type=number]{box-sizing:border-box;min-width:0;width:100%;margin-top:6px;padding:10px!important;border:1px solid #ddd!important;border-radius:7px!important;background:white!important;font-family:inherit;font-size:14px!important;font-weight:400;line-height:1.5;font-variant-numeric:tabular-nums}
.hn-filter-price input[type=hidden]{display:none}
.hn-price-range{grid-column:1/-1;position:relative;height:36px;margin:4px 8px 0;--low:0%;--high:100%;direction:ltr}
.hn-price-range[hidden]{display:none}
.hn-price-range::before{content:'';position:absolute;inset:14px 0 auto;height:8px;border-radius:10px;background:linear-gradient(to right,#dedede var(--low),#252525 var(--low),#252525 var(--high),#dedede var(--high))}
.hn-filter-price .hn-price-range input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:36px;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;pointer-events:none;cursor:pointer;direction:ltr}
.hn-price-range input::-webkit-slider-runnable-track{height:8px;background:transparent;border:0;border-radius:10px}
.hn-price-range input::-moz-range-track{height:8px;background:transparent;border:0;border-radius:10px}
.hn-price-range input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-5px;background:white;border:4px solid #252525;border-radius:50%;pointer-events:auto;box-shadow:0 1px 3px #0002}
.hn-price-range input::-moz-range-thumb{width:10px;height:10px;background:white;border:4px solid #252525;border-radius:50%;pointer-events:auto;box-shadow:0 1px 3px #0002}
.hn-price-range input:focus-visible::-webkit-slider-thumb{outline:3px solid #8d8d8d;outline-offset:3px}
.hn-price-range input:focus-visible::-moz-range-thumb{outline:3px solid #8d8d8d;outline-offset:3px}
.hn-price-range input:focus-visible{z-index:2;outline:0}
.hn-price-limits{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#777;margin:-5px 0 4px}
.hn-filter-price .hn-price-apply{
  grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-width:0;min-height:50px;margin:4px 0 0;padding:12px 18px;
  border:1px solid #171717!important;border-radius:8px!important;
  background:#fff!important;color:#171717!important;box-shadow:none!important;
  font:inherit;font-size:14px;font-weight:600;line-height:1.35;text-transform:none;
  cursor:pointer;transition:background-color .3s ease,color .3s ease;
}
.hn-price-apply-motion{display:grid;overflow:hidden}
.hn-price-apply-line{grid-area:1/1;transition:transform .4s cubic-bezier(.2,.65,.3,1)}
.hn-price-apply-copy{transform:translateY(140%)}
@media(hover:hover) and (pointer:fine){
  .hn-filter-price .hn-price-apply:hover{background:#171717!important;color:#fff!important}
  .hn-price-apply:hover .hn-price-apply-line{transform:translateY(-140%)}
  .hn-price-apply:hover .hn-price-apply-copy{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .hn-filter-price .hn-price-apply,.hn-price-apply-line{transition:none}
}
.hn-filter-availability{display:flex;flex-direction:column;gap:12px}
.hn-filter-availability .hn-stock-option{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;font-weight:400;cursor:pointer;color:#333}
.hn-filter-availability input[type=checkbox]{appearance:auto!important;width:17px;height:17px;min-width:17px;margin:0;padding:0;accent-color:#252525;cursor:pointer;flex:none}
.hn-filter-availability .hn-stock-option small{margin-left:auto;color:#777;font-size:12px;font-variant-numeric:tabular-nums}
.hn-filter-availability .is-empty{opacity:.5;cursor:default}
.hn-filter-availability input[type=hidden]{display:none}
.webninja-categorias-wrapper :focus-visible{outline:2px solid #555;outline-offset:3px}
.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:6px 0;
  border:0;
}
.categoria-nombre{
  text-decoration:none;
  color:#111 !important;
  font-weight:400 !important;
  flex-grow:1;
  font-size:14px;
  padding:4px 0;
}
.toggle-subcategorias{
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  min-width:30px;
  min-height:30px;
  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:flex;
  flex-direction:column;
  margin-left:14px;
  margin-top:6px;
  gap:4px;
}
.subcategorias[hidden]{display:none!important}

/* ✅ 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:15px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  margin-bottom:16px;
  font-weight:600;
  font-family: inherit;
  padding:0 !important;
}
.hn-mobile-filter-button[hidden]{ display:none; }
.hn-mobile-filter-button svg{ width:20px; height:20px; flex:none; }
/* Keep this text control neutral when Hello/Elementor applies button states.
   Pointer-only outlines are handled by hn-input-mode; keyboard focus remains. */
#mobile-filter-button:is(:hover,:focus,:active){
  background:transparent!important;color:#111!important;
  border:0!important;box-shadow:none!important;
}
.hn-mobile-filter-button:focus-visible{outline:2px solid #64748b;outline-offset:4px}

.hn-mobile-filter-menu{
  position: fixed;
  inset:0 auto 0 0; margin:10px;
  width:min(480px, calc(100% - 20px)); max-width:none;
  height:calc(100dvh - 20px); max-height:none;
  padding:24px; border:0; border-radius:16px;
  background:#fff; color:#171717; box-sizing:border-box;
  overflow:hidden; overscroll-behavior:contain;
  font:400 14px/1.5 'Oplynt Header Inter',Inter,sans-serif;
}
.hn-mobile-filter-menu:not([open]){display:none}
.hn-mobile-filter-menu[open]{display:flex;flex-direction:column;animation:hn-filter-in .3s ease both}
.hn-mobile-filter-menu::backdrop{background:#0005}
body:has(.hn-mobile-filter-menu[open]){overflow:hidden}
.hn-filter-drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
.hn-filter-drawer-heading h2{font:700 24px/1.25 'Oplynt Header Inter',Inter,sans-serif;margin:0;color:inherit}
.hn-mobile-filter-inner{padding:16px 4px 0 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0}
#mobile-filter-menu .webninja-categorias-wrapper{background:transparent;padding:0;border-radius:0}
#mobile-filter-menu .hn-filter-heading{display:none}
#mobile-filter-menu .categoria-header{padding:2px 0}
#mobile-filter-menu .categoria-nombre{font-size:14px;line-height:1.5}
.hn-mobile-filter-menu :focus-visible{outline:2px solid #64748b;outline-offset:-2px}
@keyframes hn-filter-in{from{transform:translateX(calc(-100% - 20px))}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.hn-mobile-filter-menu[open]{animation:none}.icon-caret{transition:none}}
.hn-mobile-filter-close{
  font:400 30px/1 sans-serif!important;
  width:44px;height:44px;padding:0!important;margin:-8px -8px 0 0;
  border:0!important;border-radius:0;background:transparent!important;color:#171717!important;
  box-shadow:none!important;cursor:pointer;flex:none;
}
@media (min-width:768px){
  #mobile-filter-button, #mobile-filter-menu{ display:none !important; }
}

/* -------------------------------------------------------------
   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;
}
.hn-shipping-message{display:flex;align-items:center;gap:10px;justify-content:space-between}
.hn-free-shipping{position:relative}
.hn-free-shipping[aria-busy="true"]{pointer-events:none}
.hn-free-shipping[aria-busy="true"]:empty{min-height:80px;margin-top:20px}
.hn-free-shipping[aria-busy="true"]::after{content:'Actualizando envío…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:26px;border:1px solid #ddd;border-radius:6px;background:#f9f9f9; color:#666;font-size:14px;z-index:21}
.hn-free-shipping[aria-busy="true"]::before{content:'';position:absolute;top:calc(50% - 8px);left:calc(50% - 90px);width:16px;height:16px;border:2px solid #ddd;border-top-color:#868686;border-radius:50%;z-index:22;animation:hn-shipping-spin .8s linear infinite}
@keyframes hn-shipping-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hn-free-shipping[aria-busy="true"]::before{animation:none}}
.hn-shipping-gift{display:inline-flex;vertical-align:middle;margin-right:8px;flex-shrink:0}
.hn-shipping-gift svg{width:24px;height:24px;display:block}
.hn-shipping-help{flex:0 0 auto;position:static}
.hn-shipping-help button{display:flex;align-items:center;justify-content:center;cursor:pointer;width:28px;height:28px;padding:0;border:0;background:transparent;color:inherit;box-shadow:none}
.hn-shipping-help button:focus-visible{outline:2px solid #868686;outline-offset:2px;border-radius:50%}
.hn-shipping-help button svg{width:20px;height:20px}
.hn-free-shipping .hn-shipping-help button:is(:hover,:focus,:active){background:transparent;border:0;box-shadow:none}
.hn-free-shipping .hn-shipping-gift,
.hn-free-shipping .hn-shipping-help button{color:#868686}
.hn-free-shipping .envio-full .hn-shipping-gift,
.hn-free-shipping .envio-full .hn-shipping-help button{color:#256029}
.hn-shipping-help-text{position:absolute;right:8px;bottom:calc(100% + 8px);width:min(280px,calc(100% - 16px));z-index:20;padding:9px 12px;border:0;border-radius:8px;background:#262626;color:#fff;box-shadow:0 2px 8px #00000018;font-size:12px;font-weight:400;line-height:1.5;text-align:left}
.hn-shipping-help-text::after{content:'';position:absolute;right:15px;top:100%;border:5px solid transparent;border-top-color:#262626}
.hn-shipping-help-text::before{content:'';position:absolute;inset:100% 0 -12px}
.hn-shipping-help:not(.is-open) .hn-shipping-help-text{visibility:hidden;opacity:0;pointer-events:none}
.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; }
}

.woocommerce-product-savings[hidden] { display: none !important; }
/* Custom purchase SVGs. */
.hn-icon { display: inline-block; vertical-align: -.125em; fill: currentColor; flex-shrink: 0; }
.add_to_cart_button > .hn-icon,
.add_to_cart_button > .hn-cart-label > .hn-icon { width: 1em; height: 1em; margin-right: 6px; }