/* Desktop header: utility strip, main row (logo, search, actions) and the category bar below it.
   The mobile header lives in header.css; this file only styles what is visible from 992px up. */

.desktop-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: box-shadow .2s ease;
}
.desktop-header.scrolled { box-shadow: var(--sh-2); }

/* ---- utility strip: phone on the left, "sell" link and language on the right ---- */
.top-info-bar {
  height: 34px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary, #E97C43) 6%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--primary, #E97C43) 16%, #fff);
  transition: height .2s ease, opacity .2s ease;
}
.top-info-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.strip-start, .strip-end { display: flex; align-items: center; gap: 4px; }
.strip-mid { font-size: 12.5px; font-weight: 700; color: var(--primary-dark, #D96A32); }
.strip-mid i { margin-right: 6px; }
.strip-sell { color: var(--primary-dark, #D96A32); font-weight: 700; }
.strip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #4B5563;
  text-decoration: none;
}
.strip-link i { font-size: 12px; color: var(--primary); }
.strip-link:hover { color: var(--primary-dark, #D96A32); background: color-mix(in srgb, var(--primary, #E97C43) 12%, #fff); }
.desktop-header.compact .top-info-bar { height: 0; opacity: 0; border: 0; }

/* ---- main row ---- */
.main-nav { position: relative; z-index: 1300; padding: 14px 0; }
.main-nav-inner { display: flex; align-items: center; gap: 28px; }
.logo-container { flex: none; display: flex; align-items: center; }
.logo-img { height: 52px; width: auto; object-fit: contain; }
.main-nav-inner .desktop-search-container { flex: 1; max-width: none; margin: 0; }

.user-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.user-action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 62px;
  height: 52px;
  padding: 0 8px;
  border-radius: 12px;
  color: #1F2937;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.user-action i { font-size: 20px; }
.user-action span { font-size: 11.5px; font-weight: 600; }
.user-action:hover { background: color-mix(in srgb, var(--primary, #E97C43) 10%, #fff); color: var(--primary-dark, #D96A32); }
.cart-count-badge {
  position: absolute;
  top: 3px;
  right: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* signed out: one clear button */
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin-left: 8px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.account-btn:hover { background: var(--primary-dark); }

/* signed in: avatar + first name, menu opens on hover or keyboard focus */
.account-menu { position: relative; margin-left: 6px; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px 0 6px;
  border: 1.5px solid #E5E7EB;
  border-radius: 999px;
  color: #1F2937;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.account-trigger i { font-size: 10px; opacity: .55; }
.account-menu:hover .account-trigger,
.account-menu:focus-within .account-trigger { border-color: var(--primary); background: color-mix(in srgb, var(--primary, #E97C43) 6%, #fff); }
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.account-text { display: flex; flex-direction: column; line-height: 1.15; max-width: 96px; }
.account-text small { font-size: 10.5px; font-weight: 500; color: #6b7280; }
.account-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1100;
  min-width: 190px;
  padding: 6px;
  margin-top: 6px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sh-2);
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.account-dropdown::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown { visibility: visible; opacity: 1; transform: none; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #1F2937;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.dropdown-item i { width: 16px; font-size: 14px; color: var(--primary); }
.dropdown-item:hover { background: color-mix(in srgb, var(--primary, #E97C43) 10%, #fff); color: var(--primary-dark, #D96A32); }
.dropdown-item.is-danger, .dropdown-item.is-danger i { color: #B91C1C; }
.dropdown-item.is-danger:hover { background: #FEF2F2; }

/* ---- category bar ---- */
.categories-nav { border-top: 1px solid #ECECF0; border-bottom: 1px solid #ECECF0; }
.desktop-header.compact .categories-nav { height: 0; opacity: 0; border: 0; visibility: hidden; }

/* ---- search: voice button inside the box ---- */
.desktop-search-wrapper { display: flex; align-items: center; min-height: 50px; }
.desktop-search-mic {
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: 6px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--primary);
  font-size: 17px;
  cursor: pointer;
  transition: background .15s ease;
}
.desktop-search-mic:hover { background: color-mix(in srgb, var(--primary, #E97C43) 12%, #fff); }