/*
 * EL-CREDO BUSINESS LTD
 * Branded Header v2
 * Scoped to Blonwe Header Type 1
 */

.site-header.header-type1 {
  --ec-bg: #ffffff;
  --ec-text: #25272b;
  --ec-muted: #666b70;
  --ec-border: #e8e4dc;
  --ec-input: #f6f6f4;
  --ec-gold: #c89b43;
  color: var(--ec-text);
}

body[data-theme="dark"] .site-header.header-type1,
html[data-theme="dark"] .site-header.header-type1 {
  --ec-bg: #242629;
  --ec-text: #f5f2ec;
  --ec-muted: #bcbec3;
  --ec-border: #414348;
  --ec-input: #303236;
  --ec-gold: #d5a64a;
}

/* Three desktop rows and mobile header */
.site-header.header-type1 .header-row,
.site-header.header-type1 .header-topbar,
.site-header.header-type1 .header-main,
.site-header.header-type1 .header-bottom,
.site-header.header-type1 .header-mobile-main {
  background: var(--ec-bg) !important;
  background-color: var(--ec-bg) !important;
  color: var(--ec-text) !important;
  border-color: var(--ec-border) !important;
}

/* Repair Blonwe's white-on-white navigation */
.site-header.header-type1 .header-row a,
.site-header.header-type1 .header-row button,
.site-header.header-type1 .header-row .klb-menu-nav > ul > li > a,
.site-header.header-type1 .header-row .primary-menu > ul > li > a {
  color: var(--ec-text) !important;
}

/* Header icons and text labels */
.site-header.header-type1 .header-row svg,
.site-header.header-type1 .header-row .header-icon {
  color: var(--ec-text);
}

/* Gold interaction states */
.site-header.header-type1 .header-row a:hover,
.site-header.header-type1 .header-row a:focus-visible,
.site-header.header-type1 .header-row button:hover,
.site-header.header-type1 .header-row button:focus-visible,
.site-header.header-type1 .header-row .klb-menu-nav > ul > li > a:hover {
  color: var(--ec-gold) !important;
}

/* Keep navigation proportions consistent */
.site-header.header-type1 .header-topbar {
  border-bottom: 1px solid var(--ec-border) !important;
}

.site-header.header-type1 .header-bottom {
  border-bottom: 1px solid var(--ec-border) !important;
}

/* Approved logo presentation */
.site-header.header-type1 .site-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-header.header-type1 .site-brand a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.site-header.header-type1 .site-brand img {
  width: auto !important;
  height: 64px !important;
  max-width: 160px !important;
  object-fit: contain;
}

/* Search fields */
.site-header.header-type1 input[type="search"],
.site-header.header-type1 .header-search input {
  background-color: var(--ec-input) !important;
  color: var(--ec-text) !important;
  border-color: var(--ec-border) !important;
}

.site-header.header-type1 input::placeholder {
  color: var(--ec-muted) !important;
  opacity: 1;
}

/* Search and menu controls */
.site-header.header-type1 .header-row input,
.site-header.header-type1 .header-row select {
  border-color: var(--ec-border);
}

/* Responsive header */
@media (max-width: 1199px) {
  .site-header.header-type1 .header-mobile .site-brand img,
  .site-header.header-type1 .header-mobile-main .site-brand img {
    width: auto !important;
    height: 46px !important;
    max-width: 125px !important;
  }
}

/* ==================================================
   EL-CREDO MENU CONTRAST FIX V1
   ================================================== */

.site-header.header-type1 .header-action.toggle-button.custom-toggle {
    border: 1px solid var(--ec-border);
    border-radius: 6px;
    background-color: transparent;
}

.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-link,
.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-icon,
.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-icon i,
.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-text,
.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-text p {
    color: var(--ec-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    text-decoration: none;
}

.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-icon i {
    font-size: 18px;
}

.site-header.header-type1 .header-action.toggle-button.custom-toggle .action-text p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.site-header.header-type1 .header-action.toggle-button.custom-toggle:hover {
    border-color: var(--ec-gold);
}

.site-header.header-type1 .header-action.toggle-button.custom-toggle:hover .action-icon i,
.site-header.header-type1 .header-action.toggle-button.custom-toggle:hover .action-text p,
.site-header.header-type1 .header-action.toggle-button.custom-toggle:focus-within .action-icon i,
.site-header.header-type1 .header-action.toggle-button.custom-toggle:focus-within .action-text p {
    color: var(--ec-gold) !important;
}

/* ==================================================
   EL-CREDO MOBILE HEADER V1
   Scoped to Blonwe Header Type 1
   ================================================== */

@media (max-width: 1199px) {

  .site-header.header-type1 .header-mobile-main {
    background-color: var(--ec-bg) !important;
    border-bottom: 1px solid var(--ec-border) !important;
  }

  .site-header.header-type1 .header-mobile-main .header-inner {
    display: grid !important;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
    align-items: center;
    min-height: 66px;
    column-gap: 10px;
  }

  .site-header.header-type1 .header-mobile-main .header-inner > .col {
    min-width: 0;
  }

  .site-header.header-type1 .header-mobile-main .header-inner > .col:first-child {
    justify-content: flex-start;
  }

  .site-header.header-type1 .header-mobile-main .header-inner > .col:nth-child(2) {
    justify-content: center;
  }

  .site-header.header-type1 .header-mobile-main .header-inner > .col:last-child {
    justify-content: flex-end;
  }

  /* Keep the native mobile-menu trigger functional */
  .site-header.header-type1 .header-mobile-main .header-action.toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-header.header-type1 .header-mobile-main .header-action.toggle-button .action-link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ec-text) !important;
    border-radius: 6px;
    text-decoration: none;
  }

  .site-header.header-type1 .header-mobile-main .header-action.toggle-button .action-icon,
  .site-header.header-type1 .header-mobile-main .header-action.toggle-button .action-icon i {
    color: var(--ec-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 22px;
  }

  .site-header.header-type1 .header-mobile-main .header-action.toggle-button .action-link:hover,
  .site-header.header-type1 .header-mobile-main .header-action.toggle-button .action-link:focus-visible {
    color: var(--ec-gold) !important;
  }

  /* Approved EL-CREDO logo */
  .site-header.header-type1 .header-mobile-main .site-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .site-header.header-type1 .header-mobile-main .site-brand a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .site-header.header-type1 .header-mobile-main .site-brand img {
    height: 53px !important;
    max-width: 110px !important;
    width: auto !important;
    object-fit: contain;
  }

  /* Cart area */
  .site-header.header-type1 .header-mobile-main .header-action .action-link {
    color: var(--ec-text) !important;
  }

  .site-header.header-type1 .header-mobile-main .header-action .action-icon,
  .site-header.header-type1 .header-mobile-main .header-action .action-icon i {
    color: var(--ec-text) !important;
  }
}

@media (max-width: 360px) {
  .site-header.header-type1 .header-mobile-main .header-inner {
    column-gap: 6px;
  }

  .site-header.header-type1 .header-mobile-main .site-brand img {
    height: 47px !important;
    max-width: 95px !important;
  }
}

/* ==================================================
   EL-CREDO CATEGORY HOVER V1
   Subtle hover instead of full gold backgrounds
   ================================================== */

body:not([data-theme="dark"]) .site-header.header-type1 {
  --ec-category-hover-bg: #f5f3ee;
  --ec-category-hover-text: #25272b;
}

body[data-theme="dark"] .site-header.header-type1 {
  --ec-category-hover-bg: #303236;
  --ec-category-hover-text: #f5f2ec;
}

/* Browse Categories dropdown links */
.site-header.header-type1 .site-categories li > a:hover,
.site-header.header-type1 .site-categories li:hover > a,
.site-header.header-type1 .sidebar-menu li > a:hover,
.site-header.header-type1 .sidebar-menu li:hover > a {
  background-color: var(--ec-category-hover-bg) !important;
  color: var(--ec-category-hover-text) !important;
  box-shadow: inset 3px 0 0 var(--ec-gold);
}

/* ==================================================
   EL-CREDO CATEGORY HOVER V2
   Actual Blonwe dropdown-categories / #category-menu
   ================================================== */

body[data-theme="light"] .site-header.header-type1 {
  --ec-category-row-bg: #f5f3ee;
  --ec-category-row-text: #25272b;
}

body[data-theme="dark"] .site-header.header-type1 {
  --ec-category-row-bg: #303236;
  --ec-category-row-text: #f5f2ec;
}

.site-header.header-type1 .header-bottom
.dropdown-categories .dropdown-menu #category-menu > li:hover > a,
.site-header.header-type1 .header-bottom
.dropdown-categories .dropdown-menu #category-menu > li > a:hover,
.site-header.header-type1 .header-bottom
.dropdown-categories .dropdown-menu #category-menu > li > a:focus-visible {
  background-color: var(--ec-category-row-bg) !important;
  color: var(--ec-category-row-text) !important;
  box-shadow: inset 3px 0 0 var(--ec-gold) !important;
}

.site-header.header-type1 .header-bottom
.dropdown-categories .dropdown-menu #category-menu > li:hover {
  background-color: var(--ec-category-row-bg) !important;
}

/* Keep category text legible even against theme hover rules */
.site-header.header-type1 .header-bottom
.dropdown-categories .dropdown-menu #category-menu > li:hover > a {
  color: var(--ec-category-row-text) !important;
}

/* ==================================================
   EL-CREDO DESKTOP CATEGORY HOVER V2
   Actual Blonwe #category-menu selectors
   ================================================== */

@media (min-width: 1200px) {

  body:not([data-theme="dark"]) .site-header.header-type1 {
    --ec-category-hover-bg: #f5f3ee;
    --ec-category-hover-text: #25272b;
  }

  body[data-theme="dark"] .site-header.header-type1 {
    --ec-category-hover-bg: #303236;
    --ec-category-hover-text: #f5f2ec;
  }

  .site-header.header-type1 .header-bottom
  .dropdown-categories .dropdown-menu #category-menu > li:hover,
  .site-header.header-type1 .header-bottom
  .dropdown-categories .dropdown-menu #category-menu > li:focus-within {
    background-color: var(--ec-category-hover-bg) !important;
  }

  .site-header.header-type1 .header-bottom
  .dropdown-categories .dropdown-menu #category-menu > li:hover > a,
  .site-header.header-type1 .header-bottom
  .dropdown-categories .dropdown-menu #category-menu > li > a:hover,
  .site-header.header-type1 .header-bottom
  .dropdown-categories .dropdown-menu #category-menu > li > a:focus-visible {
    background-color: var(--ec-category-hover-bg) !important;
    color: var(--ec-category-hover-text) !important;
    box-shadow: inset 3px 0 0 var(--ec-gold) !important;
  }

  /* Keep text readable when nested spans or icons have their own color. */
  .site-header.header-type1 .header-bottom
  .dropdown-categories .dropdown-menu #category-menu > li:hover > a span,
  .site-header.header-type1 .header-bottom
  .dropdown-categories .dropdown-menu #category-menu > li:hover > a i {
    color: var(--ec-category-hover-text) !important;
  }
}

/* ==================================================
   EL-CREDO DESKTOP HEADER CONTRAST V3
   Browse Categories title + Account/Wishlist/Cart
   ================================================== */

@media (min-width: 1200px) {

  /* LIGHT MODE */
  body:not([data-theme="dark"]) .site-header.header-type1 {
    --ec-header-action-ink: #25272b;
    --ec-header-title-hover: #f5f3ee;
  }

  /* DARK MODE */
  body[data-theme="dark"] .site-header.header-type1 {
    --ec-header-action-ink: #f5f2ec;
    --ec-header-title-hover: #303236;
  }

  /* Browse Categories title/button — not dropdown rows */
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle {
    color: var(--ec-header-action-ink) !important;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle:hover,
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle:focus-visible,
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories:hover > a.dropdown-toggle {
    background-color: var(--ec-header-title-hover) !important;
    color: var(--ec-header-action-ink) !important;
  }

  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle .dropdown-menu-text,
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle .dropdown-menu-icon,
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle i {
    color: inherit !important;
  }

  /* Desktop Account, Wishlist, Cart icons and labels */
  .site-header.header-type1 .header-desktop
  .header-main .header-action.login-button > .action-link,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.wishlist-button > .action-link,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.cart-button > .action-link {
    color: var(--ec-header-action-ink) !important;
  }

  .site-header.header-type1 .header-desktop
  .header-main .header-action.login-button .action-icon,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.wishlist-button .action-icon,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.cart-button .action-icon,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.login-button .action-icon i,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.wishlist-button .action-icon i,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.cart-button .action-icon i {
    color: var(--ec-header-action-ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-header.header-type1 .header-desktop
  .header-main .header-action .action-text {
    color: var(--ec-header-action-ink) !important;
  }
}

/* ==================================================
   EL-CREDO GOLD HEADER ACCENTS V1
   Brand gold replaces demo orange on header controls
   ================================================== */

body:not([data-theme="dark"]) .site-header.header-type1 {
  --ec-header-gold: #c89b43;
  --ec-header-gold-hover: #b78934;
}

body[data-theme="dark"] .site-header.header-type1 {
  --ec-header-gold: #d5a64a;
  --ec-header-gold-hover: #e2b85e;
}

/* Desktop header controls */
@media (min-width: 1200px) {

  /* Browse Categories main button */
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle,
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle.gray {
    background-color: var(--ec-header-gold) !important;
    color: #1f1f20 !important;
    border-color: var(--ec-header-gold) !important;
  }

  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle:hover,
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories:hover > a.dropdown-toggle,
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle:focus-visible {
    background-color: var(--ec-header-gold-hover) !important;
    color: #1f1f20 !important;
    border-color: var(--ec-header-gold-hover) !important;
  }

  /* Keep menu icon, arrow and title visible */
  .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle * {
    color: #1f1f20 !important;
  }

  /* Search submit button */
  .site-header.header-type1 .header-desktop
  .header-main .header-search-form .search-form button,
  .site-header.header-type1 .header-desktop
  .header-main .header-search-form button[type="submit"] {
    background-color: var(--ec-header-gold) !important;
    border-color: var(--ec-header-gold) !important;
    color: #1f1f20 !important;
  }

  .site-header.header-type1 .header-desktop
  .header-main .header-search-form .search-form button:hover,
  .site-header.header-type1 .header-desktop
  .header-main .header-search-form button[type="submit"]:hover {
    background-color: var(--ec-header-gold-hover) !important;
    border-color: var(--ec-header-gold-hover) !important;
  }

  .site-header.header-type1 .header-desktop
  .header-main .header-search-form button i,
  .site-header.header-type1 .header-desktop
  .header-main .header-search-form button svg {
    color: #1f1f20 !important;
    stroke: currentColor;
  }

  /* Wishlist and Cart count indicators */
  .site-header.header-type1 .header-desktop
  .header-main .header-action.wishlist-button .action-count,
  .site-header.header-type1 .header-desktop
  .header-main .header-action.cart-button .action-count {
    background-color: var(--ec-header-gold) !important;
    color: #1f1f20 !important;
    border-color: var(--ec-header-gold) !important;
  }
}

/* ==================================================
   EL-CREDO BROWSE BUTTON GOLD V2
   Replace inherited Blonwe orange background
   ================================================== */

@media (min-width: 1200px) {

  body:not([data-theme="dark"]) {
    --ec-browse-gold: #c89b43;
    --ec-browse-gold-hover: #b78934;
  }

  body[data-theme="dark"] {
    --ec-browse-gold: #d5a64a;
    --ec-browse-gold-hover: #e2b85e;
  }

  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle.gray,
  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle {
    background: var(--ec-browse-gold) !important;
    background-color: var(--ec-browse-gold) !important;
    border-color: var(--ec-browse-gold) !important;
    color: #1f1f20 !important;
    background-image: none !important;
  }

  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle::before,
  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle::after {
    background-color: transparent !important;
  }

  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories:hover > a.dropdown-toggle,
  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle:hover,
  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle:focus-visible {
    background: var(--ec-browse-gold-hover) !important;
    border-color: var(--ec-browse-gold-hover) !important;
    color: #1f1f20 !important;
  }

  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle *,
  body .site-header.header-type1 .header-desktop
  .header-bottom .dropdown-categories > a.dropdown-toggle i {
    color: #1f1f20 !important;
  }
}