/*
 * Captain Greek top-bar action polish.
 *
 * Fixes:
 * - visible icon color on dark premium top bar
 * - removes Bootstrap row/col spacing conflicts
 * - logical desktop order:
 *   Track Order → Contact → Wishlist → Account → Cart
 * - makes Cart the final/high-intent action
 *
 * Scope: .page-header .header-top-inner only.
 */

@media (min-width: 768px) {
  .page-header .header-top-inner {
    --cg-topbar-ink: #0d1624;
    --cg-topbar-ink-2: #121c2f;
    --cg-topbar-cream: #f8f2e7;
    --cg-topbar-muted: rgba(248, 242, 231, .78);
    --cg-topbar-line: rgba(248, 242, 231, .18);
    --cg-topbar-line-strong: rgba(216, 189, 123, .34);
    --cg-topbar-gold: #d8bd7b;
    --cg-topbar-gold-2: #b89b65;
    --cg-topbar-pill: rgba(255, 255, 255, .065);
    --cg-topbar-pill-hover: #fbf7ee;

    min-height: 46px !important;
  }

  .page-header .header-top-inner .header-top-row {
    min-height: 46px !important;
  }

  /*
   * The original .row/.col utility classes add negative margins/padding.
   * Reset them only inside the top utility strip.
   */
  .page-header .header-top-inner .top-link-wrap,
  .page-header .header-top-inner .top-link-wrap.row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  .page-header .header-top-inner .top-link-wrap > .top-links,
  .page-header .header-top-inner .top-link-wrap > .cg-topbar-commerce-actions,
  .page-header .header-top-inner .cg-topbar-action-group > .col,
  .page-header .header-top-inner .cg-topbar-action-group > .cg-action-col,
  .page-header .header-top-inner .cg-topbar-action-group > .user-topbar {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-header .header-top-inner .cg-topbar-commerce-actions {
    display: flex !important;
    align-items: center !important;
    margin-inline-start: 2px !important;
  }

  .page-header .header-top-inner .cg-topbar-action-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /*
   * Logical flow:
   * Track Order → Contact → Wishlist → Account → Cart.
   * Cart stays last because it is the high-intent action.
   */
  .page-header .header-top-inner .top-link-wrap > .top-links {
    order: 10 !important;
  }

  .page-header .header-top-inner .top-link-wrap > .top-links + .top-links {
    order: 20 !important;
  }

  .page-header .header-top-inner .cg-topbar-commerce-actions {
    order: 30 !important;
  }

  .page-header .header-top-inner .cg-topbar-action-group .col-wishlist {
    order: 30 !important;
  }

  .page-header .header-top-inner .cg-topbar-action-group .cg-topbar-account {
    order: 40 !important;
  }

  .page-header .header-top-inner .cg-topbar-action-group .col-minicart {
    order: 50 !important;
  }

  /*
   * One consistent button system.
   * This overrides old .wishlist-topbar, .minicart-action, .top-links, and button defaults.
   */
  .page-header .header-top-inner .top-links a,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon,
  .page-header .header-top-inner .minicart-action a.action.showcart,
  .page-header .header-top-inner .cg-topbar-account-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 11px !important;

    border-radius: 999px !important;
    border: 1px solid var(--cg-topbar-line) !important;
    background: var(--cg-topbar-pill) !important;
    color: var(--cg-topbar-cream) !important;

    font-family: var(--cg-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .045),
      0 0 0 0 rgba(0, 0, 0, 0) !important;

    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;

    transition:
      color .18s ease,
      background .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      transform .18s ease !important;
  }

  /*
   * Do NOT make Track Order the gold button anymore.
   * The final Cart action gets that emphasis instead.
   */
  .page-header .header-top-inner .top-links:first-child a {
    color: var(--cg-topbar-cream) !important;
    background: var(--cg-topbar-pill) !important;
    border-color: var(--cg-topbar-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  }

  /*
   * Icon visibility fix.
   * The MBI icon font often paints through ::before, so force both the span and pseudo element.
   */
  .page-header .header-top-inner .cg-action-icon,
  .page-header .header-top-inner .cg-action-icon.mbi,
  .page-header .header-top-inner .cg-action-icon::before,
  .page-header .header-top-inner .cg-action-icon.mbi::before,
  .page-header .header-top-inner .wishlist-topbar .mbi::before,
  .page-header .header-top-inner .minicart-action .mbi::before,
  .page-header .header-top-inner .user-topbar .mbi::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: var(--cg-topbar-gold) !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    visibility: visible !important;
  }

  .page-header .header-top-inner .cg-action-label,
  .page-header .header-top-inner .cg-action-caret {
    display: inline-flex !important;
    align-items: center !important;
    color: currentColor !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  .page-header .header-top-inner .cg-action-caret {
    margin-inline-start: -2px !important;
    color: rgba(248, 242, 231, .70) !important;
    font-size: 13px !important;
    transform: translateY(-1px) !important;
  }

  /*
   * Shorten the visible cart label to Cart for spacing.
   * The link still keeps aria-label="Shopping Cart" in the HTML.
   */
  .page-header .header-top-inner .minicart-action a.showcart .cg-action-label {
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  .page-header .header-top-inner .minicart-action a.showcart .cg-action-label::after {
    content: "Cart" !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
  }

  /*
   * Cart is the primary/high-intent action.
   */
  .page-header .header-top-inner .minicart-action a.action.showcart {
    color: #101828 !important;
    background: linear-gradient(180deg, #fff3cf 0%, var(--cg-topbar-gold) 100%) !important;
    border-color: rgba(255, 255, 255, .38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .52),
      0 6px 14px rgba(0, 0, 0, .13) !important;
  }

  .page-header .header-top-inner .minicart-action a.action.showcart .cg-action-icon,
  .page-header .header-top-inner .minicart-action a.action.showcart .cg-action-icon::before,
  .page-header .header-top-inner .minicart-action a.action.showcart .cg-action-icon.mbi::before {
    color: #101828 !important;
  }

  /*
   * Badge normalization.
   * Wishlist has one span.counter-number.qty.
   * Cart has outer span.counter.qty and inner span.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;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .16) !important;
    color: var(--cg-topbar-cream) !important;

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

    box-shadow: none !important;
    transform: none !important;
  }

  .page-header .header-top-inner .minicart-action a.showcart > .counter.qty {
    background: #101828 !important;
    color: #fff !important;
    border-color: 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;
    box-shadow: none !important;
  }

  .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;
  }

  .page-header .header-top-inner .top-links a:hover,
  .page-header .header-top-inner .top-links a:focus-visible,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:hover,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:focus-visible,
  .page-header .header-top-inner .cg-topbar-account-trigger:hover,
  .page-header .header-top-inner .cg-topbar-account-trigger:focus-visible,
  .page-header .header-top-inner .cg-topbar-account.is-open .cg-topbar-account-trigger {
    color: #101828 !important;
    background: var(--cg-topbar-pill-hover) !important;
    border-color: rgba(248, 242, 231, .62) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .55),
      0 8px 18px rgba(0, 0, 0, .16) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  .page-header .header-top-inner .minicart-action a.action.showcart:hover,
  .page-header .header-top-inner .minicart-action a.action.showcart:focus-visible {
    color: #101828 !important;
    background: linear-gradient(180deg, #fff8dc 0%, #e2c98a 100%) !important;
    border-color: rgba(255, 255, 255, .55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .62),
      0 9px 20px rgba(0, 0, 0, .18) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  .page-header .header-top-inner .top-links a:hover .cg-action-icon,
  .page-header .header-top-inner .top-links a:focus-visible .cg-action-icon,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:hover .cg-action-icon,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:focus-visible .cg-action-icon,
  .page-header .header-top-inner .cg-topbar-account-trigger:hover .cg-action-icon,
  .page-header .header-top-inner .cg-topbar-account-trigger:focus-visible .cg-action-icon,
  .page-header .header-top-inner .cg-topbar-account.is-open .cg-action-icon,
  .page-header .header-top-inner .top-links a:hover .cg-action-icon::before,
  .page-header .header-top-inner .wishlist-topbar a.wishlist-icon:hover .cg-action-icon::before,
  .page-header .header-top-inner .cg-topbar-account-trigger:hover .cg-action-icon::before {
    color: #101828 !important;
  }

  /*
   * Prevent old desktop action styling from leaking back in.
   */
  .page-header .header-top-inner .wishlist-topbar a,
  .page-header .header-top-inner .minicart-action a,
  .page-header .header-top-inner .user-topbar > .mbi {
    width: auto !important;
    height: auto !important;
  }

  .page-header .header-top-inner .minicart-action,
  .page-header .header-top-inner .wishlist-topbar {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * The top bar now has many useful actions; keep it refined at tablet widths.
   */
  @media (max-width: 1199px) {
    .page-header .header-top-inner .header-top-row > .d-md-block:first-child {
      display: none !important;
    }

    .page-header .header-top-inner .header-top-row > .col-12 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }

    .page-header .header-top-inner .top-link-wrap {
      justify-content: center !important;
      gap: 6px !important;
    }

    .page-header .header-top-inner .cg-topbar-action-group {
      gap: 6px !important;
    }

    .page-header .header-top-inner .top-links a,
    .page-header .header-top-inner .wishlist-topbar a.wishlist-icon,
    .page-header .header-top-inner .minicart-action a.action.showcart,
    .page-header .header-top-inner .cg-topbar-account-trigger {
      min-height: 29px !important;
      height: 29px !important;
      padding-inline: 9px !important;
      font-size: 10.5px !important;
      letter-spacing: .035em !important;
    }

    .page-header .header-top-inner .minicart-action a.showcart .cg-action-label::after {
      font-size: 10.5px !important;
      letter-spacing: .035em !important;
    }

    .page-header .header-top-inner .cg-action-icon,
    .page-header .header-top-inner .cg-action-icon::before,
    .page-header .header-top-inner .cg-action-icon.mbi::before {
      width: 13px !important;
      min-width: 13px !important;
      height: 13px !important;
      font-size: 13px !important;
    }
  }
}

@media (max-width: 767px) {
  /*
   * Keep mobile separate for now.
   * The desktop top-bar commerce group should not appear on mobile.
   */
  .page-header .header-top-inner .cg-topbar-commerce-actions {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-header .header-top-inner *,
  .page-header .header-top-inner *::before,
  .page-header .header-top-inner *::after {
    transition: none !important;
  }
}