/*
 * Captain Greek top-bar badge contrast fix.
 *
 * Fixes:
 * - Wishlist count becoming invisible when the Wishlist pill turns ivory/white
 * - Cart count becoming invisible when the Cart pill hover state changes
 *
 * Scope: desktop top utility bar only.
 */

@media (min-width: 768px) {
  .page-header .header-top-inner {
    --cg-badge-ink: #101828;
    --cg-badge-cream: #fffaf0;
    --cg-badge-gold: #d8bd7b;
    --cg-badge-gold-2: #b89b65;
    --cg-badge-line: rgba(16, 24, 40, .12);
  }

  /*
   * Base badge shape.
   * Wishlist = direct .counter-number.qty
   * Cart = outer .counter.qty with inner .counter-number
   */
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon > .counter-number.qty,
  .page-header .header-top-inner .minicart-action a.showcart > .counter.qty {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    margin: 0 0 0 1px !important;
    padding: 0 5px !important;

    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-align: center !important;

    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /*
   * Default state on dark top bar:
   * Wishlist badge is champagne with dark text.
   */
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon > .counter-number.qty {
    color: var(--cg-badge-ink) !important;
    background: linear-gradient(180deg, #fff6dc 0%, var(--cg-badge-gold) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
  }

  /*
   * Default state for Cart:
   * Cart pill is already champagne, so the badge should be dark.
   */
  .page-header .header-top-inner .minicart-action a.showcart > .counter.qty {
    color: #fff !important;
    background: var(--cg-badge-ink) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
  }

  .page-header .header-top-inner .minicart-action a.showcart > .counter.qty .counter-number {
    position: static !important;
    display: inline !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    box-shadow: none !important;
  }

  /*
   * Critical fix:
   * When Wishlist turns white/ivory on hover, keep the count dark and visible.
   */
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:hover > .counter-number.qty,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:focus-visible > .counter-number.qty,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:active > .counter-number.qty {
    color: var(--cg-badge-ink) !important;
    background: linear-gradient(180deg, #fff3cf 0%, var(--cg-badge-gold) 100%) !important;
    border-color: var(--cg-badge-line) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .48),
      0 1px 4px rgba(16, 24, 40, .12) !important;
  }

  /*
   * Critical fix:
   * When Cart hover changes the pill surface, force the cart count to stay dark badge / white number.
   */
  .page-header .header-top-inner .minicart-action a.showcart:hover > .counter.qty,
  .page-header .header-top-inner .minicart-action a.showcart:focus-visible > .counter.qty,
  .page-header .header-top-inner .minicart-action a.showcart:active > .counter.qty {
    color: #fff !important;
    background: var(--cg-badge-ink) !important;
    border-color: rgba(16, 24, 40, .18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 1px 4px rgba(16, 24, 40, .16) !important;
  }

  .page-header .header-top-inner .minicart-action a.showcart:hover > .counter.qty .counter-number,
  .page-header .header-top-inner .minicart-action a.showcart:focus-visible > .counter.qty .counter-number,
  .page-header .header-top-inner .minicart-action a.showcart:active > .counter.qty .counter-number {
    color: #fff !important;
    background: transparent !important;
  }

  /*
   * If any older rule colors every child white on hover, this wins.
   */
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:hover > .counter-number.qty,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:hover > .counter-number.qty *,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:focus-visible > .counter-number.qty,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:focus-visible > .counter-number.qty * {
    color: var(--cg-badge-ink) !important;
  }

  .page-header .header-top-inner .minicart-action a.showcart:hover > .counter.qty,
  .page-header .header-top-inner .minicart-action a.showcart:hover > .counter.qty *,
  .page-header .header-top-inner .minicart-action a.showcart:focus-visible > .counter.qty,
  .page-header .header-top-inner .minicart-action a.showcart:focus-visible > .counter.qty * {
    color: #fff !important;
  }

  /*
   * Preserve hidden empty state.
   */
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon > .counter-number.qty.empty,
  .page-header .header-top-inner .minicart-action a.showcart > .counter.qty.empty {
    display: none !important;
  }

  /*
   * Small superscript cleanup for 9+.
   */
  .page-header .header-top-inner .wishlist-topbar sup,
  .page-header .header-top-inner .minicart-action sup {
    position: relative !important;
    top: -.25em !important;
    font-size: 8px !important;
    line-height: 0 !important;
    color: inherit !important;
  }
}