/* Party Mart mega menu. Desktop panels hang off the theme's .ts-megamenu-fullwidth sizing. */

.ts-header nav.pc-menu,
#group-icon-header {
    --pm-purple: #5928C0;
    --pm-ink: #2a2a35;
    --pm-muted: #6b6b7b;
    --pm-orange: #FF6A13;
}

/* ---------- Theme hover color ----------
   The theme turns every hovered header link bright green (#25cc61, with !important), which
   flashed the tabs white -> green and overrode the panel's own colors. Each selector here
   outranks .ts-header .header-bottom a:not(.button):not(.elementor-button):hover. */
.ts-header .header-bottom nav.pc-menu > ul.menu > li.pm-mega > a {
    color: #fff !important;
    transition: none !important;
}
.ts-header .header-bottom nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu > li > a {
    color: var(--pm-ink) !important;
}
.ts-header .header-bottom nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu > li > a:hover,
.ts-header .header-bottom nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu > li > a:focus-visible {
    color: var(--pm-purple) !important;
}
.ts-header .header-bottom nav.pc-menu li.pm-head a.pm-shop-all {
    color: #fff !important;
}
.ts-header .header-bottom nav.pc-menu li.pm-promo a.pm-promo-card {
    color: var(--pm-ink) !important;
}

/* ---------- Tabs ---------- */
.ts-header nav.pc-menu > ul.menu > li.pm-mega > a {
    display: inline-flex;
    align-items: center;
}
.ts-header nav.pc-menu > ul.menu > li.pm-mega.pm-open > a,
.ts-header nav.pc-menu > ul.menu > li.pm-mega > a:focus-visible {
    box-shadow: inset 0 -3px 0 #fff;
}
.ts-header nav.pc-menu > ul.menu > li.pm-mega.pm-open > .ts-menu-drop-icon {
    transform: rotate(180deg);
}
.ts-header nav.pc-menu > ul.menu > li.pm-mega > a .menu-sub-label {
    order: -1;
    position: static;
    display: inline-block;
    margin: 0 6px 0 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--pm-orange);
    color: #fff;
    font: 700 10px/1.4 Inter, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    transform: none;
}
.ts-header nav.pc-menu > ul.menu > li.pm-mega > a .menu-sub-label::before,
.ts-header nav.pc-menu > ul.menu > li.pm-mega > a .menu-sub-label::after {
    display: none;
}

/* ---------- Panel ---------- */
.ts-header nav.pc-menu > ul.menu > li.pm-mega > ul.sub-menu {
    display: none !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 32px;
    top: 100%;
    /* The theme sizes full-width panels from the hidden phone header (width 0), so
       mega-menu.js measures .header-bottom .container and these win over its inline style. */
    left: var(--pm-panel-left, 0) !important;
    right: auto !important;
    width: var(--pm-panel-width, 960px) !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 0;
    padding: 24px 32px 28px;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(30, 10, 70, .15);
    animation: none;
    text-align: left;
}
/* The theme replays a fade-in (animation_menu_sub, from opacity 0) on any hovered sub-menu
   item's list, which made a column's links blink as the pointer moved over it. */
.ts-header nav.pc-menu li.pm-mega ul.sub-menu {
    animation: none !important;
}
html:not(.pm-js) .ts-header nav.pc-menu > ul.menu > li.pm-mega:hover > ul.sub-menu,
.ts-header nav.pc-menu > ul.menu > li.pm-mega.pm-open > ul.sub-menu {
    display: flex !important;
}
.ts-header nav.pc-menu > ul.menu > li.pm-mega > ul.sub-menu::before,
.ts-header nav.pc-menu > ul.menu > li.pm-mega > ul.sub-menu::after,
.ts-header nav.pc-menu > ul.menu > li.pm-mega ul.sub-menu ul.sub-menu::before,
.ts-header nav.pc-menu > ul.menu > li.pm-mega ul.sub-menu ul.sub-menu::after,
.ts-header nav.pc-menu > ul.menu > li.pm-mega ul.sub-menu li > a::after,
.ts-header nav.pc-menu > ul.menu > li.pm-mega ul.sub-menu .ts-menu-drop-icon {
    display: none;
}

/* Header row: title + Shop All pill */
.ts-header nav.pc-menu li.pm-mega > ul.sub-menu > li.pm-head {
    flex: 0 0 100%;
}
.pm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pm-panel-title {
    color: var(--pm-purple);
    font: 700 20px/1.2 Inter, sans-serif;
}
.ts-header nav.pc-menu a.pm-shop-all {
    display: inline-flex;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--pm-purple);
    color: #fff;
    font: 600 14px/1.2 Inter, sans-serif;
    white-space: nowrap;
}
.ts-header nav.pc-menu a.pm-shop-all:hover,
.ts-header nav.pc-menu a.pm-shop-all:focus-visible {
    background: #4a1fa6;
    color: #fff;
}

/* Columns */
.ts-header nav.pc-menu li.pm-mega > ul.sub-menu > li.pm-col {
    flex: 1 1 0;
    max-width: 240px;
    min-width: 0;
}
.pm-col-title {
    display: block;
    margin-bottom: 12px;
    color: var(--pm-muted);
    font: 700 12px/1.2 Inter, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ts-header nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu {
    display: block !important;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    left: auto;
    top: auto;
    box-shadow: none;
    background: none;
    animation: none;
}
.ts-header nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu > li {
    padding: 0;
}
.ts-header nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu > li > a {
    display: block;
    padding: 4px 0;
    color: var(--pm-ink);
    font: 500 14px/1.3 Inter, sans-serif;
}
.ts-header nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu > li > a:hover,
.ts-header nav.pc-menu li.pm-mega li.pm-col > ul.sub-menu > li > a:focus-visible {
    color: var(--pm-purple);
    text-decoration: underline;
}

/* Promo card */
.ts-header nav.pc-menu li.pm-mega > ul.sub-menu > li.pm-promo {
    flex: 0 0 240px;
    margin-left: auto;
}
.ts-header nav.pc-menu a.pm-promo-card {
    display: flex !important; /* theme forces inline-block on sub-menu links */
    flex-direction: column;
    gap: 10px;
    color: var(--pm-ink);
    text-decoration: none;
}
.pm-promo-card img,
.pm-promo-img-empty {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 12px;
    background: #f4f1fb;
}
.pm-promo-title {
    font: 700 16px/1.25 Inter, sans-serif;
}
.pm-promo-btn {
    align-self: flex-start;
    padding: 8px 18px;
    border: 1.5px solid var(--pm-purple);
    border-radius: 999px;
    color: var(--pm-purple);
    font: 600 13px/1.2 Inter, sans-serif;
}
.pm-promo-card:hover .pm-promo-btn,
.pm-promo-card:focus-visible .pm-promo-btn {
    background: var(--pm-purple);
    color: #fff;
}

/* ---------- Narrow desktop and tablet ---------- */
@media (max-width: 1199px) {
    .ts-header nav.pc-menu > ul.menu > li {
        margin-right: 12px;
    }
    .ts-header nav.pc-menu > ul.menu > li.pm-mega > ul.sub-menu {
        padding: 20px 20px 24px;
        gap: 16px 20px;
    }
    .ts-header nav.pc-menu li.pm-mega > ul.sub-menu > li.pm-promo {
        flex-basis: 200px;
    }
}
@media (max-width: 1023px) {
    .ts-header nav.pc-menu > ul.menu {
        flex-wrap: wrap;
        justify-content: center;
    }
    .ts-header nav.pc-menu > ul.menu > li > a {
        font-size: 13px;
    }
    .ts-header nav.pc-menu li.pm-mega > ul.sub-menu > li.pm-col {
        flex: 1 1 40%;
    }
    .ts-header nav.pc-menu li.pm-mega > ul.sub-menu > li.pm-promo {
        display: none;
    }
}

/* ---------- Phone drawer: column headings always open ---------- */
#group-icon-header .mobile-menu li.pm-col > .pm-col-title {
    display: block;
    padding: 12px 0 4px;
    color: #6b6b7b;
    font: 700 12px/1.2 Inter, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#group-icon-header .mobile-menu li.pm-col > ul.sub-menu {
    display: block !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    z-index: auto !important;
}
#group-icon-header .mobile-menu li.pm-col > .ts-menu-drop-icon {
    display: none !important;
}

/* ---------- Top strip links (desktop header-top) ---------- */
.ts-header .header-top .top-header-menu ul.menu {
    display: flex;
    gap: 18px;
    margin: 0 18px 0 0;
    padding: 0;
    list-style: none;
}
.ts-header .header-top .top-header-menu ul.menu > li > a {
    color: inherit;
    font: 600 13px/1.2 Inter, sans-serif;
}
.ts-header .header-top .top-header-menu ul.menu > li > a:hover {
    text-decoration: underline;
}