/* Header categories menu (includes/classes/categories.php, gfx/pol/public.shop.js).
   Desktop (from 1025px): mega menu panel. Phone drawer (up to 900px): panels that slide in, at the end of this file.
   Between 901 and 1024px the old dropdown of mobile.css stays. */

.sub-menu .mega-feature,
.sub-menu .mega-children,
.navigation-menu > ul > li.mm-root-head {
    display: none;
}

@media only screen and (min-width: 1025px) {
    .navigation-menu > ul {
        position: relative;
    }

    .navigation-menu > ul > li.main-category {
        position: static;
    }

    .navigation-menu > ul > li.main-category.mega-open > a {
        color: #fff;
        background: #E4C4D4;
    }

    /* the panel: as wide as its columns, under the row of the open category;
       top and left are set by public.shop.js so the panel starts under the category and stays inside the menu */
    .navigation-menu .sub-menu.mega {
        display: none;
        top: 100%;
        left: 0;
        right: auto;
        width: max-content !important;
        max-width: 100%;
        margin-top: 0 !important;
        padding: 28px 32px 32px !important;
        border: 1px solid #E4C4D4;
        border-top: 2px solid #a64273;
        background: #fff;
        box-shadow: 0 22px 40px -24px rgba(90, 30, 60, .35);
        text-align: left;
        grid-template-columns: auto 260px;
        column-gap: 40px;
    }

    .navigation-menu li.mega-open > .sub-menu.mega {
        display: grid;
        animation: mega-in .14s ease-out;
    }

    .navigation-menu .sub-menu.mega > div {
        float: none;
        width: auto;
        max-height: none;
        padding: 0;
        border: 0;
    }

    .navigation-menu .sub-menu.mega .sub-menu-wrapper {
        float: none;
        max-height: 60vh;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #E4C4D4 transparent;
    }

    /* subcategories in columns; a subcategory with its own subcategories becomes a small group */
    .navigation-menu .sub-menu.mega .sub-menu-wrapper > ul {
        margin: 0;
        column-gap: 32px;
    }

    .navigation-menu .mega-cols-1 .sub-menu-wrapper > ul { width: 200px; columns: 1; }
    .navigation-menu .mega-cols-2 .sub-menu-wrapper > ul { width: 432px; columns: 2; }
    .navigation-menu .mega-cols-3 .sub-menu-wrapper > ul { width: 600px; columns: 3; }
    .navigation-menu .mega-cols-4 .sub-menu-wrapper > ul { width: 840px; columns: 4; }

    /* a plain row cannot be cut anyway (its link is inline-block); Chrome balances the columns badly when
       every row has break-inside: avoid, so only the short groups (up to 4 subcategories) stay whole */
    .navigation-menu .sub-menu.mega .sub-menu-wrapper > ul > li {
        float: none;
        width: auto;
    }

    .navigation-menu .sub-menu.mega .sub-menu-wrapper > ul > li.has-children:not(.mega-long) {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .navigation-menu .sub-menu.mega ul li a {
        display: inline-block;
        padding: 5px 0;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        line-height: 20px;
        color: #2d2329;
        text-decoration: none;
    }

    .navigation-menu .sub-menu.mega ul li a:hover,
    .navigation-menu .sub-menu.mega ul li a:focus {
        color: #a64273;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .navigation-menu .sub-menu.mega .sub-menu-wrapper > ul > li.has-children {
        padding-bottom: 12px;
    }

    /* only long groups may continue in the next column, so the columns stay even */
    .navigation-menu .sub-menu.mega .sub-menu-wrapper > ul > li.mega-long {
        break-inside: auto;
        -webkit-column-break-inside: auto;
    }

    .navigation-menu .sub-menu.mega li.has-children a.catlink {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 14px;
    }

    /* the name of a group with its first subcategory: one inline-block, so it is never cut between two columns
       (break-inside: avoid here makes Chrome leave a column empty) */
    .navigation-menu .sub-menu.mega .mega-head {
        display: inline-block;
        width: 100%;
        vertical-align: top;
    }

    .navigation-menu .sub-menu.mega .mega-children li {
        break-inside: avoid;
    }

    .navigation-menu .sub-menu.mega .mega-children {
        display: block;
        margin: 0 0 0 1px;
        padding: 0 0 0 12px;
        border-left: 1px solid #E4C4D4;
    }

    .navigation-menu .sub-menu.mega .mega-children li a {
        padding: 3px 0;
        font-size: 13px;
        color: #6b5c64;
    }

    /* the category picture, the one bold element of the panel */
    .navigation-menu .sub-menu.mega .mega-feature {
        display: flex;
        flex-direction: column;
        align-self: start;
        padding: 12px 12px 16px;
        background: #faf3f6;
        color: #2d2329;
        text-decoration: none;
    }

    .navigation-menu .sub-menu.mega .mega-feature-img {
        display: block;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        margin-bottom: 14px;
        background: #f1e4ea;
    }

    .navigation-menu .sub-menu.mega .mega-feature-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

    .navigation-menu .sub-menu.mega .mega-feature:hover .mega-feature-img img {
        transform: scale(1.04);
    }

    .navigation-menu .sub-menu.mega .mega-feature-name {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        letter-spacing: .02em;
    }

    .navigation-menu .sub-menu.mega .mega-feature-all {
        margin-top: 4px;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        color: #a64273;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .navigation-menu .sub-menu.mega .mega-feature:focus-visible {
        outline: 2px solid #a64273;
        outline-offset: 2px;
    }
}

/* narrower desktops: at most 3 columns and a smaller picture */
@media only screen and (min-width: 1025px) and (max-width: 1299px) {
    .navigation-menu .sub-menu.mega {
        grid-template-columns: auto 220px;
    }

    .navigation-menu .mega-cols-4 .sub-menu-wrapper > ul { width: 600px; columns: 3; }
}

@keyframes mega-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-menu li.mega-open > .sub-menu.mega {
        animation: none;
    }

    .navigation-menu .sub-menu.mega .mega-feature-img img {
        transition: none;
    }
}

/* ---------- phone drawer ---------- */
@media only screen and (max-width: 900px) {
    html.mm-lock,
    html.mm-lock body {
        overflow: hidden;
    }

    /* wider drawer; public.shop.js slides it in and back by its own width */
    .navigation-menu {
        left: -400px;
        width: min(88vw, 380px);
        overflow: hidden;
        background: #fff;
    }

    .navigation-menu > ul {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
        border-bottom: 0;
    }

    .navigation-menu .sub-menu {
        display: none !important;
    }

    .navigation-menu > ul > li.mobile-customer-links {
        height: auto;
    }

    .navigation-menu a:focus:not(:focus-visible),
    .navigation-menu button:focus:not(:focus-visible) {
        outline: none;
    }

    .navigation-menu a:focus-visible,
    .navigation-menu button:focus-visible {
        outline: 2px solid #a64273;
        outline-offset: -2px;
    }

    /* top bar of the drawer: "Категории" and close */
    .navigation-menu > ul > li.mm-root-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 4px 0 20px;
        border-bottom: 1px solid #E4C4D4;
        font-family: 'Lato', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: #2d2329;
    }

    /* main categories */
    .navigation-menu > ul > li.main-category > a,
    .navigation-menu > ul > li.main-category:hover > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        margin: 0;
        padding: 14px 20px;
        border-bottom: 1px solid #f3e7ed;
        background: #fff;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: .02em;
        color: #2d2329;
        text-decoration: none;
    }

    .navigation-menu > ul > li.main-category > a:active {
        background: #faf3f6;
    }

    .navigation-menu > ul > li.mm-parent > a::after,
    .mm-list li.mm-has-sub > a::after {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        margin-left: 16px;
        border-top: 2px solid #a64273;
        border-right: 2px solid #a64273;
        transform: rotate(45deg);
    }

    /* panel of one category, over the list of categories */
    .mm-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20; /* above the customer links table (z-index 9, mobile.css) */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 32px;
        background: #fff;
        text-align: left;
        transform: translateX(100%);
        transition: transform .25s ease;
    }

    .mm-panel.mm-in {
        transform: none;
    }

    .mm-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 4px;
        border-bottom: 1px solid #E4C4D4;
        background: #fff;
    }

    .mm-back {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 16px;
        border: 0;
        background: none;
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #a64273;
    }

    .mm-back::before {
        content: "";
        width: 8px;
        height: 8px;
        margin-right: 10px;
        border-bottom: 2px solid currentColor;
        border-left: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .mm-close {
        position: relative;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
    }

    .mm-close::before,
    .mm-close::after {
        content: "";
        position: absolute;
        top: 21px;
        left: 13px;
        width: 18px;
        height: 2px;
        background: #2d2329;
        transform: rotate(45deg);
    }

    .mm-close::after {
        transform: rotate(-45deg);
    }

    /* the category picture, the one bold element of the drawer */
    .mm-hero {
        margin: 16px 20px 0;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: #f1e4ea;
    }

    .mm-hero img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mm-title {
        margin: 18px 20px 2px;
        font-family: 'Lato', sans-serif;
        font-size: 21px;
        font-weight: 700;
        line-height: 26px;
        letter-spacing: .02em;
        color: #2d2329;
    }

    .mm-all {
        display: inline-block;
        margin: 0 20px 12px;
        padding: 8px 0;
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        color: #a64273;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .mm-list {
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid #f3e7ed;
    }

    .mm-list li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 50px;
        padding: 13px 20px;
        border-bottom: 1px solid #f3e7ed;
        font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        line-height: 22px;
        color: #2d2329;
        text-decoration: none;
    }

    .mm-list li a:active {
        background: #faf3f6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-panel {
        transition: none;
    }
}