/* np-cache-bust: 2026-09-14-official-bar-module */
/* NP Warehouse-like header (Hummingbird child) */
.np-wh-header {
  --np-wh-header-gap: 0.75rem;
  padding-block: 29px;
  width: 100%;
}

.np-wh-header .header-bottom__container,
.np-wh-header.header-bottom .container-md {
  max-width: var(--gino-header-max, 1530px);
}

.np-wh-header__row {
  width: 100%;
  gap: var(--np-wh-header-gap);
}

.np-wh-header__trailing {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

.np-wh-header__logo img {
  max-height: 48px;
  width: auto;
}

/* Neutraliza wrappers internos del menú / displayTop */
.np-wh-header__menu .header-bottom__row,
.np-wh-header__menu .row,
.np-wh-header__search .row,
.np-wh-header__search .col-auto:not(.ps-searchbar--mobile),
.np-wh-header__search [class*="col-"]:not(.ps-searchbar--mobile) {
  display: contents;
}

.np-wh-header__search .ps-searchbar__form {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Dropdown live = mismo ancho y bordes que el input (evita 100vw / max 30rem de Hummingbird) */
.np-wh-header__search .ps-searchbar {
  position: relative !important;
  min-width: 0 !important;
}

/* Overlay buscador: NUNCA 100vw ni in-flow (cada tecla empujaba la PLP) */
.np-wh-header__search .js-search-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  z-index: 1200 !important;
  box-sizing: border-box !important;
}
.np-wh-header__search .ps-searchbar__dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  z-index: 1200 !important;
}

/* Icon panel: dropdown = ancho completo del .np-wh-search__panel (no solo el input) */
.np-wh-search--icon .np-wh-search__panel-inner {
  position: static !important;
  gap: 0.45rem;
}
.np-wh-search--icon .np-wh-search__panel .ps-searchbar,
.np-wh-search--icon .np-wh-search__panel #_desktop_ps_searchbar,
.np-wh-search--icon .np-wh-search__panel-inner .ps-searchbar {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.np-wh-search--icon .np-wh-search__panel-inner .ps-searchbar__form {
  position: relative !important;
}
.np-wh-search--icon .np-wh-search__panel .ps-searchbar__dropdown {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  top: calc(100% + 4px) !important;
  box-sizing: border-box !important;
}

.np-wh-header__search,
.np-wh-header__search .np-wh-search,
.np-wh-header__search .np-wh-search__inline,
.np-wh-header__search .np-wh-search__panel,
.np-wh-header__search .np-wh-search__panel-inner {
  overflow: visible !important;
}

.np-wh-actions__account,
.np-wh-actions__cart {
  display: flex;
  align-items: center;
}

/* —— Desktop —— */
@media (min-width: 768px) {
  .np-wh-header__search .ps-searchbar--mobile {
    display: none !important;
  }

  .np-wh-header__search #_desktop_ps_searchbar,
  .np-wh-header__search .ps-searchbar {
    display: block !important;
    position: relative !important;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    order: unset !important;
    overflow: visible !important;
  }

  .np-wh-header--8 .np-wh-header__search {
    flex: 1 1 280px;
    max-width: 560px;
  }

  .np-wh-header--1 .np-wh-header__search,
  .np-wh-header--wp8 .np-wh-header__search {
    flex: 0 0 auto;
  }

  /* Icon mode: agrupa buscador con el resto de iconos (mismo ritmo que gap-1) */
  .np-wh-search-mode--icon .np-wh-header__search {
    flex: 0 0 auto;
    margin-inline-start: 0;
  }

  .np-wh-search-mode--icon .np-wh-header__search + .np-wh-header__trailing {
    /* Anula el gap del row (.75rem) y deja ~0.25rem como entre iconos de actions */
    margin-inline-start: calc(-0.75rem + 0.25rem);
  }

  .np-wh-search-mode--icon .np-wh-header__actions {
    gap: 0.25rem !important;
  }

  .np-wh-search-mode--icon .np-wh-search__toggle {
    min-width: 40px;
    min-height: 40px;
    padding: 0.25rem;
  }

  .np-wh-header--wp8 .np-wh-header__menu {
    justify-self: start;
  }

  .np-wh-header__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Iconos account/cart solo icono en desktop (ganar a Bootstrap d-md-*) */
  .np-wh-header__actions .header-block__title,
  .np-wh-header__actions .header-block__action-btn .header-block__title,
  .np-wh-header__actions .dropdown-toggle .header-block__title,
  .np-wh-header__actions span.header-block__title.d-md-inline,
  .np-wh-header__actions span.header-block__title.d-md-flex,
  .np-wh-header__actions span.header-block__title.d-md-block,
  .np-wh-header__actions span.header-block__title.d-lg-inline,
  #_desktop_ps_customersignin .header-block__title,
  #_desktop_ps_shoppingcart .header-block__title,
  .np-wh-header__actions .header-block__action-btn > span:not(.header-block__badge) {
    display: none !important;
  }

  .np-wh-header__actions .header-block__action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.25rem;
    cursor: pointer !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .np-wh-header__actions .header-block__action-btn:hover,
  .np-wh-header__actions .header-block__action-btn:focus-visible {
    cursor: pointer !important;
    color: var(--bs-link-hover-color, #0a58ca);
  }

  .np-wh-header__actions .header-block__badge,
  #_desktop_ps_shoppingcart .header-block__badge {
    display: inline-flex !important;
  }

  /* Search icon mode (panel compacto) — solo desktop */
  .np-wh-search--icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }

  .np-wh-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    cursor: pointer;
    color: inherit;
    z-index: 2;
    background: transparent;
    border: 0;
    transition: opacity 0.2s ease;
  }

  .np-wh-search--icon.is-open .np-wh-search__toggle {
    opacity: 0.35;
    pointer-events: none;
  }

  .np-wh-search__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1080;
    width: min(22rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.25rem);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.35rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    padding: 0.35rem 0.4rem 0.35rem 0.55rem;
    transform-origin: top right;
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
    overflow: visible;
  }

  .np-wh-search--icon.is-open .np-wh-search__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  .np-wh-search__panel[hidden] {
    display: none !important;
  }

  .np-wh-search--icon.is-open .np-wh-search__panel[hidden] {
    display: block !important;
  }

  .np-wh-search__panel-inner {
    position: static !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    overflow: visible;
  }

  .np-wh-search__panel-inner .ps-searchbar,
  .np-wh-search__panel-inner #_desktop_ps_searchbar {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin: 0 !important;
    position: static !important;
  }

  .np-wh-search__panel-inner .ps-searchbar__form {
    position: relative !important;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin: 0 !important;
  }

  /* Dropdown al ancho del panel (incluye cierre X) */
  .np-wh-search--icon .np-wh-search__panel .ps-searchbar__dropdown {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    top: calc(100% + 4px) !important;
    box-sizing: border-box !important;
  }

  .np-wh-search__close {
    flex: 0 0 auto;
    order: 3;
    border: 0;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.15rem;
    line-height: 1;
    border-radius: 999px;
    margin-inline-start: 0.1rem;
  }

  .np-wh-search__close:hover {
    color: #111;
    background: rgba(0, 0, 0, 0.05);
  }
}

/* —— Mobile: nativo + fila compacta —— */
@media (max-width: 767.98px) {
  .np-wh-header {
    padding-block: 27px;
  }

  /* Logo siempre al centro geométrico; laterales no crecen */
  .np-wh-header__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    position: relative !important;
    gap: 0.15rem !important;
  }

  .np-wh-header__menu {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    position: relative;
    z-index: 2;
  }

  .np-wh-header__menu .npmm-slot,
  .np-wh-header__menu .npmm-slot--mobile,
  .np-wh-header__menu .npmm-slot--horizontal,
  .np-wh-header__menu .npmm-slot--vertical {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .np-wh-header__logo {
    position: absolute !important;
    /* Ligero sesgo a la izquierda para no solapar iconos derechos */
    left: 46% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    max-width: min(38vw, 9.5rem);
    min-width: 0 !important;
    text-align: center;
    z-index: 1;
    pointer-events: none;
  }

  .np-wh-header__logo a,
  .np-wh-header__logo img {
    pointer-events: auto;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
  }

  .np-wh-header__search {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    position: relative;
    z-index: 2;
  }

  .np-wh-header__trailing {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: 0 !important;
    position: relative;
    z-index: 2;
  }

  .np-wh-header__actions-mobile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Iconos móvil más compactos; deja aire al logo */
  .np-wh-header__actions-mobile > * {
    margin-inline: -4px;
  }

  .np-wh-header__actions-mobile .header-block__action-btn {
    cursor: pointer !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 34px !important;
    min-height: 36px !important;
    padding: 0.1rem !important;
  }

  .np-wh-search {
    display: inline-flex;
    align-items: center;
  }

  .np-wh-search__toggle,
  .np-wh-search__close {
    display: none !important;
  }

  .np-wh-search__panel,
  .np-wh-search--icon .np-wh-search__panel[hidden] {
    display: contents !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .np-wh-search__panel-inner {
    display: contents !important;
  }

  .np-wh-header__search .ps-searchbar--mobile {
    display: flex !important;
    align-items: center;
  }

  .np-wh-header__search #_desktop_ps_searchbar {
    display: none !important;
  }

  .np-wh-header__search .ps-searchbar__offcanvas #_desktop_ps_searchbar,
  .np-wh-header__search #_mobile_ps_searchbar #_desktop_ps_searchbar {
    display: flex !important;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .np-wh-header__search .ps-searchbar__offcanvas .ps-searchbar {
    display: block !important;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    position: relative !important;
  }

  .np-wh-search--inline .np-wh-search__inline {
    width: auto;
  }
}

.np-wh-search__inline,
.np-wh-search__inline .search-widget,
.np-wh-search__inline form,
.np-wh-search__inline .ui-autocomplete-input {
  width: 100%;
}

/* Top banner slot */
.header-banner {
  overflow: hidden;
  min-height: 31px;
  line-height: 1;
}

.header-banner .np-sc-topbar {
  width: 100%;
}


@media (prefers-reduced-motion: reduce) {
  .np-wh-search__panel,
  .np-wh-search__toggle {
    transition: none !important;
  }
}
/* === GINO layout-width START === */
/**
 * Ancho de layout GINO (child override — no tocar Bootstrap/Hummingbird parent).
 *
 * Bootstrap XXL fija .container en 1320px (@media min-width: 1400px).
 * Aquí pisamos solo los bloques de página del child, con selectores más específicos.
 *
 * Carga: bloque inline al final de np-header.css (asset ya registrado).
 */
:root {
  --gino-header-max: 1530px;
  --gino-home-max: 1530px;
  --gino-plp-max: 1570px;
  --gino-pdp-max: 1500px;
  --gino-checkout-max: 1500px;
  --gino-breadcrumb-max: 1530px;
  --gino-footer-max: 1447px;
  --gino-auth-max: 540px;
}

/*
 * Login / formularios estrechos (authentication.tpl → container--limited-sm).
 * El parent pone max-width:540px, pero .container en md+/lg+/xl+ (misma
 * especificidad, después en el CSS) lo ensancha a 720–1320px en desktop.
 * Selector más específico: no toca PLP/PDP/home ni mobile (width:100% + tope).
 */
.container.container--limited-sm {
  max-width: var(--gino-auth-max);
}

/* Evita scroll horizontal por full-bleed con 100vw (scrollbar gutter). No corta scroll vertical.
 * IMPORTANTE: overflow-x ≠ visible en html/body rompe position:sticky (topbar PDP).
 * Preferir clip solo en contenedores de contenido (#wrapper), no aquí.
 * En PDP mobile pdp.css fuerza overflow-x:visible en html/body.
 */
html,
body {
  overflow-x: clip;
}

/* Topbar styled-components: defaults usan max-width:100vw → overflow en mobile */
.header-banner,
.np-sc-topbar,
.np-official-bar,
#dx-tbar-container {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}

/*
 * Sticky header + overlays (modal / offcanvas / search):
 * Bootstrap pone overflow ≠ visible en html/body (.modal-open, .overflow-hidden).
 * Eso desmonta position:sticky cuando YA hay scroll (al top no se nota).
 * Excluir pickup Bluex / QV: necesitan scroll lock + scroll interno de listas.
 */
html.modal-open:not(:has(body.pz-pickup-modal-open)):not(:has(body.np-qv-open)),
html.modal-open:not(:has(body.pz-pickup-modal-open)):not(:has(body.np-qv-open)) body,
body.modal-open:not(.pz-pickup-modal-open):not(.np-qv-open),
html.overflow-hidden:not(.npmm-menu-open):not(.np-filter-open),
body.overflow-hidden:not(.npmm-menu-open):not(.np-filter-open):not(.pz-pickup-modal-open):not(.np-qv-open),
html.np-se-search-open,
body.np-se-search-open,
html:has(.modal.show):not(:has(body.pz-pickup-modal-open)):not(:has(#myModal.show)),
body:has(.modal.show):not(.pz-pickup-modal-open):not(:has(#myModal.show)),
html:has(.offcanvas.show):not(.npmm-menu-open):not(.np-filter-open):not(:has(.npmm-mobile.offcanvas.show)):not(:has(#offcanvas-faceted.show)),
body:has(.offcanvas.show):not(.npmm-menu-open):not(.np-filter-open):not(:has(.npmm-mobile.offcanvas.show)):not(:has(#offcanvas-faceted.show)),
html:has(#searchCanvas.show),
body:has(#searchCanvas.show),
html:has(.np-pdp-cuotas-modal.show),
body:has(.np-pdp-cuotas-modal.show) {
  overflow: visible !important;
  overflow-x: clip !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  height: auto !important;
  max-height: none !important;
}

body.pz-pickup-modal-open,
html:has(body.pz-pickup-modal-open) {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/*
 * Megamenú / filtros abiertos: NO overflow:hidden en html/body — desmonta
 * position:sticky del #header cuando ya hay scroll (desaparece el header
 * compacto). Scroll del fondo: #wrapper + touch/wheel en JS + data-bs-scroll
 * en el offcanvas (mismo patrón que np_search_extend / buscador).
 */
html.npmm-menu-open,
html.npmm-menu-open body,
body.npmm-menu-open,
html.np-filter-open,
html.np-filter-open body,
body.np-filter-open,
html.npmm-menu-open.overflow-hidden,
html.npmm-menu-open.overflow-hidden body,
body.npmm-menu-open.overflow-hidden,
html.np-filter-open.overflow-hidden,
html.np-filter-open.overflow-hidden body,
body.np-filter-open.overflow-hidden {
  overflow: visible !important;
  overflow-x: clip !important;
  overscroll-behavior: none;
  overflow-anchor: none;
  padding-right: 0 !important;
  margin-right: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* PLP detrás del panel de filtros: no recibe gestos de scroll */
body.np-filter-open #wrapper,
body.np-filter-open #main,
body.np-filter-open #content-wrapper {
  overflow: hidden !important;
  touch-action: none;
}

body.np-filter-open #offcanvas-faceted {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Quickview PLP mobile — bloquear scroll del fondo sin overflow:hidden en html/body */
@media (max-width: 767.98px) {
  html.np-qv-open,
  html.np-qv-open body,
  body.np-qv-open,
  html.np-qv-open.overflow-hidden,
  html.np-qv-open.overflow-hidden body,
  body.np-qv-open.overflow-hidden,
  html.np-qv-open.modal-open,
  html.np-qv-open.modal-open body,
  body.np-qv-open.modal-open {
    overflow: visible !important;
    overflow-x: clip !important;
    overscroll-behavior: none;
    overflow-anchor: none;
    padding-right: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.np-qv-open #wrapper,
  body.np-qv-open #main,
  body.np-qv-open #content-wrapper {
    overflow: hidden !important;
    touch-action: none;
  }

  body.np-qv-open .modal.quickview.show {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  body.np-qv-open .modal.quickview .modal-dialog-scrollable .modal-content,
  body.np-qv-open .modal.quickview.modal-dialog-scrollable .modal-content {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

body.npmm-menu-open #wrapper,
body.npmm-menu-open #main,
body.npmm-menu-open #content-wrapper {
  overflow: hidden !important;
  touch-action: none;
}

body.npmm-menu-open .npmm-mobile.offcanvas {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Al pintar resultados del buscador, el navegador no debe “anclar” el scroll hacia arriba */
html.np-se-search-open,
body.np-se-search-open,
html.npmm-menu-open,
body.npmm-menu-open,
html.np-filter-open,
body.np-filter-open {
  overflow-anchor: none;
}

/* Header */
.np-wh-header .header-bottom__container,
.np-wh-header.header-bottom .container-md {
  max-width: var(--gino-header-max);
}

/* Footer */
.footer-container .container {
  max-width: var(--gino-footer-max) !important;
}

/* Breadcrumb: links más negros/negrita; página actual queda muted */
.breadcrumb__wrapper a.breadcrumb-link,
.breadcrumb__wrapper a.breadcrumb-link span {
  color: #5a5a5a !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.breadcrumb__wrapper a.breadcrumb-link:hover,
.breadcrumb__wrapper a.breadcrumb-link:hover span {
  color: #3a3a3a !important;
  opacity: 0.72;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Solo el texto final (sin enlace) — no pisar el span dentro del <a> */
.breadcrumb__wrapper .breadcrumb-item > span {
  color: #6b7280;
  font-weight: 500;
}

@media (min-width: 1200px) {
  /* Alertas Bootstrap de producto/carrito alineadas al contenido GINO. */
  #notifications .container {
    max-width: 1533px;
  }

  .breadcrumb__wrapper > .container {
    max-width: var(--gino-breadcrumb-max);
  }

  /* Home: columnas del layout + contenido fbhomeprojects (.pzhome-shell) */
  body#index .columns-container.container {
    max-width: var(--gino-home-max);
  }

  /* PDP */
  body#product .columns-container.container {
    max-width: var(--gino-pdp-max);
  }

  /* Carrito / checkout / confirmación */
  body#cart .columns-container.container,
  body#checkout .columns-container.container,
  body#order-confirmation .columns-container.container {
    max-width: var(--gino-checkout-max) !important;
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  }

  /* PLP / listados */
  body#category .columns-container.container,
  body#search .columns-container.container,
  body#manufacturer .columns-container.container,
  body#supplier .columns-container.container,
  body#new-products .columns-container.container,
  body#best-sales .columns-container.container,
  body#prices-drop .columns-container.container,
  /* pm_advancedsearch4: URLs /s/ (SEO) y resultados */
  body.advancedsearch-seo .columns-container.container,
  body.as4-search-results .columns-container.container,
  body[id^='advancedsearch-seo-'] .columns-container.container,
  body#module-pm_advancedsearch4-seo .columns-container.container,
  body#module-pm_advancedsearch4-searchresults .columns-container.container {
    max-width: var(--gino-plp-max);
  }
}

/* === GINO layout-width END === */