/* NP Search Extend v1.0.20
 * IMPORTANTE: no usar clases con "--" (BEM modifier). El minificador CCC de PS
 * las rompe y puede dejar reglas como `.np-se__col-meta{display:none}`.
 */

/* ===== Dropdown desktop =====
 * Hummingbird pone width:100vw + max-width:30rem y, si el dropdown
 * no es absolute, CADA tecla empuja el contenido de la página hacia abajo.
 * .js-search-dropdown no usa BEM: sobrevive al CCC.
 */
.js-search-widget {
  position: relative !important;
  overflow: visible !important;
  overflow-anchor: none;
  min-width: 0 !important;
}

.ps-searchbar {
  position: relative !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.ps-searchbar__form {
  position: relative !important;
}

/* Mata el width:100vw de Hummingbird (provoca scroll horizontal y empuja layout) */
.ps-searchbar__dropdown,
.js-search-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  z-index: 1200;
  box-sizing: border-box !important;
  overflow: hidden;
  overflow-anchor: none;
  transform: none !important;
}

.ps-searchbar__results.np-se-results,
.js-search-results.np-se-results {
  display: block !important;
  grid-template-columns: none !important;
  max-height: min(70vh, 30rem);
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

  .ps-searchbar__dropdown.np-se-open,
  .js-search-dropdown.np-se-open {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
    position: absolute !important;
    overflow-anchor: none;
  }

/* Icon search: panel tan ancho como PZ (~560px); dropdown = ancho del panel */
@media (min-width: 768px) {
  .np-wh-search--icon.is-open .np-wh-search__panel,
  .np-wh-search--icon .np-wh-search__panel {
    width: min(560px, 92vw) !important;
    max-width: min(560px, 92vw) !important;
  }

  .np-wh-search--icon .np-wh-search__panel .ps-searchbar__dropdown.np-se-open {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .np-wh-search--inline .ps-searchbar__dropdown.np-se-open {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@keyframes np-se-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-0.3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* No anclar scroll al desplegar “Buscando…” (cada tecla movía la página) */
.ps-searchbar,
.ps-searchbar__dropdown,
.np-wh-search,
.js-search-widget,
.js-search-input {
  overflow-anchor: none;
}

/* Mientras se teclea: desactivar anclaje global (Edge/Chrome sticky header) */
html.np-se-typing,
body.np-se-typing {
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}

.js-search-input {
  scroll-margin: 0 !important;
  scroll-margin-block: 0 !important;
}

/* Desktop: header completo fijado mientras hay foco (evita scroll nativo sticky) */
.header-bottom.np-se-header-pinned {
  box-sizing: border-box !important;
}

.np-se-header-ph {
  width: 100%;
  pointer-events: none;
  visibility: hidden;
  flex: 0 0 auto;
}
.np-se {
  display: block;
  width: 100%;
  color: #212529;
  background: #fff;
  box-sizing: border-box;
}

.np-se.np-se-enter {
  animation: np-se-panel-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes np-se-panel-in {
  from {
    opacity: 0;
    transform: translateY(0.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.np-se-grid {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.np-se-col-meta,
.np-se-col-products {
  display: table-cell !important;
  vertical-align: top !important;
  float: none !important;
  box-sizing: border-box !important;
}

.np-se-col-meta {
  width: 34% !important;
  padding: 14px 16px !important;
  border-right: 1px solid #e9ecef !important;
  background: #f7f8f9 !important;
}

.np-se-col-products {
  width: 66% !important;
  padding: 14px 16px !important;
  background: #fff !important;
}

.np-se-is-products-only .np-se-col-meta {
  display: none !important;
}
.np-se-is-products-only .np-se-col-products {
  width: 100% !important;
}

.np-se-is-meta-only .np-se-col-products {
  display: none !important;
}
.np-se-is-meta-only .np-se-col-meta {
  width: 100% !important;
  border-right: 0 !important;
}

.np-se-block {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

.np-se-block + .np-se-block {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e6e8eb;
}

.np-se-title {
  display: block !important;
  margin: 0 0 0.4rem !important;
  padding: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em;
  line-height: 1.25 !important;
  text-transform: uppercase;
  color: #6c757d !important;
}

.np-se-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.np-se-list > li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.np-se-link {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.28rem 0.35rem !important;
  margin: 0 -0.35rem !important;
  color: #212529 !important;
  text-decoration: none !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  border-radius: 0.3rem;
}

.np-se-link:hover,
.np-se-link:focus-visible {
  background-color: rgba(0, 0, 0, 0.05);
  color: #212529 !important;
  text-decoration: none !important;
}

.np-se-link-query {
  font-weight: 600 !important;
  font-size: 0.8rem !important;
}

.np-se-link-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.np-se-count {
  flex-shrink: 0;
  color: #6c757d !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
}

.np-se-count::before {
  content: '(';
}
.np-se-count::after {
  content: ')';
}

.np-se-products {
  display: block !important;
  width: 100% !important;
}

.np-se-product {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.4rem 0.4rem !important;
  margin: 0 -0.4rem 0.1rem !important;
  color: inherit !important;
  text-decoration: none !important;
  border-radius: 0.35rem;
}

.np-se-product:hover,
.np-se-product:focus-visible {
  background-color: #f3f4f6;
  color: inherit !important;
  text-decoration: none !important;
}

.np-se-product-img {
  flex-shrink: 0;
  width: 3.75rem !important;
  height: 3.75rem !important;
  object-fit: contain;
  border-radius: 12%;
  background: #ffffff;
  border: 1px solid #00000017;
}

.np-se-product-img-empty {
  display: inline-block;
}

.np-se-product-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.np-se-product-name {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: inherit !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-se-product-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.np-se-price {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}

.np-se-price-regular {
  font-weight: 400 !important;
  text-decoration: line-through;
  color: #6c757d !important;
  font-size: 0.75rem !important;
}

.np-se-footer {
  display: block;
  border-top: 1px solid #e9ecef;
  padding: 0.7rem 1.15rem;
  background: #fafbfc;
}

.np-se-see-all {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 0.84rem !important;
  color: inherit !important;
  text-decoration: none !important;
  padding: 0.15rem;
  border-radius: 0.3rem;
}

.np-se-see-all:hover,
.np-se-see-all:focus-visible {
  background-color: #f3f4f6;
  text-decoration: none !important;
}

.np-se-empty {
  margin: 0;
  padding: 1rem 0.35rem;
  text-align: center;
  color: #6c757d;
  font-size: 0.84rem;
}

.np-se-loading {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.np-se-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #6c757d;
  font-size: 0.84rem;
}

.np-se-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(108, 117, 125, 0.25);
  border-top-color: #212529;
  border-radius: 50%;
  animation: np-se-spin 0.7s linear infinite;
}

@keyframes np-se-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Mobile =====
 * El canvas nace bajo el header; el JS lo "aparca" en body al abrir.
 * Menú/search (z-index:2) y logo (1). CSS refuerza stacking si el park falla.
 */
@media (max-width: 767.98px) {
  /*
   * No usar overflow:hidden ni position:relative en #header:
   * ambos desmontan position:sticky y al cerrar "arrastran" el scroll.
   * El canvas se aparca en body con z-index alto.
   */
  body.np-se-search-open,
  html.np-se-search-open,
  body.overflow-hidden.np-se-search-open,
  html:has(body.overflow-hidden.np-se-search-open),
  body:has(#searchCanvas.show),
  html:has(#searchCanvas.show) {
    overflow: visible !important;
    padding-right: 0 !important;
    height: auto !important;
  }

  body.np-se-search-open .header-banner,
  html.np-se-search-open .header-banner,
  body.np-se-search-open .header-banner .np-sc-topbar,
  html.np-se-search-open .header-banner .np-sc-topbar,
  body.np-se-search-open .np-sc-topbar,
  html.np-se-search-open .np-sc-topbar,
  body.np-se-search-open #dx-tbar-container,
  html.np-se-search-open #dx-tbar-container {
    z-index: 1 !important;
  }

  body.np-se-search-open #wrapper,
  html.np-se-search-open #wrapper,
  body.np-se-search-open #main,
  html.np-se-search-open #main,
  body.np-se-search-open #content-wrapper,
  html.np-se-search-open #content-wrapper,
  body.np-se-search-open #js-product-list,
  html.np-se-search-open #js-product-list,
  body.np-se-search-open .js-product-list,
  html.np-se-search-open .js-product-list,
  body.np-se-search-open .featured-products,
  html.np-se-search-open .featured-products {
    z-index: 1 !important;
  }

  body.np-se-search-open .product-miniature,
  html.np-se-search-open .product-miniature,
  body.np-se-search-open .js-product,
  html.np-se-search-open .js-product,
  body.np-se-search-open article.product,
  html.np-se-search-open article.product,
  body.np-se-search-open [class*='prodTalla'],
  html.np-se-search-open [class*='prodTalla'],
  body.np-se-search-open [class*='prodtallas'],
  html.np-se-search-open [class*='prodtallas'] {
    z-index: 0 !important;
    transform: none !important;
  }

  /* Fallback si el canvas aún no está en body: elevar la rama del search */
  body.np-se-search-open .np-wh-header__menu,
  html.np-se-search-open .np-wh-header__menu,
  body.np-se-search-open .np-wh-header__logo,
  html.np-se-search-open .np-wh-header__logo {
    z-index: 0 !important;
  }

  body.np-se-search-open .np-wh-header__trailing,
  html.np-se-search-open .np-wh-header__trailing,
  body.np-se-search-open .np-wh-header__search,
  html.np-se-search-open .np-wh-header__search,
  body.np-se-search-open .ps-searchbar--mobile,
  html.np-se-search-open .ps-searchbar--mobile {
    z-index: 20100 !important;
  }

  /* No tocar position del header sticky: solo z-index de stacking */
  body.np-se-search-open #header,
  html.np-se-search-open #header {
    z-index: 20050 !important;
  }

  /* Canvas aparcado en body O dentro del header */
  #searchCanvas.offcanvas,
  #searchCanvas.ps-searchbar__offcanvas,
  body > #searchCanvas.offcanvas {
    position: fixed !important;
    z-index: 20100 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
  }

  #searchCanvas.offcanvas:not(.show):not(.showing) {
    transform: translateY(-100%) !important;
  }

  #searchCanvas.offcanvas.show,
  #searchCanvas.offcanvas.showing,
  body > #searchCanvas.offcanvas.show {
    transform: none !important;
  }

  /* Solo backdrop del search; NO tocar el del megamenu u otros offcanvas */
  body.np-se-search-open .offcanvas-backdrop,
  body:has(#searchCanvas.show) .offcanvas-backdrop {
    z-index: 20090 !important;
  }

  #searchCanvas .offcanvas-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    position: relative;
    z-index: 2;
    background: #fff !important;
    flex: 0 0 auto;
  }

  #searchCanvas .ps-searchbar__container,
  #searchCanvas #_mobile_ps_searchbar {
    flex: 1 1 auto;
    min-width: 0;
  }

  #searchCanvas .ps-searchbar__dropdown {
    display: none !important;
  }

  #searchCanvas.offcanvas {
    display: flex;
    flex-direction: column;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none;
  }

  #searchCanvas .np-se-mobile-host {
    display: none;
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    border-top: 1px solid #e9ecef;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
  }

  #searchCanvas .np-se-mobile-host.is-open {
    display: block;
    animation: np-se-panel-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #searchCanvas .np-se-grid {
    display: block !important;
    width: 100% !important;
  }

  #searchCanvas .np-se-col-meta,
  #searchCanvas .np-se-col-products {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
  }

  #searchCanvas .np-se-col-meta {
    border-right: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
  }

  #searchCanvas .np-se-product-img {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-searchbar__dropdown.np-se-open,
  .np-se.np-se-enter,
  .np-se-spinner,
  #searchCanvas .np-se-mobile-host.is-open {
    animation: none !important;
  }
}