/**
 * EcommPaaS Porto V2 — Shared Clean Header Styles
 *
 * Sitewide styles for the .hp-* header components:
 *   1. Promo bar       (.hp-promo-bar)
 *   2. Topbar          (.hp-topbar)
 *   3. Main header     (.hp-header)
 *   4. Nav bar         (.hp-nav)
 *
 * Loaded in default.xml AFTER porto.css so specificity (0,1,0)
 * beats porto.css legacy rules.
 *
 * Note: home-clean.css still contains the homepage body sections
 * (trust bar, layout, sidebar, product panels) scoped under
 * body.cms-index-index. Token variables (:root) are defined here
 * and shared by home-clean.css.
 */

/* ============================================================
   TOKEN SYSTEM
   ============================================================ */
:root {
  --hp-blue:        #0088cc;
  --hp-blue-dark:   #006699;
  --hp-blue-light:  #e8f4fb;
  --hp-text:        #222529;
  --hp-text-light:  #777;
  --hp-bg:          #fff;
  --hp-bg-grey:     #f4f4f4;
  --hp-border:      #e7e7e7;
  --hp-radius:      4px;
  --hp-gap:         16px;
  --hp-font:        Poppins, 'Open Sans', Helvetica, Arial, sans-serif;
  --hp-font-heading:Poppins, 'Open Sans', Helvetica, Arial, sans-serif;
  /* Topbar: #0188cc matches Porto Demo 1 .main-panel-top rgb(1,136,204) */
  --hp-topbar-bg:   #0188cc;
  /* Nav: #f4f4f4 matches Porto Demo 1 .nav-sections rgb(244,244,244) */
  --hp-nav-bg:      #f4f4f4;
  /* Promo bar: #222529 matches Porto Demo 1 .background-color-dark rgb(34,37,41) */
  --hp-promobar-bg: #222529;
  --hp-max-width:   1200px;
  /* R163: 285px matches reference Bootstrap col-lg-3 (25% of 1140px container) */
  --hp-sidebar-w:   285px;
}

/* porto.css sets .page-header { background-color: #0088cc !important; }.
   Our clean header uses per-section backgrounds (promo-bar/topbar/hp-header/hp-nav)
   so the page-header wrapper must be transparent to avoid blue bleed-through gaps. */
.page-header {
  background-color: transparent !important;
}

/* ============================================================
   BOX-SIZING + SCOPED RESET
   ============================================================ */
[class^="hp-"],
[class*=" hp-"] {
  box-sizing: border-box;
  font-family: var(--hp-font);
}

[class^="hp-"] *,
[class*=" hp-"] * {
  box-sizing: border-box;
}

[class^="hp-"] ul,
[class^="hp-"] ol,
[class^="hp-"] li,
[class*=" hp-"] ul,
[class*=" hp-"] ol,
[class*=" hp-"] li {
  list-style: none;
  padding: 0;
  margin: 0;
}

[class^="hp-"] button,
[class*=" hp-"] button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

[class^="hp-"] img,
[class*=" hp-"] img {
  max-width: 100%;
  display: block;
  height: auto;
}

/* ============================================================
   1. PROMO BAR — dark dismissible bar (row 0, above blue topbar)
   Porto Demo 1 reference: .background-color-dark, h=47px, rgb(34,37,41)
   ============================================================ */
.hp-promo-bar {
  background: var(--hp-promobar-bg);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  padding: 10px 40px;
  min-height: 47px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.hp-promo-bar a {
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: #151719;
  padding: 6px 8px;
  margin-left: 4px;
  border-radius: 0;
  letter-spacing: 0.05em;
  display: inline-block;
}

.hp-promo-bar a:hover { background: #0088cc; text-decoration: none; }

.hp-promo-bar__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
}

.hp-promo-bar__close:hover { color: #fff; }

/* ============================================================
   2. TOPBAR
   ============================================================ */
.hp-topbar {
  background: var(--hp-topbar-bg);
  font-size: 12px;
  color: #fff;
  border-bottom: none;
}

.hp-topbar__inner {
  max-width: var(--hp-max-width);
  margin: 0 auto;
  padding: 0 var(--hp-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Porto Demo 1: main-panel-top height 40px */
  height: 40px;
}

.hp-topbar__left { display: flex; align-items: center; gap: 12px; }
.hp-topbar__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hp-topbar a {
  color: #bde1f5;
  text-decoration: none;
  font-size: 11px;
  text-transform: uppercase;
}

.hp-topbar a:hover { color: #fff; text-decoration: underline; }

.hp-topbar__sep { color: rgba(255,255,255,0.5); }

.hp-topbar__social { display: flex; gap: 8px; margin-left: 8px; }

.hp-topbar__social a {
  color: #bde1f5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  text-transform: none;
  transition: background 0.2s, color 0.2s;
}

.hp-topbar__social a:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.hp-topbar__social svg {
  fill: #bde1f5;
  stroke: #bde1f5;
}

/* ============================================================
   3. MAIN HEADER
   ============================================================ */
.hp-header {
  background: var(--hp-bg);
  border-bottom: 1px solid var(--hp-border);
}

.hp-header__inner {
  max-width: var(--hp-max-width);
  margin: 0 auto;
  padding: 25px var(--hp-gap);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.hp-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.hp-header__logo img {
  max-height: 44px;
  width: auto;
  display: block;
}

.hp-header__logo-fallback {
  display: none;
}

.hp-header__logo-text {
  font-size: 26px;
  font-weight: 800;
  color: var(--hp-blue);
  letter-spacing: -0.5px;
  line-height: 1;
}

.hp-header__logo-sub {
  font-size: 10px;
  color: var(--hp-text-light);
  display: block;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 1px;
}

.hp-header__search {
  display: flex;
  border: none;
  border-radius: 25px;
  overflow: hidden;
  height: 40px;
  background: #f7f7f7;
}

.hp-header__search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 16px;
  font-size: 14px;
  color: var(--hp-text);
  background: transparent;
}

.hp-header__search select {
  border: none;
  border-left: 1px solid #e1e1e1;
  outline: none;
  padding: 0 10px;
  font-size: 12px;
  color: var(--hp-text);
  background: transparent;
  cursor: pointer;
  max-width: 130px;
}

.hp-header__search button {
  background: transparent;
  border: none;
  color: #606669;
  padding: 0 14px;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}

.hp-header__search button:hover { color: var(--hp-blue); background: transparent; }

.hp-header__right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hp-header__phone {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--hp-text-light);
  text-align: right;
}

.hp-header__phone strong {
  font-size: 16px;
  color: var(--hp-text);
  font-weight: 700;
}

.hp-header__icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hp-header__icon-link {
  position: relative;
  color: var(--hp-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 22px;
  transition: color 0.2s;
}

.hp-header__icon-link:hover { color: var(--hp-blue); }

.hp-header__icon-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--hp-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   4. NAV BAR
   ============================================================ */
.hp-nav {
  background: var(--hp-nav-bg);
  border-bottom: 1px solid #e0e0e0;
  /* Box-shadow is applied via porto.css with !important to ensure it wins.
     Keeping rule here for documentation; porto.css override takes precedence. */
}

.hp-nav__inner {
  max-width: var(--hp-max-width);
  margin: 0 auto;
  padding: 0 var(--hp-gap);
  display: flex;
  align-items: center;
  height: 46px;
}

.hp-nav a {
  /* Porto Demo 1: .navigation .level0 > a — 12px/600 #6b7a83 uppercase letter-spacing:-0.3px */
  color: #6b7a83;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
  height: 46px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  transition: color 0.2s;
  white-space: nowrap;
}

.hp-nav a:hover,
.hp-nav a.hp-nav--active {
  /* Porto Demo 1: hover color is #0088cc */
  color: var(--hp-blue);
  background: transparent;
}

/* ================================================================
   SITEWIDE BREADCRUMB — fix double-separator
   porto.css accumulated both ::before (li+li) and ::after (item:not(:last-child))
   separator rules, causing "Home / / Page" on CMS/search/account pages.
   Catalog pages already suppress ::before in category-clean.css/product-clean.css;
   this global rule fixes all remaining pages in one place.
   ================================================================ */
.breadcrumbs .items > li + li::before {
  content: none !important;
  display: none !important;
}

/* Porto Demo 1 reference uses › (U+203A) on all pages — R12 audit confirmed.
   porto.css has body.cms-page-view selector with specificity (0,5,2) — must match it.
   All three variants cover: CMS pages, generic body, and non-.item li. */
body.cms-page-view .breadcrumbs .items .item:not(:last-child)::after,
body .breadcrumbs .items .item:not(:last-child)::after,
body .breadcrumbs .items > li:not(:last-child)::after {
  content: '\203A' !important;
}

/* ================================================================
   R39 — Footer widget title: Porto Demo 1 reference = 15px/600/uppercase.
   porto.css has TWO competing rules:
     1. body .pt-footer-middle__title { 13px !important } — specificity (0,1,1)
     2. body .pt-footer-middle__col > h3.pt-footer-middle__title { 13px !important } — specificity (0,2,2)
   Rule 2 is more specific, so both selectors must be overridden here with matching or
   higher specificity. This file loads AFTER porto.css so source order breaks ties.
   ================================================================ */
body .pt-footer-middle__title,
body .page-footer .block-title strong,
body .pt-footer-middle__col > h3,
body .pt-footer-middle h3,
body .pt-footer-middle h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
}
/* Match the higher-specificity porto.css rule that uses the compound h3.classname selector */
body .pt-footer-middle__col > h3.pt-footer-middle__title {
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* R124: porto.css line 12105 sets a { line-height: 22px } but not the li.
   Reference (Porto Demo 1 verified live 2026-05-15) has li line-height:22px AND
   margin-bottom:10px — porto.css line 12106 default is correct, R123 wrongly set 0.
   Only override line-height; let porto.css supply the 10px margin. */
body .pt-footer-middle__links li {
  line-height: 22px !important;
}

/* R124: porto.css rule #55 adds border-top: 1px solid rgba(255,255,255,0.05) !important
   to .pt-footer-bottom, adding +1px vs reference (118px). Override to none. */
body .pt-footer-bottom {
  border-top: none !important;
}

/* R123: footer widget column height — reference columns are 310px (fill the container's
   content area: container 398px - 64px top pad - 24px bottom pad = 310px). Match via
   min-height + row padding identical to reference container padding.
   porto.css has row padding-top:30/bottom:10; override to reference values 64/24.
   Zero outer middle padding so the row padding alone sets the rhythm. */
body .pt-footer-middle__col {
  min-height: 310px;
}
body .pt-footer-middle .pt-footer-middle__row {
  padding-top: 64px !important;
  padding-bottom: 24px !important;
}
body .pt-footer-middle {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Homepage had a porto.css-specific 35px top override; clear it too */
body.cms-index-index .pt-footer-middle,
body.cms-home .pt-footer-middle {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* R193: Footer ABOUT US column — replace text wordmark with porto-logo-white.png (202×80).
   porto.css sets .pt-footer-middle__about-logo to display:flex for text spans;
   image needs display:block. The wordmark/sub spans are gone — their CSS in porto.css
   is now dead but harmless. */
body .pt-footer-middle__about-logo {
  display: block !important;
  margin-bottom: 16px;
}
body .pt-footer-middle__about-logo a {
  display: inline-block;
}
body .pt-footer-middle__about-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}