/* e-man.gr — Phase 1 B2B FORCE layer v1.7.2
   Loaded dynamically AFTER Journal's generated CSS. This file exists specifically
   to make the B2B header/global palette deterministic on the live Journal3 DOM. */

:root {
  --eman-b2b-navy: #183b59;
  --eman-b2b-blue: #235f8d;
  --eman-b2b-blue-2: #2f719f;
  --eman-b2b-soft: #edf4f8;
  --eman-b2b-page: #f3f6f8;
  --eman-b2b-line: #d8e2e9;
  --eman-b2b-ink: #203441;
  --eman-b2b-muted: #71818d;
}

html,
body,
body.eman-front-ready {
  background: var(--eman-b2b-page) !important;
  color: var(--eman-b2b-ink) !important;
}

/* Make the existing homepage use the same darker, more corporate blue. */
.eman-home {
  --eh-bg: #f3f6f8 !important;
  --eh-surface-soft: #edf3f7 !important;
  --eh-line: #d9e3ea !important;
  --eh-line-strong: #c8d6df !important;
  --eh-text: #203441 !important;
  --eh-muted: #6f808c !important;
  --eh-accent: #235f8d !important;
  --eh-accent-hover: #183b59 !important;
  --eh-accent-soft: #e7f0f6 !important;
}

.eman-home-hero-grid {
  background: linear-gradient(120deg, #edf4f8 0%, #f8fafb 55%, #e8f1f6 100%) !important;
}

.eman-home-hero h1 span,
.eman-home-eyebrow,
.eman-home-section-heading > div > span,
.eman-offers-intro > span {
  color: var(--eman-b2b-blue) !important;
}

.eman-home-btn-primary,
.btn-primary,
#button-cart,
.btn-cart {
  background: var(--eman-b2b-blue) !important;
  border-color: var(--eman-b2b-blue) !important;
  color: #fff !important;
}

.eman-home-btn-primary:hover,
.btn-primary:hover,
#button-cart:hover,
.btn-cart:hover {
  background: var(--eman-b2b-navy) !important;
  border-color: var(--eman-b2b-navy) !important;
}

.breadcrumbs {
  background: #f8fafb !important;
  border-bottom: 1px solid var(--eman-b2b-line) !important;
}

/* --------------------------------------------------------------------------
   REAL desktop header root — JS marks the actual Journal node at runtime.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body.eman-header-custom .eman-b2b-header-root,
  body.eman-header-custom header.eman-b2b-header-root,
  body.eman-header-custom .desktop-header.eman-b2b-header-root {
    color: var(--eman-b2b-ink) !important;
    background: #ffffff !important;
    border-top: 3px solid var(--eman-b2b-navy) !important;
    border-bottom: 1px solid var(--eman-b2b-line) !important;
    box-shadow: 0 5px 20px rgba(24,59,89,.075) !important;
  }

  body.eman-header-custom .eman-b2b-midbar {
    min-height: 80px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #fff !important;
  }

  body.eman-header-custom .eman-b2b-logo {
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 6px !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.eman-header-custom .eman-b2b-logo #logo,
  body.eman-header-custom .eman-b2b-logo #logo > a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.eman-header-custom .eman-b2b-logo img,
  body.eman-header-custom .eman-b2b-logo .header-logo,
  body.eman-header-custom .eman-b2b-logo .header-logo-alternate {
    width: auto !important;
    height: auto !important;
    max-width: 82px !important;
    max-height: 66px !important;
    opacity: 1 !important;
  }

  body.eman-header-custom .eman-b2b-utilities {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.eman-header-custom .eman-b2b-search {
    position: relative !important;
    flex: 0 0 420px !important;
    width: 420px !important;
    min-width: 360px !important;
    max-width: 420px !important;
    margin: 0 8px 0 0 !important;
    overflow: visible !important;
  }

  body.eman-header-custom .eman-b2b-search .search-wrapper,
  body.eman-header-custom .eman-b2b-search .search-form,
  body.eman-header-custom .eman-b2b-search .input-group,
  body.eman-header-custom .eman-b2b-search form {
    position: relative !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid #bfcfd9 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(24,59,89,.035) !important;
  }

  body.eman-header-custom .eman-b2b-search input,
  body.eman-header-custom .eman-b2b-search .search-input,
  body.eman-header-custom .eman-b2b-search input.form-control,
  body.eman-header-custom .eman-b2b-search input[name="search"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 52px 0 15px !important;
    color: #243845 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }

  body.eman-header-custom .eman-b2b-search input::placeholder {
    color: #778894 !important;
    opacity: 1 !important;
  }

  body.eman-header-custom .eman-b2b-search .search-button,
  body.eman-header-custom .eman-b2b-search button[type="button"],
  body.eman-header-custom .eman-b2b-search button[type="submit"],
  body.eman-header-custom .eman-b2b-search .btn-search {
    position: absolute !important;
    z-index: 5 !important;
    top: 3px !important;
    right: 3px !important;
    left: auto !important;
    bottom: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: var(--eman-b2b-blue) !important;
    border: 0 !important;
    border-radius: 8px !important;
    opacity: 1 !important;
  }

  body.eman-header-custom .eman-b2b-utility-group {
    min-width: 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.eman-header-custom .eman-b2b-utility-control,
  body.eman-header-custom .eman-b2b-utility-group > a,
  body.eman-header-custom .eman-b2b-utility-group > button,
  body.eman-header-custom .eman-b2b-utility-group .cart-heading {
    min-width: 42px !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    color: var(--eman-b2b-navy) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  body.eman-header-custom .eman-b2b-utility-control:hover,
  body.eman-header-custom .eman-b2b-utility-group > a:hover,
  body.eman-header-custom .eman-b2b-utility-group > button:hover,
  body.eman-header-custom .eman-b2b-utility-group .cart-heading:hover {
    color: var(--eman-b2b-blue) !important;
    background: var(--eman-b2b-soft) !important;
    border-color: #d6e3eb !important;
  }

  /* Journal icon fonts often color the pseudo-element rather than the anchor. */
  body.eman-header-custom .eman-b2b-utilities [class*="icon"],
  body.eman-header-custom .eman-b2b-utilities [class*="icon"]::before,
  body.eman-header-custom .eman-b2b-utilities i,
  body.eman-header-custom .eman-b2b-utilities i::before,
  body.eman-header-custom .eman-b2b-utilities svg,
  body.eman-header-custom .eman-b2b-utilities svg *,
  body.eman-header-custom .eman-b2b-utilities .cart-heading,
  body.eman-header-custom .eman-b2b-utilities .cart-heading::before {
    color: var(--eman-b2b-navy) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  body.eman-header-custom .eman-b2b-utilities .eman-utility-label {
    color: var(--eman-b2b-navy) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  body.eman-header-custom .eman-b2b-utilities .j-dropdown,
  body.eman-header-custom .eman-b2b-utilities .dropdown-menu {
    color: var(--eman-b2b-ink) !important;
    background: #fff !important;
    border: 1px solid var(--eman-b2b-line) !important;
    box-shadow: 0 14px 34px rgba(24,59,89,.14) !important;
  }

  body.eman-header-custom .eman-b2b-utilities .j-dropdown a,
  body.eman-header-custom .eman-b2b-utilities .dropdown-menu a {
    color: var(--eman-b2b-ink) !important;
  }
}

@media (min-width: 768px) and (max-width: 1450px) {
  body.eman-header-custom .eman-b2b-midbar { gap: 12px !important; }
  body.eman-header-custom .eman-b2b-logo {
    flex-basis: 78px !important;
    width: 78px !important;
    min-width: 78px !important;
  }
  body.eman-header-custom .eman-b2b-logo img,
  body.eman-header-custom .eman-b2b-logo .header-logo,
  body.eman-header-custom .eman-b2b-logo .header-logo-alternate { max-width: 70px !important; }
  body.eman-header-custom .eman-b2b-search {
    flex-basis: 360px !important;
    width: 360px !important;
    min-width: 300px !important;
    max-width: 360px !important;
  }
  body.eman-header-custom .eman-b2b-utilities .eman-utility-label { display: none !important; }
}

/* ==========================================================================\n   v1.7.2 DIRECT JOURNAL FALLBACK\n   These selectors intentionally do NOT depend on JS-added classes.\n   The stylesheet itself is injected immediately before </head>, after Journal's\n   generated CSS, so these rules win deterministically.\n   ========================================================================== */
@media (min-width: 768px) {
  .desktop-header,
  .header-compact,
  .header-classic,
  .header-mega {
    background: #ffffff !important;
    color: #203441 !important;
    border-bottom: 1px solid #d8e2e9 !important;
    box-shadow: 0 4px 18px rgba(24,59,89,.07) !important;
  }

  .desktop-header .mid-bar,
  .header-compact .mid-bar,
  .header-classic .mid-bar,
  .header-mega .mid-bar {
    min-height: 76px !important;
    height: 76px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #fff !important;
  }

  .desktop-logo-wrapper {
    width: 92px !important;
    min-width: 92px !important;
    flex: 0 0 92px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 5px !important;
    overflow: visible !important;
  }
  .desktop-logo-wrapper #logo,
  .desktop-logo-wrapper #logo > a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .desktop-logo-wrapper img,
  .desktop-logo-wrapper .header-logo,
  .desktop-logo-wrapper .header-logo-alternate {
    width: auto !important;
    height: auto !important;
    max-width: 82px !important;
    max-height: 64px !important;
    opacity: 1 !important;
  }

  .header-cart-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .desktop-search-wrapper {
    width: 420px !important;
    min-width: 340px !important;
    max-width: 420px !important;
    flex: 0 1 420px !important;
    margin-right: 8px !important;
  }
  .desktop-search-wrapper .search-wrapper,
  .desktop-search-wrapper .search-form,
  .desktop-search-wrapper .input-group,
  .desktop-search-wrapper form {
    position: relative !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid #b9cad6 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(24,59,89,.05) !important;
    overflow: visible !important;
  }
  .desktop-search-wrapper .search-categories,
  .desktop-search-wrapper .search-categories-button,
  .desktop-search-wrapper [class*="search-categories"],
  .desktop-search-wrapper .category-button,
  .desktop-search-wrapper .search-category {
    display: none !important;
  }
  .desktop-search-wrapper input,
  .desktop-search-wrapper .search-input,
  .desktop-search-wrapper input.form-control,
  .desktop-search-wrapper input[name="search"] {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 52px 0 15px !important;
    color: #203441 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }
  .desktop-search-wrapper input::placeholder {
    color: #758692 !important;
    opacity: 1 !important;
  }
  .desktop-search-wrapper .search-button,
  .desktop-search-wrapper button[type="button"],
  .desktop-search-wrapper button[type="submit"],
  .desktop-search-wrapper .btn-search {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    left: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: #235f8d !important;
    border: 0 !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    z-index: 10 !important;
  }

  /* Utility icons: force readable navy color on Journal icon fonts/pseudo-elements. */
  .header-cart-group > div:not(.desktop-search-wrapper),
  .desktop-cart-wrapper,
  .desktop-custom-menu,
  .header-cart-group .top-menu {
    min-width: 42px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-cart-group a,
  .header-cart-group button,
  .header-cart-group .cart-heading,
  .desktop-cart-wrapper .cart-heading {
    color: #183b59 !important;
    opacity: 1 !important;
  }
  .header-cart-group [class*="icon"],
  .header-cart-group [class*="icon"]::before,
  .header-cart-group i,
  .header-cart-group i::before,
  .header-cart-group svg,
  .header-cart-group svg *,
  .header-cart-group .cart-heading,
  .header-cart-group .cart-heading::before,
  .desktop-cart-wrapper .cart-heading::before {
    color: #183b59 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  .header-cart-group a:hover,
  .header-cart-group button:hover,
  .header-cart-group .cart-heading:hover {
    color: #235f8d !important;
  }

  /* Account/dropdown should match the light B2B header instead of a black panel. */
  .header-cart-group .j-dropdown,
  .header-cart-group .dropdown-menu,
  .desktop-header .j-dropdown,
  .desktop-header .dropdown-menu {
    color: #203441 !important;
    background: #fff !important;
    border: 1px solid #d8e2e9 !important;
    box-shadow: 0 14px 34px rgba(24,59,89,.14) !important;
  }
  .header-cart-group .j-dropdown a,
  .header-cart-group .dropdown-menu a,
  .desktop-header .j-dropdown a,
  .desktop-header .dropdown-menu a {
    color: #203441 !important;
  }
}

@media (min-width: 768px) and (max-width: 1450px) {
  .desktop-search-wrapper {
    width: 350px !important;
    min-width: 290px !important;
    max-width: 350px !important;
    flex-basis: 350px !important;
  }
  .desktop-logo-wrapper {
    width: 82px !important;
    min-width: 82px !important;
    flex-basis: 82px !important;
  }
  .desktop-logo-wrapper img,
  .desktop-logo-wrapper .header-logo,
  .desktop-logo-wrapper .header-logo-alternate {
    max-width: 74px !important;
  }
}


/* ========================================================================== 
   e-man.gr v1.7.3 — deterministic rules against the ACTUAL Journal3 DOM
   These do NOT depend on JS-added classes and cover compact/slim/classic/mega.
   ========================================================================== */
html:not(.popup) body {
  background: #f3f6f8 !important;
  color: #203441 !important;
}

@media (min-width: 768px) {
  header.header-compact,
  header.header-classic,
  header.header-mega,
  header.header-slim,
  header[class^="header-"] {
    background: #fff !important;
    border-top: 4px solid #183b59 !important;
    box-shadow: 0 4px 18px rgba(24, 59, 89, .08) !important;
  }

  header[class^="header-"] > .header,
  .header.header-compact,
  .header.header-classic,
  .header.header-mega,
  .header.header-slim-new {
    background: #fff !important;
    color: #203441 !important;
  }

  .header .top-bar,
  .header .top-bar::before,
  header[class^="header-"] .top-bar,
  header[class^="header-"] .top-bar::before {
    background: #183b59 !important;
    color: #f7fbff !important;
    border-color: #183b59 !important;
  }

  .header .top-bar a,
  .header .top-bar span,
  .header .top-bar .btn,
  .header .top-bar .dropdown-toggle {
    color: #f7fbff !important;
  }

  .header .mid-bar,
  header[class^="header-"] .mid-bar {
    min-height: 82px !important;
    background: #fff !important;
    color: #203441 !important;
    border-bottom: 1px solid #d8e2e9 !important;
  }

  .header .desktop-logo-wrapper {
    min-width: 118px !important;
    width: 118px !important;
    padding: 6px 8px !important;
    background: transparent !important;
  }

  .header .desktop-logo-wrapper img,
  .header .desktop-logo-wrapper .header-logo,
  .header .desktop-logo-wrapper .header-logo-alternate {
    width: auto !important;
    max-width: 110px !important;
    max-height: 62px !important;
    object-fit: contain !important;
  }

  .header .desktop-search-wrapper {
    min-width: 320px !important;
    flex: 1 1 420px !important;
  }

  .header .desktop-search-wrapper .search-wrapper,
  .header .desktop-search-wrapper .search-form,
  .header .desktop-search-wrapper .input-group {
    min-height: 48px !important;
    border-radius: 10px !important;
  }

  .header .desktop-search-wrapper input[type="text"],
  .header .desktop-search-wrapper input[name="search"],
  .header .desktop-search-wrapper .search-input {
    min-height: 48px !important;
    background: #f8fafc !important;
    color: #203441 !important;
    border: 1px solid #cbd9e2 !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: none !important;
  }

  .header .desktop-search-wrapper button,
  .header .desktop-search-wrapper .search-button {
    min-height: 48px !important;
    background: #235f8d !important;
    color: #fff !important;
    border-color: #235f8d !important;
  }

  .header .header-cart-group,
  .header-cart-group {
    gap: 10px !important;
    align-items: center !important;
  }

  .header .header-cart-group a,
  .header .header-cart-group button,
  .header .header-cart-group .cart-heading,
  .header-cart-group > * > a,
  .header-cart-group .cart-heading {
    color: #203441 !important;
  }

  .header .desktop-main-menu-wrapper.menu-top,
  .header .desktop-main-menu-wrapper.menu-bar {
    background: #fff !important;
  }

  .header .desktop-main-menu-wrapper ul.j-menu > li > a {
    color: #304958 !important;
    font-weight: 650 !important;
  }

  .header .desktop-main-menu-wrapper ul.j-menu > li > a:hover,
  .header .desktop-main-menu-wrapper ul.j-menu > li.active > a,
  .header .desktop-main-menu-wrapper ul.j-menu > li.open > a {
    color: #183b59 !important;
    background: #eaf2f8 !important;
  }
}

/* Clear B2B surfaces across the storefront. */
.site-wrapper,
.site-wrapper > .container {
  background-color: transparent !important;
}

.btn-primary,
.btn-cart,
#button-cart,
button.btn-primary,
input.btn-primary {
  background: #235f8d !important;
  border-color: #235f8d !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.btn-primary:hover,
.btn-cart:hover,
#button-cart:hover {
  background: #183b59 !important;
  border-color: #183b59 !important;
}

.breadcrumbs,
.breadcrumbs::before {
  background: #f8fafb !important;
  border-color: #d8e2e9 !important;
}

.product-layout .product-thumb,
.product-layout .product-wrapper,
.product-grid .product-thumb,
.product-list .product-thumb {
  border-color: #dbe5eb !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 12px rgba(24, 59, 89, .05) !important;
}

footer,
.footer {
  border-top-color: #cbd9e2 !important;
}