:root{
  --dsm-bg-image: none;
  --dsm-fade-ms: 300ms;
  --dsm-z: 999999;
}

.dsm { position: relative; }

.dsm__open{
  display:inline-flex; align-items:center; gap:12px;
  border:0; background:transparent; cursor:pointer;
  padding:8px 10px; color:inherit;
}
.dsm__hamburger{ display:inline-grid; gap:6px; color:#ffffff}
.dsm__hamburger span{ width:30px; height:3px; background:currentColor; display:block; border-radius:2px; }

/* 300ms fade open/close */
.dsm__overlay{
  position:fixed; inset:0; z-index:var(--dsm-z);
  opacity:0; pointer-events:none;
  transition: opacity var(--dsm-fade-ms) ease;
}
.dsm__overlay.is-open{ opacity:1; pointer-events:auto; }

/* If you still use a background image, it stays behind the sheet */
.dsm__bg{
  position:absolute; inset:0;
  background-image: var(--dsm-bg-image);
  background-size:cover; background-position:center;
  z-index: 0;
}

/* REQUIRED: window background */
.dsm__sheet{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background: #0c1a2b;
  z-index: 2;              /* <-- above backdrop */
}

/* backdrop must be BEHIND the sheet (click outside sheet still closes) */
.dsm__backdrop{
  position:absolute; inset:0;
  border:0; background:transparent; cursor:pointer;
  z-index: 1;              /* <-- below sheet, above bg */
}

.dsm__brand{ padding:18px 18px 0; }
.dsm__brand-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dsm__logo{ max-height:60px; width:auto; }

.dsm__close{
  border:0; background:transparent; color:#fff;
  font-size:44px; line-height:1; cursor:pointer;
  padding:6px 4px;
}

.dsm__divider{
  height:1px;
  background: rgba(214,180,106,0.75);
  margin-top:14px;
}

.dsm__panels{ position:relative; flex:1; overflow:hidden; padding:8px 0 28px; }

/* slide panels */
.dsm__panel{
  position:absolute; inset:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition: transform 260ms ease;
  padding:10px 24px 24px;
}
.dsm__panel.is-active{ transform:translateX(0); }
.dsm__panel.is-left{ transform:translateX(-100%); }

.dsm__list{ list-style:none; margin:0; padding:0; }
.dsm__item{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:12px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.dsm__link{
  color:#fff; text-decoration:none;
  font-size:18px; line-height:1.15;
  padding:3px 0;
}

.dsm__next, .dsm__back{ border:0; background:transparent; cursor:pointer; padding:0px 8px; }
.dsm__next{ color:#d6b46a; font-size:18px; }
.dsm__back{ display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,0.92); margin:8px 0 14px; font-size:18px; }
.dsm__back span{ color:#d6b46a; font-size:18px; line-height:1; }

.dsm__title{ color:rgba(255,255,255,0.78); font-size:18px; margin:0 0 10px; }