.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:981px){
  .app-shell>.calendar-area,
  .app-shell>.shopping-area{grid-column:2;grid-row:1}
}
.calendar-area.hidden,
.shopping-area.hidden{display:none!important}
.shopping-header{margin-bottom:4px}
.shopping-add-form{display:grid;gap:6px}
.shopping-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.shopping-add-row input{min-height:44px}
.shopping-list{display:grid;gap:8px}
.shopping-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid color-mix(in srgb,var(--border) 72%,transparent);border-radius:14px;background:color-mix(in srgb,var(--card) 88%,transparent)}
.shopping-item.is-checked{opacity:.62}
.shopping-item.is-checked .shopping-label{text-decoration:line-through}
.shopping-check{display:grid;place-items:center;margin:0}
.shopping-check input{width:20px;height:20px}
.shopping-label{width:100%;border:0;background:transparent;color:var(--text);font-weight:700;font-size:15px;padding:6px 0}
.shopping-delete{border:0;background:transparent;color:var(--danger,#B85C42);font-weight:700;cursor:pointer;padding:8px}
.shopping-clear{justify-self:start}
.nav-count{margin-inline-start:auto;min-width:20px;height:20px;border-radius:999px;background:var(--accent);color:var(--on-accent,#fff);font-size:11px;font-weight:800;display:inline-grid;place-items:center;padding:0 6px}
.mobile-bottom-nav .nav-count{position:absolute;top:4px;inset-inline-end:18%;min-width:16px;height:16px;font-size:10px}
.mobile-bottom-nav button{position:relative}
@media(max-width:980px){
  .shopping-area{padding:0}
}