/* ==========================================================================
   Custom Drill-Down Mobile Menu
   Replaces the Amasty accordion with slide-in panels.
   All rules scoped to .-mobile to leave desktop completely unaffected.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. DRILL CONTAINER
   Clips off-screen panels during slide animations.
   ------------------------------------------------------------------ */
.ammenu-nav-sections.-mobile .ammenu-drill-custom {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100%;
}

/* ------------------------------------------------------------------
   2. SLIDE ANIMATIONS
   -slide-left  = drilling deeper  (panel enters from right)
   -slide-right = going back       (panel enters from left)
   ------------------------------------------------------------------ */
@keyframes ammenu-drill-slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0.4;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ammenu-drill-slideInFromLeft {
    from {
        transform: translateX(-40%);
        opacity: 0.4;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.ammenu-nav-sections.-mobile .ammenu-drill-custom .-slide-left {
    animation: ammenu-drill-slideInFromRight 0.25s ease-out forwards;
}

.ammenu-nav-sections.-mobile .ammenu-drill-custom .-slide-right {
    animation: ammenu-drill-slideInFromLeft 0.2s ease-out forwards;
}

/* ------------------------------------------------------------------
   3. CHEVRON ROTATION
   In accordion mode the chevron points down/up.
   In drill mode it should point RIGHT (→) for drillable items.
   The Amasty .ammenu-toggle chevron icon is a 14px rotated square;
   we override the accordion rotation to make it point right.
   ------------------------------------------------------------------ */
.ammenu-nav-sections.-mobile .ammenu-drill-custom .ammenu-toggle {
    transform: rotate(270deg);
}

/* ------------------------------------------------------------------
   4. PANEL HEADER (Back button + parent name)
   ------------------------------------------------------------------ */
.ammenu-drill-custom-header {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: 1px solid;
    /* border-color set via KO style binding from color_settings.border */
}

.ammenu-drill-custom-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px 4px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* color set via KO style binding */
}

.ammenu-drill-custom-back:active {
    opacity: 0.7;
}

.ammenu-drill-custom-chevron {
    flex-shrink: 0;
}

.ammenu-drill-custom-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px 12px;
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 1.3;
}

.ammenu-drill-custom-title:hover,
.ammenu-drill-custom-title:focus {
    text-decoration: underline;
}

.ammenu-drill-custom-title.-no-link {
    cursor: default;
}

.ammenu-drill-custom-title.-no-link:hover {
    text-decoration: none;
}

.ammenu-drill-custom-title strong {
    font-weight: 700;
}

.ammenu-drill-custom-viewall {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.6;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   5. MOBILE CONTENT (CMS blocks / custom HTML)
   Rendered for items with mobile_content inside the drill panel.
   ------------------------------------------------------------------ */
.ammenu-drill-custom-content {
    padding: 15px 20px;
    border-bottom: 1px solid;
    border-color: inherit;
    word-wrap: break-word;
    overflow: hidden;
}

.ammenu-drill-custom-content img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------
   6. ITEM LIST OVERRIDES
   Ensure items in drill panels have proper spacing and touch targets.
   ------------------------------------------------------------------ */
.ammenu-nav-sections.-mobile .ammenu-items.-drill-custom > .ammenu-item {
    margin: 0;
    padding: 0;
}

.ammenu-nav-sections.-mobile .ammenu-items.-drill-custom .ammenu-link.-mobile {
    min-height: 44px; /* touch target minimum */
}

/* Remove left-padding indent used by accordion for nested items —
   in drill mode, every panel is flat (no nesting). */
.ammenu-nav-sections.-mobile .ammenu-drill-custom .ammenu-item .ammenu-item {
    padding-left: 0;
}

/* ------------------------------------------------------------------
   7. ROOT ITEMS PADDING
   ------------------------------------------------------------------ */
.ammenu-nav-sections.-mobile .ammenu-items.-root.-drill-custom {
    padding: 10px 0;
}

/* ------------------------------------------------------------------
   8. FOCUS STYLES
   ------------------------------------------------------------------ */
.ammenu-drill-custom-back:focus-visible {
    outline: 2px solid #3a7bd5;
    outline-offset: -2px;
}

.ammenu-drill-custom-title:focus-visible {
    outline: 2px solid #3a7bd5;
    outline-offset: -2px;
}