/* Ohochi Mobile Menu — drill-down (la-vie.pl style), v1.0.0
   Lives inside .mobile-menu-panel (theme drawer). Theme-variable driven,
   so it follows light/dark automatically. Desktop menu is separate. */

.omm { position: relative; }

/* ---- Level 1 (editorial list, matches old .mmp-nav-list look) ---- */
.omm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: omm;
}
.omm-item { border-bottom: 1px solid var(--color-border, #ececf0); }
.omm-item:last-child { border-bottom: none; }
.omm-row { display: flex; align-items: stretch; }
.omm-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 14px 12px 14px 22px;
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semi, 600);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--color-text, #1A1714);
    text-decoration: none;
    transition: color var(--transition, .2s ease), background var(--transition, .2s ease);
}
.omm-link::before {
    counter-increment: omm;
    content: counter(omm, decimal-leading-zero);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semi, 600);
    letter-spacing: 0.12em;
    color: var(--color-text-light, #9a9aa2);
    min-width: 22px;
}
.omm-link:hover,
.omm-link:active {
    color: var(--color-accent-dark, #C98070);
    background: var(--color-bg-alt, #faf7f5);
}
.omm-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-height: 56px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--color-border, #ececf0);
    color: var(--color-text, #1A1714);
    cursor: pointer;
    transition: color var(--transition, .2s ease), background var(--transition, .2s ease);
}
.omm-arrow svg { width: 18px; height: 18px; }
.omm-arrow:hover,
.omm-arrow:active {
    color: var(--color-accent-dark, #C98070);
    background: var(--color-bg-alt, #faf7f5);
}

/* ---- Level 2: panel swap ---- */
.omm.has-open .omm-list { display: none; }
.omm-sub { display: none; }
.omm-sub.is-open {
    display: block;
    animation: ommSlideIn .26s ease both;
}
@keyframes ommSlideIn {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .omm-sub.is-open { animation: none; }
}

/* Back button: "← RZĘSY" */
.omm-back {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 16px 22px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--color-text, #1A1714);
    color: var(--color-text, #1A1714);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semi, 600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition, .2s ease);
}
.omm-back:hover,
.omm-back:active { color: var(--color-accent-dark, #C98070); }
.omm-back svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* "→ Wszystkie produkty" */
.omm-all {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 14px 22px;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-mid, #6f6f76);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border, #ececf0);
    transition: color var(--transition, .2s ease), background var(--transition, .2s ease);
}
.omm-all svg { width: 15px; height: 15px; flex: 0 0 auto; }
.omm-all:hover,
.omm-all:active {
    color: var(--color-accent-dark, #C98070);
    background: var(--color-bg-alt, #faf7f5);
}

/* Subcategory links */
.omm-sub-list { list-style: none; margin: 0; padding: 0; }
.omm-sub-list li { border-bottom: 1px solid var(--color-border, #ececf0); }
.omm-sub-list li:last-child { border-bottom: none; }
.omm-sub-list a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 13px 22px;
    font-size: 1rem;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #1A1714);
    text-decoration: none;
    transition: color var(--transition, .2s ease), background var(--transition, .2s ease);
}
.omm-sub-list a::after {
    content: '\2192';
    margin-left: auto;
    font-size: 0.9375rem;
    color: var(--color-text-light, #9a9aa2);
    transition: transform var(--transition, .2s ease), color var(--transition, .2s ease);
}
.omm-sub-list a:hover,
.omm-sub-list a:active {
    color: var(--color-accent-dark, #C98070);
    background: var(--color-bg-alt, #faf7f5);
}
.omm-sub-list a:hover::after { transform: translateX(4px); color: var(--color-accent-dark, #C98070); }

/* While a subpanel is open, hide the drawer footer (la-vie keeps focus on the level) */
.mobile-menu-panel.omm-sub-open .mmp-footer,
.mobile-menu-panel.omm-sub-open .mmp-cats { display: none; }

/* ---- Dark theme safety (vars are redefined by the theme; fallbacks only) ---- */
html[data-theme="dark"] .omm-link,
html[data-theme="dark"] .omm-arrow,
html[data-theme="dark"] .omm-back,
html[data-theme="dark"] .omm-sub-list a { color: var(--color-text, #f0ece6); }
html[data-theme="dark"] .omm-back { border-bottom-color: var(--color-text, #f0ece6); }
html[data-theme="dark"] .omm-link:hover, html[data-theme="dark"] .omm-link:active,
html[data-theme="dark"] .omm-arrow:hover, html[data-theme="dark"] .omm-arrow:active,
html[data-theme="dark"] .omm-all:hover, html[data-theme="dark"] .omm-all:active,
html[data-theme="dark"] .omm-sub-list a:hover, html[data-theme="dark"] .omm-sub-list a:active {
    color: var(--color-accent, #d4857c);
    background: var(--color-accent-light, #4a2e2b);
}