/**
 * ANBuyer unified topbar — shared WP (anbuyer-hb-*) + Flask (.ae-topbar).
 * ding_lan_fixed_20260604.md
 */

:root {
  --ae-header-tool-size: 22px;
  --ae-header-tool-hit: 44px;
}

/* ---- Dark topbar (WP homepage / account / cart) ---- */
.anbuyer-hb-header.ae-topbar,
.anbuyer-hb .anbuyer-hb-header.ae-topbar {
  background: var(--ae-top, #191919);
  color: #fff;
  border-bottom: none;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 0 12px;
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-header-inner,
.anbuyer-hb-header.ae-topbar .ae-topbar-inner {
  max-width: var(--ae-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.anbuyer-hb-header.ae-topbar .ae-topbar-lead {
  flex-shrink: 0;
  min-width: 0;
}

.anbuyer-hb-header.ae-topbar .ae-topbar-lead .ae-mega {
  display: inline-block;
  max-width: 100%;
}

.anbuyer-hb-header.ae-topbar .ae-topbar-lead .anbuyer-hb-all-cats-wrap {
  display: inline-block;
}

.anbuyer-hb-header.ae-topbar .ae-topbar-lead .anbuyer-hb-all-cats-btn,
.anbuyer-hb-header.ae-topbar .ae-topbar-lead .anbuyer-hb-all-cats {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-logo,
.anbuyer-hb-header.ae-topbar .ae-logo {
  font-size: 22px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-logo-text span,
.anbuyer-hb-header.ae-topbar .ae-logo span {
  color: var(--ae-accent, #e43225);
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-logo-img {
  max-height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ---- Unified search capsule ---- */
.anbuyer-hb-header.ae-topbar .anbuyer-hb-search.ae-search,
.ae-header-sticky .ae-search {
  overflow: hidden;
}

.anbuyer-hb-search.ae-search .anbuyer-hb-search-submit,
.anbuyer-hb-search.ae-search .ae-search-submit {
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  border: none;
  border-left: none !important;
  background-color: #222;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  cursor: pointer;
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-search {
  flex: 1;
  min-width: 200px;
  max-width: 720px;
  display: flex;
  align-items: stretch;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 2px solid transparent;
  gap: 0;
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-search:focus-within {
  border-color: #f5a623;
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-search-input {
  border: none;
  border-radius: 0;
  background: #fff;
  color: #222;
}

.anbuyer-hb-header.ae-topbar .anbuyer-hb-search .ae-search-clear {
  color: #333;
}

/* ---- Tool buttons ---- */
.anbuyer-hb-tools.ae-topbar-tools,
.ae-topbar-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.ae-topbar-tools .ae-currency-wrap {
  position: relative;
}

/* Change currency — match Account/Cart white on dark topbar */
.anbuyer-hb-header.ae-topbar .ae-currency-trigger,
.ae-topbar .ae-currency-trigger {
  color: #fff !important;
  min-width: var(--ae-header-tool-hit, 44px);
  min-height: var(--ae-header-tool-hit, 44px);
  font-size: 13px;
  font-weight: 500;
}

.anbuyer-hb-header.ae-topbar .ae-currency-trigger:hover,
.ae-topbar .ae-currency-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.anbuyer-hb-header.ae-topbar .ae-currency-trigger .header-store-right-icon-span,
.anbuyer-hb-header.ae-topbar .ae-currency-trigger-label,
.ae-topbar .ae-currency-trigger .header-store-right-icon-span,
.ae-topbar .ae-currency-trigger-label {
  color: #fff !important;
}

.anbuyer-hb-header.ae-topbar .ae-currency-trigger .header-store-right-icon,
.ae-topbar .ae-currency-trigger .header-store-right-icon {
  color: #fff;
}

.ae-tool,
.anbuyer-hb-tools.ae-topbar-tools > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--ae-header-tool-hit);
  min-height: var(--ae-header-tool-hit);
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.ae-tool:hover,
.anbuyer-hb-header.ae-topbar .anbuyer-hb-tools > a:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none !important;
  transform: none;
}

.ae-tool-icon {
  display: block;
  flex-shrink: 0;
  width: var(--ae-header-tool-size);
  height: var(--ae-header-tool-size);
  color: #fff;
}

.ae-tool-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ae-header-tool-size);
  height: var(--ae-header-tool-size);
}

.ae-tool--cart .ae-cart-badge,
.ae-cart-link .ae-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ae-accent, #e43225);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.ae-tool-label--cart {
  display: none;
}

.anbuyer-hb-header.ae-topbar .anbuyer-cs-link {
  min-width: var(--ae-header-tool-hit);
  min-height: var(--ae-header-tool-hit);
}

.anbuyer-hb-header.ae-topbar .anbuyer-cs-link img {
  width: 22px !important;
  height: 22px !important;
}

/* Nav row under dark header stays light */
.anbuyer-hb-nav {
  background: #f8fafc;
}

/* ---- Mobile: search full width row 2 (Flask + WP, ≤900px) ---- */
@media (max-width: 900px) {
  .anbuyer-hb-header.ae-topbar .anbuyer-hb-header-inner,
  .anbuyer-hb-header.ae-topbar .ae-topbar-inner,
  .ae-header-sticky > .ae-topbar .ae-topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 10px;
    align-items: center;
  }

  .ae-topbar-lead,
  .anbuyer-hb-header.ae-topbar .ae-topbar-lead {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-self: start;
    z-index: 2;
  }

  .anbuyer-hb-header.ae-topbar .ae-topbar-lead .ae-mega {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* Logo 横跨第一行居中（标准手机顶栏），避免与右侧工具 icon 抢列宽 */
  .ae-logo,
  .anbuyer-hb-header.ae-topbar .anbuyer-hb-logo {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    font-size: 16px;
    text-align: center;
    max-width: calc(100% - 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    pointer-events: auto;
  }

  .ae-topbar-tools,
  .anbuyer-hb-header.ae-topbar .anbuyer-hb-tools {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 0;
    z-index: 2;
  }

  .ae-topbar-tools .ae-currency-wrap {
    flex-shrink: 0;
    order: 99;
  }

  .ae-topbar-tools .ae-currency-trigger {
    padding: 6px 8px;
  }

  .ae-search,
  .anbuyer-hb-header.ae-topbar .anbuyer-hb-search {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    max-width: none;
    width: 100%;
    border-radius: 18px;
  }

  .anbuyer-hb-header.ae-topbar .anbuyer-hb-image-search-wrap {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .ae-tool-label,
  .ae-account-text,
  .ae-tool-label--cart {
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    display: none;
  }

  /* 手机顶栏位不足：客服仍可通过页内 float 入口；顶栏只保留账户/购物车/货币 icon */
  .anbuyer-hb-header.ae-topbar .anbuyer-cs-link--header,
  .ae-topbar-tools .anbuyer-cs-link--header,
  .ae-topbar-tools .ae-cs-link {
    display: none;
  }

  .ae-tool,
  .anbuyer-hb-tools.ae-topbar-tools > a {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
  }

  .anbuyer-hb-header.ae-topbar .anbuyer-cs-link--header {
    min-width: 36px;
    min-height: 36px;
    padding: 7px;
  }
}

@media (max-width: 480px) {
  .ae-tool-label,
  .ae-account-text {
    display: none;
  }

  .ae-tool,
  .anbuyer-hb-tools.ae-topbar-tools > a {
    min-width: 44px;
    padding: 8px;
  }
}