/* ═════════════════════════════════════════════════════
   DESKTOP (≥ 1025px) — 3-column mega-menu
   ═════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    .menu-item-103002 .wd-dropdown-menu,
    li.menu-item-103002 .wd-dropdown-menu {
        min-width: 780px !important;
        width: 780px !important;
        left: auto !important;
        right: 0 !important;
        transform: translateX(var(--ep-guides-shift, 0px)) !important;
    }
    .menu-item-103002 .wd-dropdown-menu .container,
    li.menu-item-103002 .wd-dropdown-menu .container {
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .menu-item-103002 ul.wd-sub-menu,
    li.menu-item-103002 ul.wd-sub-menu {
        column-count: 3 !important;
        column-gap: 20px !important;
        column-fill: auto !important;
        display: block !important;
        width: 100% !important;
        padding: 12px 8px !important;
        margin: 0 !important;
        height: auto !important;
    }
    .menu-item-103002 ul.wd-sub-menu > li {
        width: auto !important;
        margin-bottom: 0 !important;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
    /* Item 7 = FEATURED GUIDES eyebrow → start column 2 */
    .menu-item-103002 ul.wd-sub-menu > li:nth-child(7) {
        break-before: column;
        -webkit-column-break-before: always;
    }
    /* Item 13 = BY PEPTIDE eyebrow → start column 3 */
    .menu-item-103002 ul.wd-sub-menu > li:nth-child(13) {
        break-before: column;
        -webkit-column-break-before: always;
    }
    .menu-item-103002 ul.wd-sub-menu > li > a,
    .menu-item-103002 ul.wd-sub-menu > li > a.woodmart-nav-link,
    .menu-item-103002 ul.wd-sub-menu > li > a span,
    .menu-item-103002 ul.wd-sub-menu > li > a .nav-link-text {
        padding: 8px 14px !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #1e293b !important;
        line-height: 1.4 !important;
    }
    .menu-item-103002 ul.wd-sub-menu > li > a:hover,
    .menu-item-103002 ul.wd-sub-menu > li > a:hover .nav-link-text {
        color: #2563eb !important;
    }

    /* "BY GOAL" header injected via ::before on first item */
    .menu-item-103002 ul.wd-sub-menu > li:first-child {
        position: relative;
    }
    .menu-item-103002 ul.wd-sub-menu > li:first-child::before {
        content: 'BY GOAL';
        display: block;
        padding: 2px 14px 12px;
        margin-bottom: 4px;
        color: #0f172a;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        border-bottom: 1px solid #e2e8f0;
    }

    /* FEATURED GUIDES & BY PEPTIDE column headers (real menu items) */
    .menu-item.ep-menu-eyebrow > a,
    .wd-nav-main .menu-item.ep-menu-eyebrow > a {
        pointer-events: none;
        cursor: default;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase;
        padding: 2px 14px 12px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid #e2e8f0;
        background: transparent !important;
    }
    .menu-item.ep-menu-eyebrow > a:hover {
        background: transparent !important;
        color: #0f172a !important;
    }

    /* "View All Guides →" / "All Peptides →" — emphasized CTAs */
    .menu-item.ep-menu-view-all {
        margin-top: 14px !important;
        padding-top: 12px !important;
        border-top: 1px solid #e2e8f0;
    }
    .menu-item.ep-menu-view-all > a,
    .wd-nav-main .menu-item.ep-menu-view-all > a {
        color: #2563eb !important;
        font-weight: 700 !important;
    }
    .menu-item.ep-menu-view-all > a:hover {
        color: #1d4ed8 !important;
    }
}

/* ═════════════════════════════════════════════════════
   MOBILE (≤ 1024px) — single-column accordion layout.
   Critical: defer to Woodmart's open/close state. The
   sub-menu must be HIDDEN by default and only shown
   when the parent <li> has `.wd-opened` class (toggled
   by Woodmart's mobile-menu JS via the arrow button).
   ═════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Strip any desktop sizing/positioning on mobile drawer */
    .menu-item-103002 .wd-dropdown-menu,
    li.menu-item-103002 .wd-dropdown-menu {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .menu-item-103002 .wd-dropdown-menu .container,
    li.menu-item-103002 .wd-dropdown-menu .container {
        max-width: 100% !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* DEFAULT (collapsed): hide the sub-menu list. Our JS shim adds
       `.ep-mobile-open` to the parent <li> when the arrow/row is tapped. */
    .menu-item-103002 .wd-dropdown-menu,
    .menu-item-103002 ul.wd-sub-menu,
    li.menu-item-103002 ul.wd-sub-menu {
        display: none !important;
    }

    /* OPENED state: parent <li> gets `.ep-mobile-open` via JS */
    .menu-item-103002.ep-mobile-open > .wd-dropdown-menu {
        display: block !important;
    }
    .menu-item-103002.ep-mobile-open .wd-dropdown-menu ul.wd-sub-menu,
    .menu-item-103002.ep-mobile-open > ul.wd-sub-menu,
    li.menu-item-103002.ep-mobile-open ul.wd-sub-menu {
        column-count: 1 !important;
        column-gap: 0 !important;
        column-fill: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .menu-item-103002 ul.wd-sub-menu > li {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        break-inside: auto !important;
        -webkit-column-break-inside: auto !important;
        page-break-inside: auto !important;
        break-before: auto !important;
        -webkit-column-break-before: auto !important;
    }
    .menu-item-103002 ul.wd-sub-menu > li > a {
        display: block !important;
        padding: 12px 24px 12px 40px !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #1e293b !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* No injected ::before "BY GOAL" header on mobile (overkill in drawer) */
    .menu-item-103002 ul.wd-sub-menu > li:first-child::before {
        display: none !important;
    }

    /* Eyebrows ("FEATURED GUIDES" / "BY PEPTIDE") rendered as
       proper section headers in the mobile drawer */
    .menu-item.ep-menu-eyebrow > a,
    .wd-nav-mobile .menu-item.ep-menu-eyebrow > a {
        pointer-events: none !important;
        cursor: default !important;
        display: block !important;
        padding: 18px 24px 8px 24px !important;
        margin-top: 8px !important;
        color: #0f172a !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .menu-item.ep-menu-eyebrow > a:hover {
        background: #f8fafc !important;
        color: #0f172a !important;
    }

    /* "View All Guides →" / "All Peptides →" — CTA links on mobile */
    .menu-item.ep-menu-view-all > a,
    .wd-nav-mobile .menu-item.ep-menu-view-all > a {
        color: #2563eb !important;
        font-weight: 700 !important;
        background: #eff6ff !important;
        margin-top: 4px !important;
    }

    /* Arrow rotation: flip caret 180° when GUIDES is open */
    .menu-item-103002 > .wd-sub-opener,
    .menu-item-103002 .wd-sub-opener {
        transition: transform 0.2s ease !important;
    }
    .menu-item-103002.ep-mobile-open > .wd-sub-opener,
    .menu-item-103002.ep-mobile-open .wd-sub-opener {
        transform: rotate(180deg) !important;
    }
}