/**
 * Produktoversigt på mobil (≤ 991 px): varerne vises først, og filtrene ligger i en skuffe,
 * som åbnes med knappen "Filtrér". Hører sammen med jn-filter-mobil.js.
 */
.jn-filt-knap, .jn-filt-luk, .jn-filt-bund, .jn-filt-scrim { display: none; }
@media (max-width: 991px) {
  :is(#brxe-pa4con, #brxe-gr2con) > :is(#brxe-pa4sid, #brxe-gr2sid) { display: none !important; }
  body.jn-filter-aaben { overflow: hidden; }
  body.jn-filter-aaben :is(#brxe-pa4con, #brxe-gr2con) > :is(#brxe-pa4sid, #brxe-gr2sid) {
    display: flex !important; flex-direction: column; gap: 2rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100003;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 2rem 2rem 0;
    background: var(--jn-color-side, #F1E6DA);
    border-top: 1.5px solid rgba(20, 21, 21, .85);
    border-radius: 24px 14px 0 0 / 16px 24px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 21, 21, .18);
    animation: jnFiltInd .5s cubic-bezier(.65, 0, .35, 1);
  }
  body.jn-filter-aaben :is(#brxe-pa4sid, #brxe-gr2sid) { flex-wrap: nowrap !important; }
  body.jn-filter-aaben :is(#brxe-pa4sid, #brxe-gr2sid) > * { order: 0 !important; flex-shrink: 0; }
  body.jn-filter-aaben :is(#brxe-pa4sid, #brxe-gr2sid) > .jn-filt-bund { order: 99 !important; margin-top: auto; }
  /* Måltidskasse-boksen hører til sidebaren på desktop, ikke i filterskuffen */
  :is(#brxe-pa4sid, #brxe-gr2sid) > :is(#brxe-pa4cal, #brxe-gr2cal) { display: none !important; }
  /* Filtre uden valgmuligheder skjules */
  :is(#brxe-pa4sid, #brxe-gr2sid) > .brxe-block:not(.jn-filt-sort):not(:has(li)) { display: none !important; }
  @keyframes jnFiltInd { from { transform: translateY(100%); } to { transform: none; } }
  body.jn-filter-aaben .jn-filt-scrim { display: block; position: fixed; inset: 0; z-index: 100002; background: rgba(20, 21, 21, .45); animation: jnFiltFade .4s cubic-bezier(.65, 0, .35, 1); }
  @keyframes jnFiltFade { from { opacity: 0; } to { opacity: 1; } }

  /* Filterknappen over varerne */
  .jn-filt-knap {
    display: inline-flex; align-items: center; gap: .8rem; align-self: flex-start;
    margin: 0 0 1.2rem; padding: .9rem 1.6rem; min-height: 4.4rem; scroll-margin-top: 9rem;
    background: #FFFDF9; color: #141515; font: inherit; font-size: 1.6rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid rgba(20, 21, 21, .85);
    border-radius: 14px 8px 12px 9px / 9px 13px 8px 14px;
  }
  .jn-filt-knap svg { width: 2rem; height: 2rem; flex: 0 0 auto; }
  .jn-filt-antal { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem; border-radius: 99rem; background: var(--brxw-color-primary, #005327); color: #fff; font-size: 1.3rem; font-weight: 700; }
  .jn-filt-antal[hidden] { display: none; }

  /* Skuffens indhold */
  .jn-filt-luk { display: inline-flex; align-items: center; gap: .6rem; align-self: flex-end; min-height: 4.4rem; margin: -1rem -.8rem -1.6rem 0; padding: 0 .8rem; background: none; border: 0; font: inherit; font-size: 1.5rem; color: var(--color-pelsbrun, #7E4F25); cursor: pointer; }
  .jn-filt-luk::before { content: '\00d7'; font-size: 2.8rem; line-height: 1; }
  :is(#brxe-pa4sid, #brxe-gr2sid) fieldset { width: 100%; min-width: 0; }
  :is(#brxe-pa4sid, #brxe-gr2sid) .brx-filter-options { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: 100%; gap: .8rem; overflow: visible !important; padding: 0 !important; }
  :is(#brxe-pa4sid, #brxe-gr2sid) .brx-filter-options > li { flex: 0 0 auto; margin: 0; }
  .jn-filt-sort { display: flex !important; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 0 !important; }
  .jn-filt-sort label { border: 0 !important; padding: 0 !important; background: none !important; }
  .jn-filt-sort .brx-filter-options, .jn-filt-sort fieldset { display: flex !important; flex-wrap: wrap !important; gap: .8rem; overflow: visible !important; margin: 0; padding: 0; border: 0; }
  .jn-filt-bund { display: block; position: sticky; bottom: 0; align-self: stretch; width: auto; margin: 0 -2rem; padding: 1.2rem 2rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); background: var(--jn-color-side, #F1E6DA); border-top: 1px solid rgba(20, 21, 21, .12); }
  .jn-filt-vis { display: block; width: 100%; min-height: 4.8rem; padding: 0 2rem; border: 0; background: var(--brxw-color-primary, #005327); color: #fff; font: inherit; font-size: 1.6rem; font-weight: 700; cursor: pointer; border-radius: 14px 7px 12px 8px / 8px 13px 7px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.jn-filter-aaben :is(#brxe-pa4sid, #brxe-gr2sid), body.jn-filter-aaben .jn-filt-scrim { animation: none; }
}