/* -------- Off-canvas shell (no Bootstrap) -------- */
.csk-shelf { position: fixed; inset: 0; z-index: 1075; display: grid;
  grid-template-columns: auto; grid-template-rows: 1fr; pointer-events: none; }
.csk-shelf .csk-shelf-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 1065; opacity: 0; transition: opacity .2s ease; }
.csk-shelf .csk-shelf-panel { position: fixed; top: 0; bottom: 0; left: 0;
  width: min(var(--ddnav-width, 360px), 92vw); max-width: 100vw;
  background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateX(-100%); transition: transform .2s ease; z-index: 1076; }

.csk-shelf.is-open { pointer-events: auto; }
.csk-shelf.is-open .csk-shelf-backdrop { opacity: 1; }
.csk-shelf.is-open .csk-shelf-panel { transform: translateX(0); }

/* Prevent page scroll while open */
html.csk-shelf-lock { overflow: hidden; }

/* -------- Drilldown internals -------- */
.csk-ddnav { display: flex; flex-direction: column; height: 100%; }
.csk-ddnav.is-cloaked { visibility: hidden; }
.csk-ddnav.ready { visibility: visible; }

.csk-ddnav .stack { position: relative; flex: 1 1 auto; overflow: hidden; }
.csk-ddnav .stack-inner { display: flex; height: 100%; width: 100%; transform: translateX(0); will-change: transform; transition: transform .2s ease; }
.csk-ddnav .panel { flex: 0 0 100%; min-width: 100%; max-width: 100%; height: 100%; overflow: auto; border-right: 1px solid rgba(0,0,0,.06); background: #fff; }
.csk-ddnav .panel > header { position: sticky; top: 0; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(0,0,0,.08); background: inherit; z-index: 1; }
.csk-ddnav .panel > header .dd-back { border: 0; background: none; font: inherit; cursor: pointer; padding: .25rem .5rem; opacity: .7; }
.csk-ddnav .panel > header .dd-back:disabled { opacity: .35; cursor: default; }
.csk-ddnav .panel > ul { margin: 0; padding: 0; list-style: none; }

/* Menu rows */
.csk-ddnav .panel li { margin: 0; }
.csk-ddnav .panel li + li a { border-top: 1px solid rgba(0,0,0,.06); }
.csk-ddnav .panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; text-decoration: none; color: inherit;
}
.csk-ddnav .panel a.link-next::after { content: '›'; font-weight: 600; margin-left: .5rem; }

/* Neutralize theme dropdowns *inside* shelf */
.csk-ddnav ul.sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; }
.csk-ddnav li { float: none !important; position: static !important; }

/* Keep shelf above site backdrops, headers, etc */
#masthead,
.storefront-primary-navigation,
.storefront-primary-navigation .col-full { position: relative; z-index: 10; }

/* Hide original primary navs (Storefront) */
#site-navigation.main-navigation,
.main-navigation,
.storefront-primary-navigation > .col-full > .menu { display: none !important; }

/* Minimal button look if your theme doesn’t style .btn */
.btn { display:inline-block; padding:.5rem .75rem; border:1px solid #d0d7de; background:#fff; border-radius:.375rem; cursor:pointer; }
.btn:focus { outline: 2px solid #5b9dd9; outline-offset: 2px; }
.btn.btn-outline-secondary { background:#fff; }

/* Shelf container is fixed-position with inset:0; just bump its top when admin bar exists */
body.logged-in.admin-bar .csk-shelf .csk-shelf-panel { padding-top: 32px; }
@media (max-width:782px){
  body.logged-in.admin-bar .csk-shelf .csk-shelf-panel { padding-top: 46px; }
}

/* Make sure the Back button is always visible and clickable */
.csk-shelf .dd-back{
  appearance:none;
  background:transparent;
  border:0;
  color: inherit;          /* don’t go white-on-white */
  padding:.25rem .5rem;
  min-width:2.25rem;       /* keeps the chevron tappable */
  line-height:1;
  cursor:pointer;
  opacity: .75;
}
.csk-shelf .dd-back[disabled]{
  cursor: default;
  opacity:.45;             /* dim, but don’t hide */
  visibility: visible;     /* override any theme rules */
}

/* Ensure the header isn’t cropping it */
.csk-shelf .panel > header{
  display:flex;
  align-items:center;
  gap:.5rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
}

/* Hide Back when we're on the root panel */
.csk-ddnav[data-depth="0"] .dd-back { display: none; }

/* (optional) looks for Back when shown */
.csk-ddnav .dd-back{
  appearance:none; background:transparent; border:0; padding:.25rem .5rem;
  min-width:2.5rem; line-height:1; cursor:pointer; opacity:.85;
}