/* Header Proinval — barra negra: logo + bloque rojo + FAQ + buscador/categorías + Menu.
 * Carga después de gabic-header.css para ganar en el header móvil/drawer reutilizados. */

:root {
  --ph-red: #e2231a;
  --ph-red-d: #c41c14;
  --ph-bg: #000000;
  --ph-line: rgba(255, 255, 255, 0.16);
  --ph-muted: #8b9099;
  --ph-cats: #b7afa6;
  --ph-placeholder: #cbc4b8;
}

/* ===== Conmutación desktop / móvil ===== */
#header-desktop { display: block; }
#header-mobile { display: none; }

@media (max-width: 991.98px) {
  #header-desktop { display: none; }
  #header-mobile { display: block; }
}

/* Sombra sutil bajo el header (separa de la página). */
#header-desktop,
#header-mobile {
  position: relative;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* ===== Header desktop ===== */
#header-desktop { background: var(--ph-bg); }

#header-desktop .ph-bar {
  display: flex;
  align-items: stretch;
  min-height: 82px;
  background: var(--ph-bg);
}

/* Logo (caja blanca) */
#header-desktop .ph-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 8px 22px 8px 8px;
  background: #ffffff;
  line-height: 0;
}
#header-desktop .ph-logo .custom-logo-link { display: inline-block; line-height: 0; }
#header-desktop .ph-logo img { max-height: 58px; width: auto; height: auto; display: block; }

/* Bloque rojo: teléfonos */
#header-desktop .ph-help {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 26px;
  background: var(--ph-red);
  color: #ffffff;
  text-decoration: none;
}
#header-desktop .ph-help__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
#header-desktop .ph-help__text { display: flex; flex-direction: column; line-height: 1.2; }
#header-desktop .ph-help__text small { font-size: 13px; font-weight: 500; }
#header-desktop .ph-help__text strong { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }

/* Bloque FAQ */
#header-desktop .ph-faq {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  background: var(--ph-bg);
  color: #ffffff;
  text-decoration: none;
}
#header-desktop .ph-faq__icon { flex: 0 0 auto; display: inline-flex; color: #ffffff; }
#header-desktop .ph-faq__text { display: flex; flex-direction: column; line-height: 1.2; }
#header-desktop .ph-faq__text small { font-size: 13px; font-weight: 500; color: var(--ph-muted); }
#header-desktop .ph-faq__text strong { font-size: 16px; font-weight: 800; }
#header-desktop .ph-faq:hover .ph-faq__text small { color: #b9bcc2; }

/* Zona central: buscador + categorías (alineados a la derecha) */
#header-desktop .ph-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 9px;
  padding: 10px 26px;
  border-left: 1px solid var(--ph-line);
}

#header-desktop .ph-search {
  position: relative;
  width: 100%;
  max-width: 640px;
}
#header-desktop .ph-search__input {
  width: 100%;
  height: 44px;
  padding: 0 48px 0 22px;
  background: transparent;
  border: 1px solid #5b5b5b;
  border-radius: 999px;
  color: #ffffff;
  font-size: 15px;
  outline: none;
}
#header-desktop .ph-search__input::placeholder { color: var(--ph-placeholder); }
#header-desktop .ph-search__input:focus { border-color: #8a8a8a; }
#header-desktop .ph-search__btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
#header-desktop .ph-search__btn:hover { color: var(--ph-red); }

#header-desktop .ph-cats { max-width: 100%; }
#header-desktop .ph-cats__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#header-desktop .ph-cats__menu a {
  color: var(--ph-cats);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
#header-desktop .ph-cats__menu a:hover,
#header-desktop .ph-cats__menu .current-menu-item > a { color: #ffffff; }

/* Botón Menu */
#header-desktop .ph-menu {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 24px;
  border: 0;
  border-left: 1px solid var(--ph-line);
  background: var(--ph-bg);
  color: #ffffff;
  cursor: pointer;
}
#header-desktop .ph-menu__bars { display: inline-flex; flex-direction: column; gap: 5px; }
#header-desktop .ph-menu__bars span { display: block; width: 28px; height: 2px; background: #ffffff; border-radius: 2px; }
#header-desktop .ph-menu__label { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
#header-desktop .ph-menu:hover .ph-menu__bars span { background: var(--ph-red); }

/* Tablet ancho / desktop chico: menos padding para que entre todo */
@media (max-width: 1199.98px) {
  #header-desktop .ph-help,
  #header-desktop .ph-faq { padding: 0 18px; }
  #header-desktop .ph-help__text strong { font-size: 16px; }
  #header-desktop .ph-main { padding: 10px 18px; }
  #header-desktop .ph-search { max-width: 460px; }
  #header-desktop .ph-menu { padding: 0 18px; }
}

/* ===== Header móvil (override del portado gabic a negro/rojo) ===== */
#header-mobile { background: var(--ph-bg); }
.ghm-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.ghm-burger { background: var(--ph-red); }
.ghm-logo { flex: 1 1 auto; line-height: 0; text-align: center; }
.ghm-logo img {
  max-height: 40px; width: auto; height: auto;
  background: #ffffff; border-radius: 6px; padding: 4px 8px; box-sizing: content-box;
}
.ghm-help {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px; background: var(--ph-red); color: #ffffff;
}
.ghm-search { display: flex; padding: 0 16px 12px; }
.ghm-search__btn { background: var(--ph-red); }

/* ===== Cajón lateral (botón "Menu"): rojo, desde la derecha, ítems blancos ===== */
.ghm-panel {
  left: auto !important;
  right: 0 !important;
  width: min(360px, 88vw) !important;
  background: var(--ph-red, #e2231a) !important;
  box-shadow: -6px 0 26px rgba(0, 0, 0, 0.28) !important;
  transform: translateX(100%) !important;
}
.ghm-panel.is-open { transform: translateX(0) !important; }

.ghm-panel__head {
  background: transparent !important;
  justify-content: flex-end;
  padding: 14px 16px 4px;
}
.ghm-panel__close { color: #ffffff !important; }
.ghm-panel__close:hover { background: rgba(255, 255, 255, 0.16) !important; }

.ghm-panel .ghm-menu { list-style: none; margin: 0; padding: 12px 0 28px; }
.ghm-panel .ghm-menu li { margin: 0; }
.ghm-panel .ghm-menu li a {
  display: block;
  padding: 12px 32px;
  border-bottom: 0;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ghm-panel .ghm-menu li a:hover,
.ghm-panel .ghm-menu li a:focus-visible {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.14);
}
.ghm-panel .ghm-menu .current-menu-item > a { background: rgba(0, 0, 0, 0.18); }

/* ===== Botón flotante del carrito (cotizador): rojo + ícono blanco + badge rojo ===== */
.ozc-sidecart-fab.ozc-sidecart-fab {
  background-color: var(--ph-red, #e2231a) !important;
  color: #ffffff !important;
}
.ozc-sidecart-fab .ozc-sidecart-count {
  background: var(--ph-red, #e2231a) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}