/* ================== Vars ================== */
:root{
  --kr-bg:#ffffff;
  --kr-text:#0f172a;
  --kr-muted:#475569;
  --kr-line:#e5e7eb;
  --kr-accent:#0ea5e9;

  --kr-logo-mobile: 38px;
  --kr-logo-desktop: 42px;

  --kr-oc-w: 340px;                 /* Offcanvas width */
  --kr-oc-overlay: rgba(2, 6, 23, .44);

  --kr-radius: 14px;
  --kr-radius-sm: 10px;
}

/* ================== Base ================== */
*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji'}
body{margin:0;color:var(--kr-text);background:#fff}
.kr-wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* ================== Infobar ================== */
.kr-infobar{
  position: relative;               /* was: static */
  z-index: 3001;                    /* over header/filter */
  background:#fafafa; color:#0f172a; border-bottom:1px solid var(--kr-line);
}
.kr-infobar__inner{min-height:34px;display:flex;align-items:center}
.kr-infobar__items{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;width:100%;font-size:.95rem;opacity:.95}
.kr-infobar__items span{white-space:nowrap; display:inline-flex; gap:8px; align-items:center}

/* Mobile infobar rotation */
@media (max-width:980px){
  .kr-infobar{ background:#2f5d6b; color:#fff; }
  .kr-infobar__items{ position:relative; display:block; height:28px; line-height:28px; overflow:hidden; text-align:center; }
  .kr-infobar__items span{ position:absolute; left:50%; top:0; transform:translate(-50%,100%); opacity:0; white-space:nowrap; will-change:transform,opacity; }
  .kr-infobar__items:not(.kr-rot-init) span{ display:none; }
  .kr-infobar__items:not(.kr-rot-init) span:first-child{ display:block; opacity:1; transform:translate(-50%,0); }
  .kr-infobar__items.kr-rot-init span{ display:block; }
  .kr-infobar__items.kr-rot-init span.kr-rot-show{ opacity:1; transform:translate(-50%,0); transition:transform .35s ease, opacity .35s ease; z-index:200; }
  .kr-infobar__items.kr-rot-init span.kr-rot-hide{ opacity:0; transform:translate(-50%,-100%); transition:transform .35s ease, opacity .35s ease; z-index:100; }
}

/* ================== Header ================== */
.kr-header{
  position: relative;               /* was: static */
  z-index: 3000;                    /* over filters/content */
  background:var(--kr-bg);
  border-bottom:1px solid var(--kr-line);
  box-shadow:0 1px 0 var(--kr-line);
}

/* (optional sticky)
.kr-header{ position: sticky; top: 0; z-index: 3000; }
*/

.kr-bar{display:flex;align-items:center}
.kr-bar--desktop{min-height:76px}
.kr-bar--mobile{display:none}

/* Logo */
.kr-logo{display:flex;align-items:center;text-decoration:none;color:var(--kr-text)}
.kr-logo img{height:36px;width:auto;display:block;image-rendering:-webkit-optimize-contrast}

/* ====== Search (neutral container) ====== */
.kr-center{flex:1;display:flex;justify-content:center}
.kr-search{width:100%;max-width:780px;} /* width cap only */

/* ================== Icons (account/cart) ================== */
.kr-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.kr-btnicon{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:999px;border:1px solid var(--kr-line); background:#fff;color:var(--kr-text);text-decoration:none; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .05s ease; box-shadow:0 1px 0 rgba(0,0,0,.02) }
.kr-btnicon:hover{background:#f7f7f7;border-color:#dcdfe4;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.kr-btnicon:active{transform:translateY(1px)}
.kr-cart__count{ position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;line-height:18px;padding:0 5px; border-radius:999px;background:var(--kr-accent);color:#fff;font-size:.7rem;font-weight:700;text-align:center; box-shadow:0 0 0 2px #fff }

/* ================== Desktop navbar ================== */
.kr-navbar{border-top:1px solid var(--kr-line);background:#fff}
.kr-navbar__inner{display:flex;gap:24px;align-items:center;min-height:46px}
.kr-navbar a { color: var(--kr-text); text-decoration: none; }
.kr-navbar a:hover { text-decoration: none; }

.kr-navitem{position:relative;color:var(--kr-text);text-decoration:none;padding:10px 6px;border-radius:8px}
.kr-navitem::after{ content:'';position:absolute;left:8px;right:8px;bottom:3px;height:2px;background:var(--kr-accent); transform:scaleX(0);transform-origin:left;transition:transform .18s ease }
.kr-navitem:hover::after,.kr-navitem:focus-visible::after{transform:scaleX(1)}
.kr-sale{color:#b91c1c;font-weight:600}

/* “Alle drakter” + toggle (desktop trigger) */
.kr-catmega-host { position: relative; display:inline-flex; align-items:center; gap:6px; }
.kr-catmega-host.is-active::after{ transform:scaleX(1); }
.kr-navitem__link { color:var(--kr-text); font-weight:600; }

/* link/button reset */
.kr-navitem__link{
  background:none; border:0; padding:0; margin:0;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font:inherit; color:inherit;
}
.kr-navitem__link:focus-visible{ outline:2px solid rgba(14,165,233,.35); outline-offset:2px; }
.kr-navitem__link.is-active{ color:var(--kr-accent); }

.kr-catmega-toggle{
  margin-left:0; background:#fff; border:1px solid var(--kr-line);
  width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer
}
.kr-catmega-toggle:hover{ background:#f5f6f7; border-color:#dcdfe4; }

/* Desktop Mega Menu */
.kr-catmega{
  position:absolute; left:0; top:calc(100% + 6px);
  min-width: min(92vw, 980px);
  background:#fff; border:1px solid var(--kr-line);
  box-shadow:0 12px 32px rgba(15,23,42,.10);
  padding:16px 0;
  z-index: 3100; /* over filters and content */
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.kr-catmega__inner{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:24px; }
.kr-catmega__col{ min-width:0 }
.kr-catmega__head{ font-weight:800; margin:8px 0 6px; }
.kr-catmega__head a{ color:var(--kr-text); }
.kr-catmega__list{ list-style:none; padding:0; margin:0; }

.kr-catmega__list li a{ display:block; padding:6px 0; color:var(--kr-text); border-radius:6px; }
.kr-catmega__list li a:hover{ background:#f8fafc }

/* Active/ancestor */
.kr-catmega__head a.is-current,
.kr-catmega__list li a.is-current{
  color:var(--kr-text); font-weight:700;
  background:rgba(14,165,233,.08); border-radius:8px; padding-left:6px;
}
.kr-catmega__head a.is-ancestor,
.kr-catmega__list li a.is-ancestor{ color:#0f172a; font-weight:600; }

/* Show – hover / expanded */
@media (hover: hover) and (pointer: fine){
  .kr-catmega-host:hover .kr-catmega,
  .kr-catmega-host[aria-expanded="true"] .kr-catmega{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .14s ease, transform .14s ease;
  }
}
@media (hover: none), (pointer: coarse){
  .kr-catmega-host[aria-expanded="true"] .kr-catmega{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}

/* ================== Offcanvas (mobile/tablet) ================== */
#kr-offcanvas{
  position:fixed; inset:0;
  z-index:6000;                     /* RAISED: above header + filter button */
  display:grid; grid-template-columns:1fr var(--kr-oc-w);
  transform:translateX(100%);
  transition:transform .18s ease;
}
#kr-offcanvas[aria-hidden="false"]{ transform:translateX(0); }

/* Overlay and panel stack above page */
.kr-offcanvas__overlay{
  background:var(--kr-oc-overlay);
  backdrop-filter:saturate(115%) blur(1px);
  z-index:6000;                     /* sits above content */
}
.kr-offcanvas__panel{
  background:#fff; border-left:1px solid var(--kr-line);
  display:flex; flex-direction:column; max-width:var(--kr-oc-w);
  z-index:6001;                     /* above overlay (so it’s clickable) */
}
.kr-offcanvas__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--kr-line); }
.kr-offcanvas__title{ font-weight:800; letter-spacing:.2px; }
.kr-offcanvas__close{ background:none; border:0; cursor:pointer; width:40px; height:40px; border-radius:12px; }
.kr-offcanvas__close:hover{ background:#f5f6f7; }

/* Mobile Nav */
.kr-mnav{ padding:10px 0 18px; overflow:auto; }
.kr-mnav__root{ list-style:none; padding:0; margin:0; }
.kr-mnav__link{
  display:block; width:100%;
  padding:14px 18px; text-decoration:none; color:var(--kr-text);
  border-radius:12px; font-size:1.02rem; font-weight:700; text-align:left;
  background:none; border:0; appearance:none; -webkit-appearance:none; -moz-appearance:none;
  cursor:pointer;
}
.kr-mnav__link:hover{ background:#f8fafc; }
.kr-mnav__link--top{ font-weight:700; }

.kr-mnav__section{ border-top:1px solid var(--kr-line); padding-top:8px; margin-top:4px; }
.kr-mnav__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:0; border-radius:12px; }
.kr-mnav__row--top{ padding:0; }
.kr-mnav__row .kr-mnav__link{ flex:1; padding:14px 12px 14px 18px; }

.kr-acc-toggle{ background:#fff; border:1px solid var(--kr-line); width:38px; height:38px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; }
.kr-acc-toggle:hover{ background:#f5f6f7; border-color:#dcdfe4; }
.kr-acc-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); transition:transform .12s ease; }

.kr-acc-panel[hidden]{ display:none; }
.kr-acc-panel{ padding:6px 0 6px 4px; }
.kr-mnav__list{ list-style:none; padding:0; margin:0; }
.kr-mnav__list--child{ margin-left:12px; border-left:1px dashed #e5e7eb; padding-left:8px; }

.kr-mnav__link.is-current{ font-weight:800; background:rgba(14,165,233,.08); }
.kr-mnav__item.is-ancestor > .kr-mnav__row > .kr-mnav__link{ font-weight:700; }

/* ================== Responsiveness ================== */
@media (min-width:981px){
  .kr-bar--mobile{display:none !important;}
  .kr-bar--desktop{display:flex !important;}
  .kr-searchrow{display:none !important;}
  .kr-logo img{height:var(--kr-logo-desktop);}
  .kr-infobar{background:#fafafa;color:var(--kr-text);}
}
@media (max-width:980px){
  .kr-bar--desktop{display:none}
  .kr-bar--mobile{display:flex;align-items:center;min-height:60px}
  .kr-burger{ background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:10px }
  .kr-burger:hover{background:#f5f6f7}
  .kr-bar--mobile .kr-logo{flex:1;justify-content:center}
  .kr-bar--mobile .kr-logo img{height:var(--kr-logo-mobile);max-width:220px}
  .kr-searchrow{display:block;padding:10px 0 12px}
  .kr-search--mobile{max-width:none}
  .kr-navbar{ display:none !important; } /* On mobile: hide desktop navbar */
  @media (max-width:360px){ .kr-bar--mobile .kr-logo img{height:34px} }
}

/* ================== Reduced motion ================== */
@media (prefers-reduced-motion: reduce){
  .kr-infobar__items.kr-rot-init span.kr-rot-show,
  .kr-infobar__items.kr-rot-init span.kr-rot-hide{ transition:none; }
  .kr-navitem::after{ transition:none; }
}