/* Shared chrome — white / black */
.range-bar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;
  padding-top:max(10px, env(safe-area-inset-top, 0px));
  background:#fff;
  border-bottom:1px solid #e6e6e6;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
}
.range-bar a{color:#111;text-decoration:none}
.range-brand{display:flex;align-items:center;gap:8px;min-width:0;font-weight:700}
.range-brand img{display:none}
.range-brand b{font:700 15px/1 Inter,system-ui,sans-serif;letter-spacing:-.03em}
.range-brand em{display:none}
.range-nav{display:flex;gap:2px;align-items:center}
.range-nav a{
  font-size:14px;padding:8px 10px;color:#5c5c5c;
  min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
}
.range-nav a:hover,.range-nav a.on{color:#111}
.range-nav .go{
  background:#111;color:#fff!important;font-weight:650;
  padding:8px 14px;min-height:44px;border-radius:8px;margin-left:6px;
}
body.has-range-bar .shell-top,
body.has-range-bar header.top,
body.has-range-bar .theme-btn,
body.has-range-bar .boot{display:none !important}

.range-dock{display:none}

/* Pack cards may be whole-card links on home */
a.pack{text-decoration:none;color:inherit}
a.pack:focus-visible{outline:2px solid #111;outline-offset:2px}
.pack .btn,.pack button{min-height:48px}
.home-h2{font-size:1.05rem;margin:40px 0 14px;font-weight:650;letter-spacing:-.02em}

/* Checkout modal owns the screen — chrome must not sit on it */
body:has(.modal:not(.hidden)) .range-bar,
body:has(.modal:not(.hidden)) .range-dock,
body:has(#pm-ov.on) .range-bar,
body:has(#pm-ov.on) .range-dock,
body:has(.modal-overlay.active) .range-bar,
body:has(.modal-overlay.active) .range-dock,
body:has(.modal-overlay.visible) .range-bar,
body:has(.modal-overlay.visible) .range-dock{
  visibility:hidden;pointer-events:none;
}

@media(max-width:640px){
  .range-bar{padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top, 0px))}
  /* Bottom dock is the mobile chrome — don't duplicate the same three links up top */
  .range-nav{display:none}
  body.has-range-dock{
    padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .range-dock{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:70;
    gap:8px;
    padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:#fff;
    border-top:1px solid #e6e6e6;
  }
  .range-dock a{
    flex:1;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:13px;
    font-weight:650;
    color:#111;
    background:#fff;
    border:1px solid #e6e6e6;
    text-decoration:none;
  }
  .range-dock a.go{background:#111;color:#fff;border-color:#111}
  .range-dock a.on{border-color:#111}
}

@media(max-width:560px){
  .row .btn{flex:1 1 100%}
  .packs{grid-template-columns:1fr}
}
@media(min-width:561px) and (max-width:639px){
  .packs{grid-template-columns:repeat(2,minmax(0,1fr))}
}