.cddrop { position: absolute; inset: 0 0 auto 0; pointer-events: none; z-index: 100070; }
.cddrop__backdrop { position: fixed; inset: 0; opacity: 0; transition: opacity .2s; background: rgba(0,0,0,.25); }

.cddrop__panel{
  position: absolute;
  box-sizing: border-box;
  min-width: 740px;
  max-width: 100%;
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 16px;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
@media (min-width: 1200px) and (max-width: 1400px){
	.cddrop__panel{
	  max-height: calc(100vh - 160px);
	}
}

.cddrop__close{
  position: absolute; top: 8px; right: 8px;
  border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer;z-index: 1;
}

.cddrop.is-open { pointer-events: auto; }
.cddrop.is-open .cddrop__backdrop { opacity: 1; }
.cddrop.is-open .cddrop__panel { opacity: 1; transform: translateY(0); }

.cddrop__grid{
  display: grid;
  gap: 0;
  grid-template-columns: 360px 540px;              /* справа 0 до наведения */
  transition: grid-template-columns .24s ease; /* плавная ширина второй колонки */
}

.cddrop__grid.has-pane { grid-template-columns: 360px minmax(540px, 1fr); }

.cddrop__col1 {
    overflow: hidden;
    background: #eee;
}

.cddrop__col2{
  background: #fff;
  min-height: 360px;
  min-width: 490px;
  overflow: auto;
  opacity: 0; visibility: hidden; transform: translateX(8px);
  transition: opacity .24s ease, visibility .24s, transform .24s ease;
}
.cddrop__col2.is-visible{ opacity: 1; visibility: visible; transform: translateX(0); }

/* ===== 1-й уровень ===== */
.cddrop__lvl1 { list-style: none; margin: 0; padding: 0; display: block; }
.cddrop__l1-item { border-bottom: 1px solid #eee; }
.cddrop__l1-item:last-child { border-bottom: 0; }

.cddrop__l1-link{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 8px; text-decoration: none; color: #111;
}
.cddrop__l1-link:hover { background: #ffc700; }

.cddrop__arrow{
  flex: 0 0 auto; width: 1em; height: 1em;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .16s ease;
}
.cddrop__arrow::before{ content: "›"; font-size: 18px; line-height: 1; opacity: .6; }
.cddrop__l1-link[aria-expanded="true"] .cddrop__arrow{ transform: rotate(90deg); }

/* ===== 2-й уровень ===== */
.cddrop__pane{ padding: 0px 16px; }
.cddrop__pane[hidden]{ display: none !important; }

.cddrop__lvl2{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cddrop__l2-link{ display: block; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: #333; }
.cddrop__l2-link:hover{ background: #ffc700; }


.cddrop__l2-inline{ padding: 6px 8px 10px; }
.cddrop__l2-inline[hidden]{ display: none !important; }

@media (min-width: 1200px) and (max-width: 1367px) {
	.cddrop__l1-link {
		padding: 5px 5px;
	}
	.cddrop__l2-link {
		padding: 5px 5px;
	}
}

@media (max-width: 1023.98px){
  .cddrop__panel{
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: 0 !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: 100dvh !important; max-height: none;
    border-radius: 0;
    padding: 20px 16px 24px;
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    overflow-x: hidden;
  }

  .cddrop__grid{
    grid-template-columns: 1fr;
    width: 100%;
    overflow-x: hidden;
  }

  .cddrop__col2{ display: none !important; }
  .cddrop__col1{ }
  .cddrop__nav{ height: 100%; overflow: auto; padding-top: 24px; }
}


html.cddrop-lock, body.cddrop-lock { overflow: hidden; width: 100%; touch-action: none; }


.cddrop.is-open, .cddrop__panel, .cddrop__nav { overscroll-behavior: contain; }