/* =====================================================
   KITROOM – PLP FILTER (desktop pills + pure-CSS mobile drawer)
   ===================================================== */

:root{
  --kr-dd-bd:#e5e7eb;
  --kr-dd-bg:#fff;
  --kr-dd-active:#111;
  --kr-dd-shadow:0 20px 50px rgba(0,0,0,.18);

  /* Lagrekkefølge (kan justeres mot header/megameny) */
  --z-filterbar: 2000;   /* piller (desktop) */
  --z-panel:     2100;   /* dropdown-paneler (desktop) – under header dersom header ~3000 */
  --z-drawer:    5000;   /* mobil-drawer – over alt, inkl. header */
  --z-filterbtn: 1000;   /* mobil-knapp – under drawer */
}

/* ---------- COMMON ---------- */
.kr-filterbar{
  position: relative;
  display:flex;
  flex-wrap:wrap;
  gap:12px 14px;
  align-items:center;
  z-index: var(--z-filterbar);
}

/* submit fallback */
.kr-filter__submit{ display:none; }

/* Ordering på piller (PC) */
.kr-dd--pris     { order: 10; }
.kr-dd--storrelse{ order: 20; }
.kr-dd--tilstand { order: 30; }
.kr-dd--versjon  { order: 40; }
.kr-dd--arsgang  { order: 50; }
.kr-dd--brand    { order: 60; }
.kr-dd--spiller  { order: 65; }
.kr-dd--lag      { order: 70; }
.kr-sort         { order: 90; margin-left:auto; }

/* ---------- DESKTOP PILLS ---------- */
.kr-dd{
  position:relative;               /* anchor for the panel */
}
.kr-dd > summary{
  list-style:none;
  user-select:none;
  cursor:pointer;
  padding:10px 14px;
  border:1px solid var(--kr-dd-bd);
  border-radius:12px;
  background:var(--kr-dd-bg);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:.86rem;
  color:#000;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.kr-dd > summary::-webkit-details-marker{ display:none; }
.kr-dd > summary::after{
  content:"";
  width:8px; height:8px;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.kr-dd[open] > summary::after{ transform: rotate(-135deg); }

.kr-dd.is-active > summary{
  border-color: var(--kr-dd-active);
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}

/* Desktop panel – anchored to pill (no drifting on scroll) */
.kr-dd__panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  max-width: 420px;
  max-height: min(70vh, 520px);
  overflow: hidden;
  background:#fff;
  border:1px solid var(--kr-dd-bd);
  border-radius:12px;
  box-shadow:var(--kr-dd-shadow);
  padding:0;
  z-index: var(--z-panel);          /* over produktkort/nyheter, under header */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.kr-dd[open] .kr-dd__panel{ opacity:1; transform: translateY(0); }

.kr-dd__inner{
  padding:14px 14px 10px;
  overflow:auto;
  max-height: inherit;
}

.kr-filter__label{ display:block; font-weight:700; margin-bottom:6px; }
.kr-dd__inner input[type="range"]{ width:100%; height:auto; padding:0; }
.kr-dd__inner input[type="range"] + output{
  display:inline-block; margin-left:8px; min-width:56px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Options */
.kr-options{ display:grid; gap:10px; }
.kr-options--cols2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.kr-options--cols3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.kr-opt{ display:flex; align-items:center; gap:10px; font-size:.95rem; }
.kr-opt input[type="checkbox"]{ width:16px; height:16px; accent-color:#111; }

/* Antall-badge – uten parenteser, skjul når 0 */
.kr-count{
  margin-left:auto;
  font-size:.82rem;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  background:#f4f5f6;
  border:1px solid #e5e7eb;
}

/* Sorter (PC) */
.kr-sort{ display:flex; align-items:center; gap:8px; }
.kr-sort label{ font-weight:800; text-transform:uppercase; font-size:.86rem; }
.kr-sort select{ height:40px; border:1px solid #e5e7eb; border-radius:10px; padding:0 10px; font:inherit; }

/* ---------- MOBILE: TOGGLE + DRAWER (pure CSS) ---------- */
.kr-filter-toggle{ display:none; } /* checkbox */

/* “Filter” button on mobile – full width inside container */
.kr-filterbtn{
  display:none; /* only on mobile */
  margin: 6px 0 12px;
  height: 44px;
  padding: 0 14px;
  width: 100%;
  border-radius: 12px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:800;
  text-transform:uppercase;
  position: relative;
  z-index: var(--z-filterbtn);        /* under drawer */
}

/* Drawer (slides over page) */
.kr-drawer{
  position: fixed;
  inset: 0;
  background:#fff;
  z-index: var(--z-drawer);           /* over alt, inkl. header */
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  /* makes content scrollable and leaves space for footer buttons */
  padding-bottom: max(74px, env(safe-area-inset-bottom));
}

.kr-drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #e5e7eb;
}
.kr-drawer__title{ font-weight:900; font-size:1.1rem; }
.kr-drawer__close{
  appearance:none; border:1px solid #e5e7eb; background:#fff; border-radius:10px;
  height:36px; padding:0 12px; font-weight:700; cursor:pointer;
}

.kr-drawer__body{
  padding: 8px 16px;
  overflow:auto;          /* scrolling stays inside drawer */
}

.kr-drawer__footer{
  position: fixed;
  left:0; right:0; bottom:0;
  background:#fff;
  border-top:1px solid #e5e7eb;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px;
}
.kr-drawer__btn{ flex:1; height:44px; border-radius:12px; border:0; font-weight:800; }
.kr-drawer__btn--apply{ background:#111; color:#fff; }
.kr-drawer__btn--clear{ background:#f4f5f6; }

/* Accordion-stil på mobil for details */
.kr-drawer .kr-dd{ border-bottom:1px solid #eee; padding:8px 0; }
.kr-drawer .kr-dd > summary{
  display:flex; justify-content:space-between; align-items:center;
  border:0; padding:8px 0; border-radius:0; box-shadow:none; background:transparent;
  font-size:.95rem; text-transform:none; font-weight:900;
}
.kr-drawer .kr-dd__panel{ position:static; opacity:1; transform:none; box-shadow:none; border:0; padding:0; }
.kr-drawer .kr-dd__inner{ padding:6px 0 10px; overflow:visible; max-height:none; }

/* Desktop vs mobile display */
@media (min-width: 861px){
  .kr-filterbtn,
  .kr-drawer{ display:none; }
  .kr-filterbar--desktop{ display:flex; }
}
@media (max-width: 860px){
  .kr-filterbtn{ display:inline-flex; align-items:center; justify-content:center; line-height:1; }

  .kr-filterbar--desktop{ display:none; }

  /* Åpne drawer */
  .kr-filter-toggle:checked + .kr-filterbtn + .kr-drawer{
    transform: translateX(0);
  }

  /* Når drawer er åpen: gjem knappen slik at den ikke dekker menyen */
  .kr-filter-toggle:checked + .kr-filterbtn{
    opacity: 0;
    pointer-events: none;
  }
}

/* ====== FIX: mobile button centering (Lukk / Nullstill / Filtrer) ====== */

/* Header "Lukk" button */
.kr-drawer__close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}

/* Footer buttons */
.kr-drawer__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;  /* for the <a> Nullstill link */
}

/* Optional: like høyder på alle devices */
@supports(padding:max(0px)){
  .kr-drawer__footer{ gap: 12px; }
  .kr-drawer__btn{ height: 48px; }
}