/*
 * Captain Greek account panel — final pro implementation.
 * Uses unique classes only, so old .customer-menu.acc-list / .customer-name.acc-btn LESS cannot affect it.
 */

@media (min-width: 768px) {
  html body .page-header .header-top-inner .cg-topbar-account > ul.header.links {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body .page-header .header-top-inner .cg-topbar-account {
    position: relative !important;
    z-index: 5200 !important;
  }

  html body .page-header .header-top-inner .cg-topbar-account.is-open .cg-topbar-account-trigger,
  html body .page-header .header-top-inner .cg-topbar-account .cg-topbar-account-trigger[aria-expanded="true"] {
    color: #101828 !important;
    background: #fbf7ee !important;
    border-color: rgba(248, 242, 231, .62) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      0 8px 18px rgba(0,0,0,.16) !important;
    transform: translateY(-1px) !important;
  }

  html body .page-header .header-top-inner .cg-topbar-account.is-open .cg-action-icon,
  html body .page-header .header-top-inner .cg-topbar-account.is-open .cg-action-icon::before,
  html body .page-header .header-top-inner .cg-topbar-account .cg-topbar-account-trigger[aria-expanded="true"] .cg-action-icon,
  html body .page-header .header-top-inner .cg-topbar-account .cg-topbar-account-trigger[aria-expanded="true"] .cg-action-icon::before {
    color: #101828 !important;
  }

  html body .page-header .header-top-inner .cg-topbar-account.is-open .cg-action-caret,
  html body .page-header .header-top-inner .cg-topbar-account .cg-topbar-account-trigger[aria-expanded="true"] .cg-action-caret {
    color: #101828 !important;
    transform: translateY(-1px) rotate(180deg) !important;
  }

  html body .cg-account-pro-panel {
    position: fixed !important;
    top: var(--cg-account-pro-top, 58px) !important;
    right: var(--cg-account-pro-right, 14px) !important;
    left: auto !important;
    bottom: auto !important;

    display: block !important;
    box-sizing: border-box !important;

    width: var(--cg-account-pro-width, 420px) !important;
    min-width: 360px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--cg-account-pro-max-height, calc(100vh - 76px)) !important;

    margin: 0 !important;
    padding: 14px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;

    border-radius: 24px !important;
    border: 1px solid rgba(216, 189, 123, .38) !important;

    background:
      radial-gradient(24rem 9rem at 14% -90%, rgba(216, 189, 123, .20), transparent 68%),
      linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;

    box-shadow:
      0 26px 68px rgba(13, 22, 36, .24),
      inset 0 1px 0 rgba(255,255,255,.82) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) scale(.985) !important;
    transform-origin: top right !important;
    pointer-events: none !important;

    z-index: 9000 !important;

    transition:
      opacity .16s ease,
      visibility .16s ease,
      transform .16s ease !important;
  }

  html body .cg-account-pro-panel.is-open,
  html body .cg-account-pro-panel[aria-hidden="false"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  html body .cg-account-pro-panel[hidden] {
    display: none !important;
  }

  html body .cg-account-pro-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 72px !important;

    margin: 0 0 12px !important;
    padding: 14px 15px !important;

    border-radius: 20px !important;
    border: 1px solid rgba(216, 189, 123, .30) !important;

    color: #111827 !important;
    background:
      radial-gradient(18rem 7rem at 8% -80%, rgba(216, 189, 123, .20), transparent 70%),
      linear-gradient(180deg, #fffaf0 0%, #ffffff 100%) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 8px 20px rgba(13,22,36,.045) !important;
  }

  html body .cg-account-pro-avatar {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    display: grid !important;
    place-items: center !important;

    width: 42px !important;
    height: 42px !important;

    border-radius: 15px !important;
    background:
      radial-gradient(circle at 35% 28%, #fff6dc 0%, #d8bd7b 46%, #b89b65 100%) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 7px 16px rgba(184,155,101,.22) !important;
  }

  html body .cg-account-pro-avatar svg {
    width: 21px !important;
    height: 21px !important;
    stroke: #101828 !important;
  }

  html body .cg-account-pro-eyebrow {
    grid-column: 2 !important;
    grid-row: 1 !important;

    color: #6b7280 !important;
    font-family: var(--cg-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .085em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body .cg-account-pro-name {
    grid-column: 2 !important;
    grid-row: 2 !important;

    color: #111827 !important;
    font-family: var(--cg-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .cg-account-pro-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body .cg-account-pro-item {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 12px !important;
    align-items: center !important;
    column-gap: 13px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 12px 14px !important;

    border-radius: 17px !important;
    border: 1px solid rgba(13, 22, 36, .06) !important;

    color: #172033 !important;
    background: rgba(255,255,255,.82) !important;
    text-decoration: none !important;

    font-family: var(--cg-font, "Inter", "Helvetica Neue", Arial, sans-serif) !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

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

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

  html body .cg-account-pro-item:hover,
  html body .cg-account-pro-item:focus-visible {
    color: #101828 !important;
    background: #fffaf0 !important;
    border-color: rgba(216, 189, 123, .34) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 9px 22px rgba(13,22,36,.075) !important;

    transform: translateY(-1px) !important;
    outline: none !important;
  }

  html body .cg-account-pro-item-icon {
    grid-column: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fffaf0, #fff) !important;
    border: 1px solid rgba(216, 189, 123, .22) !important;
  }

  html body .cg-account-pro-item-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin: 0 !important;
    stroke: #b89b65 !important;
    stroke-width: 2 !important;
    opacity: .98 !important;
  }

  html body .cg-account-pro-item:hover .cg-account-pro-item-icon svg,
  html body .cg-account-pro-item:focus-visible .cg-account-pro-item-icon svg {
    stroke: #101828 !important;
  }

  html body .cg-account-pro-item-label {
    grid-column: 2 !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html body .cg-account-pro-item-arrow {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 7px !important;
    height: 7px !important;
    border-top: 1.8px solid currentColor !important;
    border-right: 1.8px solid currentColor !important;
    transform: rotate(45deg) !important;
    opacity: .34 !important;
  }

  html body .cg-account-pro-divider {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    margin: 4px 0 !important;
    background: linear-gradient(90deg, transparent, rgba(216, 189, 123, .38), transparent) !important;
  }

  html body .cg-account-pro-item--danger {
    color: #7f1d1d !important;
    background: rgba(255, 247, 237, .82) !important;
  }

  html body .cg-account-pro-item--danger .cg-account-pro-item-icon svg {
    stroke: #b45309 !important;
  }

  html body .cg-account-pro-item--danger:hover,
  html body .cg-account-pro-item--danger:focus-visible {
    color: #7f1d1d !important;
    background: #fff7ed !important;
    border-color: rgba(180, 83, 9, .24) !important;
  }

  /*
   * Kill only the old account Magnific popup.
   * Cart modal keeps working because it carries .cart-modal.
   */
  html body .mfp-wrap:not(.cart-modal) .mfp-content > ul.header.links {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) {
  html body .cg-account-pro-panel,
  html body .page-header .header-top-inner .cg-topbar-account > ul.header.links {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .cg-account-pro-panel,
  html body .cg-account-pro-panel *,
  html body .cg-account-pro-panel *::before,
  html body .cg-account-pro-panel *::after {
    transition: none !important;
  }
}