/* ==========================================================================
   PCM Mega Menu
   Desktop: the dropdown of the theme's "Catalog" button - top categories with
   icons on the side, the hovered one's subcategories (with pictures) and their
   own subcategories as links. Mobile: pictures in the catalog drawer.
   Written with logical properties (inline-start/end), so the same rules lay
   out Hebrew (RTL) and Russian/English (LTR) correctly. Sizes are in rem, like
   the theme, so the menu scales with its fluid root font size.
   ========================================================================== */

@media (min-width: 1200px) {

    /* The panel spans the whole header row, not just the button. */
    .pcm-mm-host.header__catalog {
        position: static;
    }

    .pcm-mm-host.pcm-mm-is-open > .header__catalog-btn {
        background: #fff;
        border-color: #fff;
        color: #343434;
    }

    .pcm-mm {
        --pcm-mm-accent: var(--theme-primary-color, #4d5fcd);
        --pcm-mm-ink: #1f2440;
        --pcm-mm-muted: #5d6380;
        --pcm-mm-line: #eceef6;
        --pcm-mm-soft: #f4f5fa;
        --pcm-mm-tint: #eef0fb;

        position: absolute;
        top: calc(100% + 0.8rem);
        left: 0;
        right: 0;
        z-index: 200;
        display: none;
        color: var(--pcm-mm-ink);
        background: #fff;
        border-radius: 1.6rem;
        box-shadow: 0 2.4rem 6rem rgba(20, 26, 70, 0.24), 0 0.2rem 0.8rem rgba(20, 26, 70, 0.08);
        text-align: start;
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .pcm-mm.is-open {
        display: block;
        animation: pcm-mm-in 0.18s ease-out;
    }

    /* Invisible strip between the button and the panel, so the pointer can
       travel from one to the other without "leaving" the menu. */
    .pcm-mm::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: var(--pcm-mm-bridge, 3.2rem);
    }

    .pcm-mm__symbols {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .pcm-mm a {
        text-decoration: none;
    }

    .pcm-mm a:focus-visible {
        outline: 2px solid var(--pcm-mm-accent);
        outline-offset: 2px;
    }

    .pcm-mm ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pcm-mm img {
        display: block;
        max-width: none;
    }

    .pcm-mm__frame {
        display: flex;
        max-height: var(--pcm-mm-max, 70vh);
        border-radius: inherit;
        overflow: hidden;
    }

    /* ---- Top categories ---------------------------------------------------- */

    .pcm-mm__roots {
        flex: 0 0 30rem;
        width: 30rem;
        padding: 1rem !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--pcm-mm-soft);
        scrollbar-width: thin;
        scrollbar-color: #d3d7e8 transparent;
    }

    .pcm-mm__root-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-height: var(--pcm-mm-row, 3.6rem);
        padding: 0.2rem 1rem;
        border-radius: 1rem;
        color: var(--pcm-mm-ink);
        transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
    }

    .pcm-mm__root-link:hover {
        color: var(--pcm-mm-accent);
    }

    .pcm-mm__root-link.is-active {
        background: #fff;
        color: var(--pcm-mm-accent);
        box-shadow: 0 0.2rem 1rem rgba(20, 26, 70, 0.08);
    }

    .pcm-mm__icon {
        flex: 0 0 2.6rem;
        width: 2.6rem;
        height: 2.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.8rem;
        background: #fff;
        overflow: hidden;
    }

    .pcm-mm__icon img {
        width: 2.4rem;
        height: 2.4rem;
        object-fit: contain;
    }

    .pcm-mm__root-name {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pcm-mm__chev {
        flex: 0 0 auto;
        width: 0.6rem;
        height: 1rem;
        opacity: 0.45;
    }

    .pcm-mm__root-link.is-active .pcm-mm__chev {
        opacity: 1;
    }

    [dir="rtl"] .pcm-mm__chev {
        transform: scaleX(-1);
    }

    /* ---- Subcategories of the active top category ------------------------- */

    .pcm-mm__panes {
        flex: 1 1 auto;
        min-width: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #d3d7e8 transparent;
    }

    .pcm-mm__pane {
        display: none;
        padding: 2.2rem 3.2rem 1.2rem;
    }

    .pcm-mm__pane.is-active {
        display: block;
        animation: pcm-mm-fade 0.16s ease-out;
    }

    .pcm-mm__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2.2rem;
        padding-bottom: 1.6rem;
        border-bottom: 1px solid var(--pcm-mm-line);
    }

    .pcm-mm__title {
        font-size: 2.2rem;
        line-height: 1.2;
        color: var(--pcm-mm-ink);
    }

    .pcm-mm__title:hover {
        color: var(--pcm-mm-accent);
    }

    .pcm-mm__all {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.7rem 1.6rem;
        border-radius: 10rem;
        background: var(--pcm-mm-tint);
        background: color-mix(in srgb, var(--pcm-mm-accent) 10%, #fff);
        color: var(--pcm-mm-accent);
        font-size: 1.4rem;
        white-space: nowrap;
        transition: background-color 0.15s, color 0.15s;
    }

    .pcm-mm__all:hover {
        background: var(--pcm-mm-accent);
        color: #fff;
    }

    .pcm-mm__all .pcm-mm__chev {
        opacity: 1;
    }

    /* Subcategories flow in balanced columns (a group never splits). */
    .pcm-mm__groups {
        column-width: 22rem;
        column-gap: 3.2rem;
    }

    .pcm-mm__group {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        padding-bottom: 2rem;
    }

    .pcm-mm__group-link {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        color: var(--pcm-mm-ink);
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .pcm-mm__thumb {
        flex: 0 0 5.2rem;
        width: 5.2rem;
        height: 5.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1.2rem;
        background: var(--pcm-mm-soft);
        transition: background-color 0.15s, transform 0.15s;
    }

    /* Pictures with a white background melt into the tile. */
    .pcm-mm__thumb img {
        width: 4.2rem;
        height: 4.2rem;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    .pcm-mm__group-name {
        min-width: 0;
        transition: color 0.15s;
    }

    .pcm-mm__group-link:hover .pcm-mm__group-name {
        color: var(--pcm-mm-accent);
    }

    .pcm-mm__group-link:hover .pcm-mm__thumb {
        background: var(--pcm-mm-tint);
        transform: translateY(-0.1rem);
    }

    .pcm-mm__links {
        margin-top: 0.6rem !important;
        padding-inline-start: 6.4rem !important;
    }

    .pcm-mm__link {
        display: inline-block;
        padding: 0.3rem 0;
        font-size: 1.4rem;
        line-height: 1.3;
        color: var(--pcm-mm-muted);
        transition: color 0.15s;
    }

    .pcm-mm__link:hover {
        color: var(--pcm-mm-accent);
    }

    .pcm-mm__link--more {
        color: var(--pcm-mm-accent);
    }

    /* Top category without subcategories: its picture and a link. */
    .pcm-mm__hero {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
        padding: 2.4rem 3.2rem;
        border-radius: 1.6rem;
        background: var(--pcm-mm-soft);
        color: var(--pcm-mm-ink);
    }

    .pcm-mm__hero-pic {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16rem;
        height: 16rem;
    }

    .pcm-mm__hero-pic img {
        width: 16rem;
        height: 16rem;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    .pcm-mm__hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        color: var(--pcm-mm-accent);
    }

    /* Category without a picture. */
    .pcm-mm__ph {
        width: 45%;
        height: 45%;
        fill: #c8cde0;
    }

    .pcm-mm__roots::-webkit-scrollbar,
    .pcm-mm__panes::-webkit-scrollbar {
        width: 0.6rem;
    }

    .pcm-mm__roots::-webkit-scrollbar-thumb,
    .pcm-mm__panes::-webkit-scrollbar-thumb {
        background: #d3d7e8;
        border-radius: 1rem;
    }

    /* Page dimmed under the open menu. It sits just below the theme header
       (z-index 1000), so the header and the panel stay bright. pointer-events:
       none - the page stays usable and moving onto it still closes the menu. */
    .pcm-mm-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: rgba(16, 20, 48, 0.32);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s, visibility 0.18s;
    }

    .pcm-mm-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes pcm-mm-in {
    from {
        opacity: 0;
        transform: translateY(-0.6rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pcm-mm-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcm-mm.is-open,
    .pcm-mm__pane.is-active {
        animation: none;
    }

    .pcm-mm-backdrop {
        transition: none;
    }
}

/* ---- Mobile catalog drawer (theme markup + pictures) ----------------------- */

@media (max-width: 1199px) {

    .pcm-mm-m > .pcm-mm-m__link > .pcm-mm-m__icon {
        flex: 0 0 3.8rem;
        width: 3.8rem;
        height: 3.8rem;
        margin: 0;
        margin-inline-end: 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
        background: #f4f5fa;
        overflow: hidden;
    }

    .pcm-mm-m__icon img {
        display: block;
        width: 3.2rem;
        height: 3.2rem;
        max-width: none;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    .pcm-mm-m__ph {
        width: 1.6rem;
        height: 1.6rem;
        fill: #c8cde0;
    }

    .pcm-mm-m > .pcm-mm-m__link {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    /* Room for the arrow at the inline end. */
    .pcm-mm-m--parent > .pcm-mm-m__link {
        padding-inline-end: 5rem;
    }

    .pcm-mm-m--all > .pcm-mm-m__link {
        color: var(--theme-primary-color, #4d5fcd);
        font-weight: 500;
    }

    /* The theme's RTL rule shifts the arrow up by half its height; keep it
       centred and pointing to the inline end. */
    [dir="rtl"] .pcm-mm-m .header__catalog-link-arrow svg {
        transform: rotate(180deg);
    }

    .pcm-mm-m .header__catalog-back {
        text-align: start;
    }

    /* "Back" arrow points to the inline start (right in Hebrew) and keeps a gap
       before the title. */
    .pcm-mm-m .header__catalog-back svg.icon-arrow-left {
        margin: 0;
        margin-inline-end: 1.5rem;
    }

    [dir="rtl"] .pcm-mm-m .header__catalog-back svg.icon-arrow-left {
        transform: scaleX(-1);
    }
}