/* Keep mobile header rules at Flatsome's breakpoint; share the account drawer on the homepage. */
.cw-menu { display: none; }

/* Reuse the Main footer's actual bold face, including on other account pages. */
@font-face {
  font-family: 'CWM Mood Jellypen Bold';
  src: url('../../../../plugins/calliwish-main/assets/fonts/CallifontDaynoteJellypen-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@media screen and (max-width: 849px) {
  /* Preserve header height and logo size while centering independently of side items. */
  #header #masthead .header-inner { position: relative; }
  #header #masthead #logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: calc(100% - 112px);
    text-align: center;
  }
  #header #masthead #logo img { margin-inline: auto; }
  #header #masthead .show-for-medium.flex-left { margin-right: auto; order: 1; }
  #header #masthead .show-for-medium.flex-right { margin-left: auto; order: 3; }
  #header .mobile-nav > li:not(:has([data-open="#main-menu"])),
  #header .show-for-medium .cart-item,
  #header .show-for-medium .header-search,
  #header .show-for-medium .search-form,
  #header .show-for-medium .search-form-categories,
  #header .show-for-medium .searchform-wrapper { display: none !important; }
  #header .mobile-nav [data-open="#main-menu"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The Main plugin has its own visible header and hides Flatsome's header. */
  .cwm-main .cwm-header > .cwm-home {
    position: absolute;
    left: 50%;
    top: calc(50% + env(safe-area-inset-top, 0px) / 2);
    transform: translate(-50%, -50%);
    max-width: calc(100% - 112px);
  }
  .cwm-main .cwm-header-actions { margin-right: 0; margin-left: auto; }
  .cwm-main .cwm-header-actions > :not([data-cwm-menu-toggle]) { display: none !important; }
  body.home.cwm-main-active .cwm-main .cwm-header-actions > .cwm-native-actions,
  body.home.cwm-main-active .cwm-main .cwm-header-actions > .cwm-account-fallback { display: flex !important; }
  body.home.cwm-main-active .cwm-main .cwm-native-actions > li:not(.account-item) { display: none !important; }
  body.home.cwm-main-active .cwm-main .cwm-native-actions > .account-item { display: block !important; }
  body.home.cwm-main-active .cwm-main .cwm-account-fallback .cwm-signup { display: none !important; }
}

body.home.cwm-main-active .cwm-main .cwm-menu-toggle { display: none !important; }
body.home.cwm-main-active .cwm-main .account-item > .nav-dropdown { display: none !important; }

@media screen {
  .cw-mobile-popup {
    --cw-accent: var(--calliwish-primary, var(--cw-primary, #6335ce));
    --cw-lavender: var(--calliwish-lavender, var(--cw-soft, #f0ebfc));
    --cw-radius: var(--calliwish-card-radius, var(--cw-radius-md, 17px));
    --cw-drawer-width: min(80vw, 420px);
    --cw-drawer-offset: 100%;
  }
  .cw-mobile-popup.mfp-bg { background: #25232e; }
  .cw-mobile-popup.mfp-bg.mfp-ready { opacity: .58; }
  .cw-mobile-popup.mfp-wrap {
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: clip !important;
  }
  .cw-mobile-popup .mfp-container { padding: 0; }
  .cw-mobile-popup .mfp-container::before { display: none; }
  .cw-mobile-popup.mfp-wrap .mfp-content {
    position: absolute;
    inset: 0 0 0 auto !important;
    width: var(--cw-drawer-width);
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 26px 0 0 26px;
    background: #fdfcff;
    box-shadow: -8px 0 36px rgb(32 21 62 / 12%);
    opacity: 1;
    transform: translateX(var(--cw-drawer-offset));
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  body.cw-mobile-menu .cw-mobile-popup.mfp-wrap:has(#main-menu) .mfp-content {
    width: var(--cw-drawer-width);
    max-width: 100%;
    background: #fdfcff;
    box-shadow: -8px 0 36px rgb(32 21 62 / 12%);
  }
  body .cw-mobile-popup.mfp-bg.main-menu-overlay { background: #25232e; }
  body .cw-mobile-popup.mfp-bg.mfp-ready { opacity: .58; }
  .cw-mobile-popup.mfp-ready .mfp-content { transform: translateX(0); }
  .cw-mobile-popup.mfp-removing .mfp-content {
    transform: translateX(var(--cw-drawer-offset));
    opacity: 1 !important;
  }
  body .cw-mobile-popup #main-menu {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
  }
  body .cw-mobile-popup #main-menu::before { display: none; content: none; }
  .cw-mobile-popup #main-menu > .sidebar-menu { display: none; }
  .cw-mobile-popup .mfp-close { display: none; }
  .cw-mobile-popup .cw-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 20px;
    color: #292735;
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
  }
  .cw-menu::-webkit-scrollbar { display: none; }
  .cw-menu *, .cw-menu *::before, .cw-menu *::after { box-sizing: border-box; }
  .cw-menu a { color: inherit; text-decoration: none; letter-spacing: normal; }
  .cw-menu a:focus-visible, .cw-menu button:focus-visible {
    outline: 2px solid var(--cw-accent);
    outline-offset: 3px;
  }
  .cw-menu__header { position: relative; padding: 5px 44px 26px 12px; flex: none; }
  .cw-menu__brand { display: inline-block; max-width: 100%; color: var(--cw-accent) !important; }
  .cw-menu__brand img { display: block; width: 170px; max-width: 100%; height: auto; max-height: 56px; object-fit: contain; object-position: left center; }
  .cw-menu__brand > span { font-size: clamp(24px, 7.4vw, 34px); font-weight: 800; font-style: italic; letter-spacing: -1.6px; }
  .cw-menu .cw-menu__tagline { margin: 5px -28px 0 0; font-size: 11px; color: #797583; word-break: keep-all; }
  .cw-menu__tagline span { color: #9c80e4; font-size: 15px; }
  .cw-menu .cw-menu__close {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 11px;
    border: 0;
    border-radius: 50%;
    background: #f4f1f9;
    color: #575160;
    box-shadow: none;
    line-height: 1;
  }
  .cw-menu__close svg { width: 22px; height: 22px; pointer-events: none; }
  .cw-menu__profile {
    display: flex;
    align-items: center;
    flex: none;
    gap: 14px;
    min-height: 104px;
    padding: 18px 14px;
    margin-bottom: 18px;
    border-radius: var(--cw-radius);
    background: #f3effd;
  }
  .cw-menu__avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: #e6dcfc; }
  .cw-menu__avatar svg { width: 30px; height: 30px; fill: #a084e9; }
  .cw-menu__identity { display: block; min-width: 0; flex: 1; }
  .cw-menu__identity strong { display: block; color: #27232e; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
  .cw-menu__identity > span { display: block; margin-top: 5px; color: #807a8d; font-size: 11px; line-height: 1.65; word-break: keep-all; }
  .cw-menu__arrow { flex: 0 0 17px; width: 17px; height: 17px; color: #696171; }
  .cw-menu__navigation { flex: none; }
  .cw-menu .cw-menu__links, .cw-menu .cw-menu__links ul { list-style: none; padding: 0; margin: 0; }
  .cw-menu .cw-menu__links li { margin: 0 0 8px; padding: 0; border: 0; list-style: none; }
  .cw-menu .cw-menu__links li > a, .cw-menu__logout > a {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 49px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--cw-radius);
    background: #f7f5fa;
    color: #2c2834;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    transition: background-color .15s, color .15s;
  }
  .cw-menu .cw-menu__links li.is-active > a {
    background: var(--cw-lavender);
    color: var(--cw-accent);
  }
  .cw-menu__icon { flex: 0 0 22px; width: 22px; height: 22px; }
  .cw-menu__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .cw-menu__links a > .cw-menu__arrow { margin-left: auto; color: inherit; opacity: .7; }
  .cw-menu__links .children { padding: 8px 0 0 12px !important; }
  .cw-menu__logout { flex: none; margin-top: 18px; border-top: 1px solid #ebe7f0; padding-top: 20px; }
  .cw-menu__logout[hidden] { display: none; }
  /* Do not expose custom logged-out logout links before enhancement. */
  .cw-menu[data-logged-in="false"] [class*="customer-logout"] { display: none; }
  .cw-menu__footer {
    position: relative;
    flex: 1 0 142px;
    min-height: 142px;
    margin: 18px calc(-1 * max(20px, env(safe-area-inset-right))) 0 -20px;
    padding: 32px 22px max(34px, env(safe-area-inset-bottom));
    isolation: isolate;
    color: #aa92d9;
  }
  .cw-menu__waves { position: absolute; inset: auto 0 0; z-index: -1; width: 100%; height: 140px; color: #e8defb; }
  .cw-menu .cw-menu__footer p { margin: 0 0 0 auto; width: fit-content; color: #9f87cf; line-height: 1.4; transform: rotate(-8deg); }
  #main-menu .cw-menu .cw-menu__footer p,
  #main-menu .cw-menu .cw-menu__footer p span {
    font-family: 'CWM Mood Jellypen Bold' !important;
    font-weight: 700;
  }
  #main-menu .cw-menu .cw-menu__footer p {
    font-size: 20px !important;
  }
  #main-menu .cw-menu .cw-menu__footer p span {
    font-size: 17px !important;
  }
  /* Calliwish Main uses 767px as the phone/tablet boundary. Restore the original phone drawer. */
  @media (max-width: 767px) {
    body.home.cwm-main-active .cwm-main .cwm-header-actions {
      margin-left: 0;
      margin-right: auto;
    }
    .cw-mobile-popup { --cw-drawer-offset: -100%; }
    .cw-mobile-popup.mfp-wrap .mfp-content {
      inset: 0 auto 0 0 !important;
      border-radius: 0 26px 26px 0;
      box-shadow: 8px 0 36px rgb(32 21 62 / 12%);
    }
    body.cw-mobile-menu .cw-mobile-popup.mfp-wrap:has(#main-menu) .mfp-content {
      box-shadow: 8px 0 36px rgb(32 21 62 / 12%);
    }
    .cw-mobile-popup .cw-menu {
      padding: max(28px, env(safe-area-inset-top)) 20px 0 max(20px, env(safe-area-inset-left));
    }
    .cw-menu__footer {
      margin: 18px -20px 0 calc(-1 * max(20px, env(safe-area-inset-left)));
    }
  }
  @media (hover: hover) {
    .cw-menu .cw-menu__links a:hover, .cw-menu__logout > a:hover { background: #eee8f9; }
    .cw-menu .cw-menu__close:hover { background: #eae3f7; }
  }
  @media (max-width: 360px) {
    .cw-mobile-popup .cw-menu { padding-inline: 15px; }
    .cw-menu__profile { gap: 10px; padding-inline: 12px; }
    .cw-menu__avatar { flex-basis: 44px; width: 44px; height: 44px; }
    .cw-menu__identity strong { font-size: 14px; }
    .cw-menu .cw-menu__tagline { font-size: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cw-mobile-popup, .cw-mobile-popup .mfp-content, .cw-menu a { transition: none !important; }
  }
}