@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
    --ms-blue: #1677ff;
    --ms-blue-dark: #0a62d8;
    --ms-text: #17253a;
    --ms-muted: #68788d;
    --ms-border: #dfe6ee;
    --ms-white: #ffffff;
    --ms-page: #f1f4f8;
}

.ms-header,
.ms-header * {
    box-sizing: border-box;
}

.ms-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 900;
    color: var(--ms-text);
    background: var(--ms-white);
    border-bottom: 1px solid var(--ms-border);
    font-family: "Plus Jakarta Sans", sans-serif;
}

.ms-header svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ms-desktop-header {
    width: 100%;
    max-width: 1460px;
    min-height: 72px;
    margin: 0 auto;
    padding: 0 22px;
    display: grid;
    grid-template-columns: 175px minmax(250px, 360px) minmax(500px, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.ms-brand {
    display: flex;
    align-items: center;
}

.ms-brand img {
    width: 168px;
    height: 48px;
    object-fit: contain;
}

.ms-search-form {
    height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 24px;
    background: #f1f4f7;
    transition: .2s ease;
}

.ms-search-form:focus-within {
    border-color: #b7d5ff;
    background: var(--ms-white);
    box-shadow: 0 0 0 4px rgba(22, 119, 255, .08);
}

.ms-search-icon {
    color: #8391a3;
    display: flex;
}

.ms-search-form input {
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    color: var(--ms-text);
    background: transparent;
    font: 500 11px/1 "Plus Jakarta Sans", sans-serif;
}

.ms-primary-nav {
    height: 72px;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.ms-primary-nav > a,
.ms-more-menu > summary {
    min-width: 77px;
    height: 72px;
    padding: 7px 9px 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: var(--ms-muted);
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    text-decoration: none;
    list-style: none;
    font: 700 9px/1.2 "Plus Jakarta Sans", sans-serif;
    transition: .2s ease;
}

.ms-primary-nav > a:hover,
.ms-more-menu > summary:hover,
.ms-primary-nav > a.active,
.ms-more-menu > summary.active {
    color: var(--ms-blue);
    background: #f7faff;
    border-bottom-color: var(--ms-blue);
}

.ms-primary-nav b,
.ms-drawer-grid b,
.ms-bottom-nav b {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    background: #f04464;
    font-size: 7px;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(240, 68, 100, .28);
}

.ms-primary-nav > a b {
    top: 8px;
    right: 12px;
}

.ms-more-menu {
    position: relative;
}

.ms-more-menu > summary::-webkit-details-marker {
    display: none;
}

.ms-more-panel {
    width: 245px;
    padding: 9px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    border: 1px solid var(--ms-border);
    border-radius: 14px;
    background: var(--ms-white);
    box-shadow: 0 20px 50px rgba(23, 37, 58, .16);
}

.ms-more-panel::before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: -7px;
    right: 28px;
    transform: rotate(45deg);
    border-left: 1px solid var(--ms-border);
    border-top: 1px solid var(--ms-border);
    background: var(--ms-white);
}

.ms-more-panel a {
    min-height: 62px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    color: var(--ms-muted);
    background: #f7f9fc;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
}

.ms-more-panel a:hover,
.ms-more-panel a.active {
    color: var(--ms-blue);
    background: #edf5ff;
}

.ms-account-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-account-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ms-text);
    text-decoration: none;
}

.ms-avatar,
.ms-drawer-avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #1677ff, #18a957);
    font-weight: 800;
}

.ms-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 13px;
}

.ms-avatar img,
.ms-drawer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ms-account-text {
    max-width: 116px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ms-account-text strong,
.ms-account-text small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ms-account-text strong {
    font-size: 9px;
}

.ms-account-text small {
    margin-top: 3px;
    color: #8b98a8;
    font-size: 7px;
}

.ms-logout {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #d74646;
    background: #fff0f0;
}

.ms-login-button {
    min-height: 40px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: var(--ms-blue);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.ms-mobile-header,
.ms-mobile-search,
.ms-mobile-drawer,
.ms-drawer-overlay,
.ms-bottom-nav {
    display: none;
}

@media (max-width: 1180px) {
    .ms-desktop-header {
        grid-template-columns: 155px minmax(220px, 1fr) auto auto;
    }

    .ms-brand img {
        width: 150px;
    }

    .ms-primary-nav > a,
    .ms-more-menu > summary {
        min-width: 68px;
    }

    .ms-account-text {
        display: none;
    }
}

@media (max-width: 900px) {
    body {
        padding-bottom: 72px !important;
    }

    .ms-desktop-header {
        display: none;
    }

    .ms-mobile-header {
        height: 61px;
        padding: 0 12px;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 7px;
        background: #fff;
    }

    .ms-mobile-logo {
        justify-self: center;
        display: flex;
        align-items: center;
    }

    .ms-mobile-logo img {
        width: 148px;
        height: 42px;
        object-fit: contain;
    }

    .ms-mobile-icon-button {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 12px;
        color: var(--ms-blue);
        background: #edf5ff;
    }

    .ms-search-button {
        justify-self: end;
        color: #fff;
        background: linear-gradient(135deg, #1677ff, #6a4cff);
        box-shadow: 0 7px 18px rgba(22, 119, 255, .24);
    }

    .ms-mobile-search {
        width: 100%;
        padding: 0 12px;
        position: absolute;
        top: 61px;
        left: 0;
        z-index: 910;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        display: block;
        transition: .22s ease;
        pointer-events: none;
    }

    .ms-mobile-search.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .ms-mobile-search form {
        height: 52px;
        padding: 0 9px 0 14px;
        display: flex;
        align-items: center;
        gap: 9px;
        border: 1px solid #cfe0f7;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 15px 35px rgba(23, 37, 58, .16);
    }

    .ms-mobile-search form > span {
        color: var(--ms-blue);
        display: flex;
    }

    .ms-mobile-search input {
        min-width: 0;
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        color: var(--ms-text);
        font-size: 12px;
    }

    .ms-mobile-search button {
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 10px;
        color: #8a97a6;
        background: #eef2f6;
        font-size: 20px;
    }

    .ms-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 940;
        display: block;
        opacity: 0;
        visibility: hidden;
        background: rgba(8, 24, 44, .6);
        backdrop-filter: blur(4px);
        transition: .25s ease;
    }

    .ms-drawer-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .ms-mobile-drawer {
        width: min(88vw, 360px);
        height: 100vh;
        padding: 15px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 950;
        overflow-y: auto;
        transform: translateX(-104%);
        display: block;
        color: var(--ms-text);
        background: #fff;
        box-shadow: 25px 0 60px rgba(8, 24, 44, .25);
        transition: .28s cubic-bezier(.2, .8, .2, 1);
    }

    .ms-mobile-drawer.active {
        transform: translateX(0);
    }

    .ms-drawer-head {
        padding: 3px 2px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid var(--ms-border);
    }

    .ms-drawer-user {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--ms-text);
        text-decoration: none;
    }

    .ms-drawer-avatar {
        width: 49px;
        height: 49px;
        flex: 0 0 49px;
        font-size: 17px;
    }

    .ms-drawer-user > span:last-child {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .ms-drawer-user strong,
    .ms-drawer-user small {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ms-drawer-user strong {
        font-size: 13px;
    }

    .ms-drawer-user small {
        margin-top: 4px;
        color: var(--ms-muted);
        font-size: 9px;
    }

    .ms-drawer-head button {
        width: 35px;
        height: 35px;
        border: none;
        border-radius: 11px;
        color: #d74646;
        background: #fff0f0;
        font-size: 22px;
    }

    .ms-drawer-grid {
        padding: 17px 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
    }

    .ms-drawer-grid a {
        min-height: 87px;
        padding: 11px 7px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        overflow: hidden;
        border-radius: 16px;
        color: #fff;
        text-decoration: none;
        font-size: 9px;
        font-weight: 800;
        box-shadow: 0 10px 22px rgba(23, 37, 58, .14);
    }

    .ms-drawer-grid a::after {
        content: "";
        width: 52px;
        height: 52px;
        position: absolute;
        top: -26px;
        right: -20px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .2);
    }

    .ms-drawer-grid a svg {
        width: 25px;
        height: 25px;
    }

    .ms-drawer-grid a.blue { background: linear-gradient(135deg, #1677ff, #0d5bd0); }
    .ms-drawer-grid a.purple { background: linear-gradient(135deg, #7758ff, #5a38e0); }
    .ms-drawer-grid a.green { background: linear-gradient(135deg, #18b86a, #078d4a); }
    .ms-drawer-grid a.orange { background: linear-gradient(135deg, #ff9c38, #e56b19); }
    .ms-drawer-grid a.pink { background: linear-gradient(135deg, #f64b84, #d72d66); }
    .ms-drawer-grid a.cyan { background: linear-gradient(135deg, #10b9d9, #0789af); }

    .ms-drawer-grid b {
        top: 7px;
        right: 7px;
    }

    .ms-drawer-list {
        padding: 3px 0 20px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .ms-drawer-list a {
        min-height: 46px;
        padding: 0 13px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 12px;
        color: var(--ms-muted);
        background: #f6f8fb;
        text-decoration: none;
        font-size: 10px;
        font-weight: 700;
    }

    .ms-drawer-list a:hover {
        color: var(--ms-blue);
        background: #edf5ff;
    }

    .ms-drawer-list a.danger {
        color: #d74646;
        background: #fff0f0;
    }

    .ms-bottom-nav {
        height: 66px;
        padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 920;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        border-top: 1px solid #dfe6ee;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -8px 28px rgba(23, 37, 58, .1);
        backdrop-filter: blur(14px);
    }

    .ms-bottom-nav > a {
        min-width: 0;
        height: 53px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border-radius: 11px;
        color: #78879a;
        text-decoration: none;
        font-size: 7px;
        font-weight: 800;
    }

    .ms-bottom-nav > a.active {
        color: var(--ms-blue);
        background: #edf5ff;
    }

    .ms-bottom-nav > a b {
        top: 1px;
        right: calc(50% - 24px);
    }

    .ms-bottom-nav .ms-bottom-sell {
        width: 57px;
        height: 57px;
        margin: -21px auto 0;
        justify-self: center;
        color: #fff;
        border: 5px solid #fff;
        border-radius: 50%;
        background: linear-gradient(135deg, #1677ff, #6d4cff);
        box-shadow: 0 10px 24px rgba(22, 119, 255, .34);
    }

    .ms-bottom-nav .ms-bottom-sell.active {
        color: #fff;
        background: linear-gradient(135deg, #0a62d8, #5033d9);
    }

    .ms-bottom-nav .ms-bottom-sell span {
        display: none;
    }
}

@media (max-width: 370px) {
    .ms-mobile-logo img {
        width: 130px;
    }

    .ms-drawer-grid a {
        min-height: 78px;
    }
}


/* Notifications and saved products */
.ms-notification-link {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ms-muted);
    background: #f1f4f7;
    text-decoration: none;
    transition: .2s ease;
}

.ms-notification-link:hover,
.ms-notification-link.active {
    color: var(--ms-blue);
    background: #edf5ff;
}

.ms-notification-link b {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    position: absolute;
    top: -3px;
    right: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    background: #f04464;
    font-size: 7px;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(240, 68, 100, .28);
}

.ms-drawer-grid .red {
    color: #d93858;
    background: #fff0f4;
}

.ms-drawer-grid .yellow {
    color: #a36a00;
    background: #fff7df;
}

/* Help Center + live cart badge */
.ms-primary-nav b[hidden],
.ms-drawer-grid b[hidden],
.ms-bottom-nav b[hidden] {
    display: none !important;
}

.ms-drawer-grid a.help-color {
    color: #6d4aff;
    background: linear-gradient(145deg, #f0edff, #e1f0ff);
}

.ms-drawer-grid a.help-color:hover {
    background: linear-gradient(145deg, #e8e1ff, #d8ebff);
}

@media (max-width: 1320px) and (min-width: 901px) {
    .ms-desktop-header {
        grid-template-columns: 150px minmax(210px, 310px) minmax(520px, 1fr) auto;
        gap: 12px;
        padding: 0 14px;
    }

    .ms-primary-nav > a,
    .ms-more-menu > summary {
        min-width: 66px;
        padding-left: 6px;
        padding-right: 6px;
    }
}


/* Compact colorful 3D More app grid */
.ms-more-panel{width:440px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:11px;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 24px 65px rgba(19,43,78,.22)}
.ms-more-panel a{min-height:67px;padding:9px 7px;align-items:center;text-align:center;border:1px solid rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 15px rgba(31,62,103,.10);transform:translateY(0);transition:.2s ease}
.ms-more-panel a svg{width:22px;height:22px}.ms-more-panel a:hover{transform:translateY(-3px);box-shadow:0 12px 22px rgba(31,62,103,.17)}
.ms-more-panel a:nth-child(6n+1){color:#1267e8;background:linear-gradient(145deg,#eef6ff,#dceaff)}.ms-more-panel a:nth-child(6n+2){color:#6d42d8;background:linear-gradient(145deg,#f5f0ff,#e9ddff)}.ms-more-panel a:nth-child(6n+3){color:#0c9463;background:linear-gradient(145deg,#eafff6,#d7f8e9)}.ms-more-panel a:nth-child(6n+4){color:#d56a18;background:linear-gradient(145deg,#fff6e8,#ffe7c5)}.ms-more-panel a:nth-child(6n+5){color:#d43f6d;background:linear-gradient(145deg,#fff0f5,#ffdce8)}.ms-more-panel a:nth-child(6n){color:#1677ff;background:linear-gradient(145deg,#eef4ff,#dce7ff)}
.ms-avatar,.ms-drawer-avatar{position:relative;overflow:visible}.ms-avatar>img,.ms-drawer-avatar>img{overflow:hidden;border-radius:50%}.ms-achievement-stars{position:absolute;right:-7px;bottom:-5px;display:flex;gap:1px;padding:3px 5px;border:2px solid #fff;border-radius:20px;background:#1677ff;box-shadow:0 5px 12px rgba(22,119,255,.3);z-index:3}.ms-achievement-stars i{color:#ffd84d;font-size:8px;font-style:normal;line-height:1}
@media(max-width:1180px){.ms-more-panel{right:-120px}}