/* =========================================================
   Alina Handicrafts — AliExpress Style Category Mega Menu
   ========================================================= */

.cp-aliexpress-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: min(1180px, calc(100vw - 48px)) !important;
    max-height: min(670px, calc(100vh - 170px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fffaf5 !important;
    border: 1px solid #e6cfba !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 26px 60px rgba(74, 40, 22, .20) !important;
    color: #3f2b21 !important;
}

/* Header */
.cp-aliexpress-menu__head {
    min-height: 72px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #f3dfcb !important;
    border-bottom: 1px solid #dfbea0;
}

.cp-aliexpress-menu__head > div {
    display: grid;
    gap: 2px;
}

.cp-aliexpress-menu__head strong {
    color: #6b391f !important;
    font-size: 19px;
    font-weight: 900;
}

.cp-aliexpress-menu__head small {
    color: #806555;
    font-size: 12px;
}

.cp-aliexpress-menu__head > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid #d6aa83;
    border-radius: 999px;
    background: #fff9f3 !important;
    color: #8e481f !important;
    font-weight: 800;
    text-decoration: none;
}

.cp-aliexpress-menu__head > a:hover {
    background: #b66a2c !important;
    border-color: #b66a2c;
    color: #fff !important;
}

/* Main two-column body */
.cp-aliexpress-menu__body {
    min-height: 490px;
    max-height: calc(min(670px, 100vh - 170px) - 72px);
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    overflow: hidden;
    background: #fffaf5 !important;
}

/* Left root categories */
.cp-aliexpress-menu__roots {
    padding: 10px 0;
    overflow-y: auto;
    background: #f8eadc !important;
    border-right: 1px solid #e5cdb8;
    scrollbar-width: thin;
    scrollbar-color: #c98a50 #f5e5d5;
}

.cp-aliexpress-root {
    position: relative;
    width: 100%;
    min-height: 49px;
    padding: 8px 14px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-left: 4px solid transparent;
    background: transparent !important;
    color: #4b3327 !important;
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
}

.cp-aliexpress-root:hover,
.cp-aliexpress-root.is-active {
    background: #ffffff !important;
    border-left-color: #b66a2c;
    color: #713d20 !important;
}

.cp-aliexpress-root.is-active::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
}

.cp-aliexpress-root__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #e2c5a9;
    border-radius: 9px;
    background: #fff8f1;
    font-size: 17px;
}

.cp-aliexpress-root__name {
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cp-aliexpress-root__arrow {
    color: #aa744c;
    font-size: 23px;
    font-weight: 500;
}

/* Right side panels */
.cp-aliexpress-menu__content {
    min-width: 0;
    overflow-y: auto;
    background: #fff !important;
    scrollbar-width: thin;
    scrollbar-color: #c98a50 #f7eadf;
}

.cp-aliexpress-panel {
    min-height: 100%;
    padding: 22px 24px 26px;
    color: #3f2b21;
    background: #fff !important;
}

.cp-aliexpress-panel[hidden] {
    display: none !important;
}

.cp-aliexpress-panel.is-active {
    display: block !important;
    animation: alinaPanelFade .16s ease-out;
}

@keyframes alinaPanelFade {
    from {
        opacity: 0;
        transform: translateX(5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Right panel top */
.cp-aliexpress-panel__top {
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #ecdccc;
}

.cp-aliexpress-panel__top > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cp-aliexpress-panel__icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border: 1px solid #e0c0a2;
    border-radius: 13px;
    background: #fff4e9;
    font-size: 23px;
}

.cp-aliexpress-panel__top h3 {
    margin: 0;
    color: #69391f;
    font-size: 22px;
    line-height: 1.2;
}

.cp-aliexpress-panel__top p {
    margin: 4px 0 0;
    color: #876e5e;
    font-size: 12px;
}

.cp-aliexpress-panel__top > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9a4d1e !important;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.cp-aliexpress-panel__top > a:hover {
    color: #6b391f !important;
}

/* Children links */
.cp-aliexpress-panel__links {
    padding: 19px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.cp-aliexpress-panel__links > a {
    min-height: 67px;
    padding: 12px;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    border: 1px solid #ead7c5;
    border-radius: 12px;
    background: #fffaf6 !important;
    color: #493126 !important;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(94, 54, 30, .04);
    transition: .16s ease;
}

.cp-aliexpress-panel__links > a:hover {
    border-color: #cc925e;
    background: #fff0e2 !important;
    color: #783d1d !important;
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(94, 54, 30, .09);
}

.cp-aliexpress-child-icon {
    grid-row: 1 / 3;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f4dec8;
    color: #a75a26;
    font-size: 10px;
}

.cp-aliexpress-panel__links > a > span:nth-child(2) {
    color: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.cp-aliexpress-panel__links > a small {
    margin-top: 3px;
    color: #998172;
    font-size: 10px;
    font-weight: 650;
}

/* Promotional area */
.cp-aliexpress-panel__feature {
    min-height: 130px;
    padding: 20px 23px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    border: 1px solid #dfb992;
    border-radius: 15px;
    background:
        radial-gradient(circle at 90% 50%, rgba(214,154,85,.28), transparent 35%),
        linear-gradient(135deg, #f6dfc7, #fff8ef) !important;
}

.cp-aliexpress-panel__feature > div:first-child {
    display: grid;
    justify-items: start;
    gap: 5px;
}

.cp-aliexpress-panel__feature span {
    color: #a55b28;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.cp-aliexpress-panel__feature strong {
    color: #65351e;
    font-size: 19px;
}

.cp-aliexpress-panel__feature p {
    max-width: 590px;
    margin: 0;
    color: #765c4b;
    font-size: 12px;
    line-height: 1.6;
}

.cp-aliexpress-panel__feature a {
    margin-top: 5px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #b66a2c !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}

.cp-aliexpress-panel__feature a:hover {
    background: #713d20 !important;
}

.cp-aliexpress-panel__mark {
    width: 105px;
    height: 105px;
    display: grid;
    place-items: center;
    justify-self: end;
    border: 1px solid rgba(182,106,44,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.60);
    font-size: 48px;
}

/* Scrollbars */
.cp-aliexpress-menu__roots::-webkit-scrollbar,
.cp-aliexpress-menu__content::-webkit-scrollbar {
    width: 8px;
}

.cp-aliexpress-menu__roots::-webkit-scrollbar-track,
.cp-aliexpress-menu__content::-webkit-scrollbar-track {
    background: #f5e4d4;
}

.cp-aliexpress-menu__roots::-webkit-scrollbar-thumb,
.cp-aliexpress-menu__content::-webkit-scrollbar-thumb {
    background: #c98a50;
    border-radius: 99px;
}

/* Tablet */
@media (max-width: 991px) {
    .cp-aliexpress-menu {
        width: calc(100vw - 24px) !important;
        left: 12px !important;
    }

    .cp-aliexpress-menu__body {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .cp-aliexpress-panel__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile drawer-style mega menu */
@media (max-width: 767px) {
    .cp-aliexpress-menu {
        position: fixed !important;
        inset: 70px 8px 75px !important;
        width: auto !important;
        max-height: none !important;
        border-radius: 16px !important;
    }

    .cp-aliexpress-menu__head {
        min-height: 62px;
    }

    .cp-aliexpress-menu__body {
        height: calc(100% - 62px);
        min-height: 0;
        max-height: none;
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .cp-aliexpress-root {
        min-height: 57px;
        padding: 7px 8px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px;
    }

    .cp-aliexpress-root__icon {
        width: 27px;
        height: 27px;
        font-size: 13px;
    }

    .cp-aliexpress-root__name {
        font-size: 11px;
        white-space: normal;
        line-height: 1.2;
    }

    .cp-aliexpress-root__arrow {
        display: none;
    }

    .cp-aliexpress-panel {
        padding: 14px;
    }

    .cp-aliexpress-panel__top {
        align-items: flex-start;
    }

    .cp-aliexpress-panel__top h3 {
        font-size: 17px;
    }

    .cp-aliexpress-panel__top > a {
        display: none;
    }

    .cp-aliexpress-panel__links {
        grid-template-columns: 1fr;
        padding: 13px 0;
        gap: 8px;
    }

    .cp-aliexpress-panel__feature {
        grid-template-columns: 1fr;
    }

    .cp-aliexpress-panel__mark {
        display: none;
    }
}

/* Header navigation structural fix */
.cp11-nav-wrap {
    position: relative !important;
    z-index: 900 !important;
    background: #6b3a22 !important;
}

.cp11-nav__grid {
    position: relative !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.cp11-category-hub {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    background: #b66a2c !important;
}

.cp11-allcat {
    width: 100% !important;
    min-height: 64px !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #b66a2c !important;
    color: #fff !important;
}

.cp11-main-nav {
    min-width: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: #6b3a22 !important;
}

.cp11-main-nav > a {
    min-height: 64px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: transparent !important;
    color: #fff9f3 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.cp11-main-nav > a:hover,
.cp11-main-nav > a.is-active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

/* Hide mega menu unless opened */
.cp11-mega-menu {
    display: none !important;
}

.cp11-mega-menu.is-open,
.cp11-category-hub.is-open .cp11-mega-menu,
.cp11-allcat[aria-expanded="true"] + .cp11-mega-menu {
    display: block !important;
}

/* Prevent navigation from falling over hero */
.cp11-header {
    position: relative !important;
    z-index: 1000 !important;
}

.cp11-nav-wrap + *,
.cp11-header + * {
    position: relative;
    z-index: 1;
}

@media (max-width: 1100px) {
    .cp11-nav__grid {
        grid-template-columns: 230px minmax(0, 1fr) !important;
    }

    .cp11-main-nav > a {
        padding: 0 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 767px) {
    .cp11-nav-wrap {
        display: none !important;
    }
}

/* ALINA CATEGORY TOGGLE FINAL */

.cp11-nav-wrap {
    position: relative !important;
    z-index: 1100 !important;
    background: #6b3a22 !important;
}

.cp11-nav__grid {
    position: relative !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.cp11-category-hub {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    background: #b66a2c !important;
}

.cp11-allcat {
    width: 100% !important;
    min-height: 64px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #b66a2c !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.cp11-allcat:hover,
.cp11-allcat[aria-expanded="true"] {
    background: #965220 !important;
}

/* Closed state */
.cp11-category-hub .cp11-mega-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Open state */
.cp11-category-hub.is-open .cp11-mega-menu,
.cp11-category-hub .cp11-mega-menu.is-open,
.cp11-allcat[aria-expanded="true"] + .cp11-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Mega menu positioning */
.cp11-category-hub .cp-aliexpress-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: min(1120px, calc(100vw - 48px)) !important;
    min-width: 900px !important;
    max-height: min(650px, calc(100vh - 180px)) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    background: #fffaf5 !important;
    border: 1px solid #e5cdb8 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 28px 65px rgba(72, 39, 21, .24) !important;
}

/* Main navigation */
.cp11-main-nav {
    min-width: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: stretch !important;
    background: #6b3a22 !important;
}

.cp11-main-nav > a {
    min-height: 64px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    color: #fff9f3 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.cp11-main-nav > a:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
}

/* Two-column AliExpress layout */
.cp-aliexpress-menu__body {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    min-height: 500px !important;
    max-height: 560px !important;
    overflow: hidden !important;
}

.cp-aliexpress-menu__roots {
    overflow-y: auto !important;
    background: #f8eadc !important;
    border-right: 1px solid #e5cdb8 !important;
}

.cp-aliexpress-menu__content {
    overflow-y: auto !important;
    background: #ffffff !important;
}

.cp-aliexpress-panel[hidden] {
    display: none !important;
}

.cp-aliexpress-panel.is-active {
    display: block !important;
}

@media (max-width: 1100px) {
    .cp11-nav__grid {
        grid-template-columns: 230px minmax(0, 1fr) !important;
    }

    .cp11-main-nav > a {
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    .cp11-category-hub .cp-aliexpress-menu {
        min-width: 820px !important;
    }
}

@media (max-width: 767px) {
    .cp11-nav-wrap {
        display: none !important;
    }
}
/* ALINA FULL-WIDTH COMPACT MEGA MENU */

.cp-aliexpress-menu__head {
    display: none !important;
}

/* Full-width dropdown */
.cp11-category-hub > .cp-aliexpress-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 520px !important;
    max-height: calc(100vh - 190px) !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 0 16px 16px !important;
}

/* Since header is hidden, body uses full menu height */
.cp-aliexpress-menu__body {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
}

/* Left sidebar */
.cp-aliexpress-menu__roots {
    padding: 10px 0 !important;
}

/* Right content tighter and cleaner */
.cp-aliexpress-panel {
    padding: 20px 28px 24px !important;
}

.cp-aliexpress-panel__top {
    padding-bottom: 13px !important;
}

.cp-aliexpress-panel__links {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 18px 0 !important;
}

.cp-aliexpress-panel__links > a {
    min-height: 62px !important;
}

/* Remove promotional block to reduce vertical clutter */
.cp-aliexpress-panel__feature {
    display: none !important;
}

/* Keep menu aligned below navigation */
.cp11-category-hub.alina-menu-open > .cp11-mega-menu {
    top: var(--alina-mega-top, 0px) !important;
}

@media (max-width: 1100px) {
    .cp-aliexpress-menu__body {
        grid-template-columns: 260px minmax(0, 1fr) !important;
    }

    .cp-aliexpress-panel__links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
