/* ============================================================
   Мобильный bottom-sheet (Часть 9, стадия 3). Префикс dkm-.
   Показывается только на мобильном (<=860px); на десктопе — мега-навигация.
   Слайд-уровни: level-1 (корень) -> level-2 (Каталог/Коллекции/О бренде).
   ============================================================ */

/* На десктопе шторка не нужна */
@media (min-width: 861px){
    .dkm-overlay, .dkm-sheet{ display: none !important; }
}

.dkm-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 3998; opacity: 0; visibility: hidden; transition: opacity 280ms ease;
}
.dkm-overlay.dkm-show{ opacity: 1; visibility: visible; }

.dkm-sheet{
    position: fixed; left: 0; right: 0; bottom: 0; height: 85vh;
    background: #fff; border-radius: 16px 16px 0 0;
    z-index: 3999; transform: translateY(100%);
    transition: transform 300ms ease-out;
    display: flex; flex-direction: column; overflow: hidden;
    font-family: "Montserrat", Arial, sans-serif;
}
.dkm-sheet.dkm-show{ transform: translateY(0); }

.dkm-head{
    position: relative; flex-shrink: 0;
    padding: 20px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    min-height: 52px;
}
/* Ползунок-«ручка» — отдельно, прижат к верху по центру шторки, НАД заголовком
   (иначе в flex-потоке он центрировался в один ряд с .dkm-title и они накладывались). */
.dkm-handle{
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; background: #d9d9d9; border-radius: 2px;
}
.dkm-close{
    position: absolute; right: 10px; top: 12px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center; font-size: 20px; color: #666;
    background: none; border: none; cursor: pointer;
}
.dkm-back{
    position: absolute; left: 8px; top: 10px; width: 36px; height: 36px;
    display: none; align-items: center; justify-content: center; font-size: 22px; color: #1a1a1a;
    background: none; border: none; cursor: pointer;
}
.dkm-title{ font-size: 15px; font-weight: 600; color: #1a1a1a; }

/* область уровней */
.dkm-levels{ position: relative; flex: 1; overflow: hidden; }
.dkm-level{
    position: absolute; inset: 0; overflow-y: auto; background: #fff;
    -webkit-overflow-scrolling: touch;
    transition: transform 240ms ease-in-out;
    padding-bottom: 24px;
}
.dkm-level.dkm-level-2{ transform: translateX(100%); }
.dkm-level.dkm-level-2.dkm-active{ transform: translateX(0); }

/* строки */
.dkm-row{
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; padding: 8px 20px; font-size: 17px; color: #1a1a1a;
    border-bottom: 1px solid #f4f4f4; text-decoration: none; cursor: pointer;
}
/* Единый вид пунктов: всё строчными, первая буква заглавная — независимо от того,
   как набрано в файле меню (как на десктопе, .dk-txt). */
.dkm-row-text{ display: block; text-transform: lowercase; }
.dkm-row-text::first-letter{ text-transform: uppercase; }
.dkm-row-arrow, .dkm-row-chev{ color: #b0b0b0; font-size: 16px; flex: 0 0 auto; margin-left: 12px; }

.dkm-group-title{
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #9a9a9a;
    padding: 18px 20px 8px; margin: 0;
}
.dkm-divider{ height: 8px; background: #f7f7f7; }

.dkm-footer{ flex-shrink: 0; display: flex; border-top: 1px solid #f0f0f0; }
.dkm-footer a{
    flex: 1; min-height: 54px; display: flex; align-items: center; justify-content: center;
    gap: 8px; font-size: 14px; color: #1a1a1a; text-decoration: none;
}
.dkm-footer a + a{ border-left: 1px solid #f0f0f0; }