.ope-shell {
  --ope-shell-chrome-height: 4rem;
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.ope-shell__nav-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ope-shell__sidebar { flex-shrink: 0; width: 20rem; }
.ope-shell__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Sidebar brand + main top bar — matched height and border */
.ope-shell__sidebar-head,
.ope-shell__topbar {
  box-sizing: border-box;
  height: var(--ope-shell-chrome-height);
  min-height: var(--ope-shell-chrome-height);
  max-height: var(--ope-shell-chrome-height);
}
.shop-instance-heading {
  max-width: min(11rem, 42vw);
}

@media (min-width: 640px) {
  .shop-instance-heading {
    max-width: 14rem;
  }
}

@media (min-width: 1280px) {
  .shop-instance-heading {
    max-width: 18rem;
  }
}

.ope-shell__overlay { display: none; }
@media (max-width: 1023px) {
  .ope-shell__sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .ope-shell__nav-toggle:checked ~ .ope-shell__sidebar { transform: translateX(0); }
  .ope-shell__overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; }
  .ope-shell__nav-toggle:checked ~ .ope-shell__overlay { opacity: 1; pointer-events: auto; }
}
.input-unfold, .form-control { width: 100%; border-radius: .5rem; border: 1px solid var(--color-base-300, #d1d5db); padding: .5rem .75rem; }