/* =====================================================
   KITROOM – SHOP/CATEGORY (PLP)
   ===================================================== */

:root{
  --kr-text: #000;          /* all tekst svart */
  --kr-shop-max: 1280px;    /* desktop container-bredde */
  --kr-pad: 20px;           /* sidepadding desktop */
}

/* ====== CONTAINERS & ALIGN ====== */
/* Samme geometri på tittel/breadcrumb/filter/grid/pagination */
.kr-container,
.woocommerce-breadcrumb,
.woocommerce nav.woocommerce-pagination,
.archive .woocommerce-products-header,
.archive .woocommerce-notices-wrapper{
  max-width: var(--kr-shop-max);
  margin: 0 auto;
  padding-left: var(--kr-pad);
  padding-right: var(--kr-pad);
  box-sizing: border-box;
}

/* Klassiske Woo wrappers – hold dem smale også */
body.woocommerce.archive .site-main,
body.woocommerce.archive #primary{
  max-width: var(--kr-shop-max);
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 0 !important;  /* unngå dobbel padding fra tema */
  padding-right: 0 !important;
}

/* Mobil: full bredde */
@media (max-width: 860px){
  .kr-container,
  .woocommerce-breadcrumb,
  .woocommerce nav.woocommerce-pagination,
  .archive .woocommerce-products-header,
  .archive .woocommerce-notices-wrapper,
  body.woocommerce.archive .site-main,
  body.woocommerce.archive #primary{
    max-width: none;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ====== TOPP-INFO ====== */
.archive .woocommerce-breadcrumb{
  margin: 0 0 6px;
  color: var(--kr-text);
}

/* Skjul breadcrumb på produktsøk */
.search.woocommerce .woocommerce-breadcrumb{ display: none !important; }

/* Tittel: linje og margin */
.kr-archive__title{
  margin: 8px 0 10px;
  padding: 0;
  line-height: 1.15;
  color: var(--kr-text);
}

/* Egen resultatlinje */
.kr-result-total{
  margin: 10px 0 16px;
  font-size: .98rem;
  color: var(--kr-text);
}

/* ====== GRID – FAST 4 KOLONNER (2 på mobil) ====== */
/* Null ut eldre float/liste */
.woocommerce ul.products, ul.products{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Fjern Woo clearfix-pseudo som kan stjele første celle */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after{
  content: none !important;
  display: none !important;
}

/* Grid-oppsett */
.woocommerce ul.products, ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
}

/* Mobil 2 kolonner */
@media (max-width: 860px){
  .woocommerce ul.products, ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
}

/* ====== PRODUKTKORT ====== */
.woocommerce ul.products li.product{
  position: relative;
  width: auto !important;
  margin: 0 !important;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: box-shadow .18s ease, transform .06s ease;
  overflow: hidden;
}
@media (hover:hover){
  .woocommerce ul.products li.product:hover{
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    transform: translateY(-1px);
  }
}

/* Gjør hele kortet klikkbart */
.woocommerce ul.products li.product a{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ====== BILDE (1:1) ====== */
.woocommerce ul.products li.product a img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: #f6f7f9;
  transform: translateZ(0);
  transition: transform .25s ease, opacity .2s ease;
  vertical-align: top; /* hindrer ekstra linje-høyde under bilde */
}
@media (hover:hover){
  .woocommerce ul.products li.product a:hover img{
    transform: scale(1.02);
  }
}

/* ====== BADGE-WRAP & BADGE (Nyhet) ====== */
.krnp-thumbwrap{ position: relative; display: block; line-height: 0; }
.krnp-thumbwrap img{ position: relative; z-index: 1; display: block; width: 100%; }

.kr-badge-new{
  position: absolute; top: 10px; left: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; line-height: 1;
  font-size: 12px; font-weight: 800; letter-spacing: .2px;
  color: #0f172a;
  background: linear-gradient(180deg, #e6f6ff 0%, #d7f0ff 100%);
  border: 1px solid #bae6fd;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(2,132,199,.15);
  pointer-events: none;
}
.kr-badge-new__icon{ width: 14px; height: 14px; display: block; flex: 0 0 14px; }

/* ====== TITTEL ====== */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  margin: 8px 8px 2px;
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--kr-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.28em * 2); /* reserver plass til 2 linjer */
}
@media (max-width: 860px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 0.92rem;
    line-height: 1.25;
    margin: 10px 6px 2px;
    -webkit-line-clamp: 3;
    min-height: calc(1.25em * 3);
  }
}

/* ====== PRIS ====== */
.woocommerce ul.products li.product .price{
  margin: 0 10px 12px;
  font-size: 1.14rem;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--kr-text);
}
.woocommerce ul.products li.product .price del{
  opacity: .65;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins{
  text-decoration: none;
  color: var(--kr-text);
}

/* Skjul uønsket i grid */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .star-rating{
  display: none !important;
}

/* ====== PAGINATION / LOAD MORE ====== */
.woocommerce nav.woocommerce-pagination{
  max-width: var(--kr-shop-max);
  margin: 24px auto;
  padding: 0 var(--kr-pad);
}
.woocommerce nav.woocommerce-pagination ul{
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0; padding: 0;
}
.woocommerce nav.woocommerce-pagination .page-numbers{
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f3f4f6;
  text-decoration: none;
  color: var(--kr-text);
}
.woocommerce nav.woocommerce-pagination .page-numbers.current{
  background: #e5e7eb;
  font-weight: 700;
}

/* "Last inn flere": behold wrapper/sentinel for auto-load, men SKJUL KNAPPEN */
.kr-loadmore{
  display: block;           /* behold blokken for spacing/sentinel */
  max-width: var(--kr-shop-max);
  margin: 16px auto 32px;
  padding: 0 var(--kr-pad);
}
.kr-loadmore__btn{
  display: none !important; /* <— skjul uansett hva JS gjør */
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.kr-loadmore__btn[disabled]{ opacity: .6; cursor: default; }
.kr-loadmore__sentinel{ height:1px; width:100%; }

/* ====== FILTER & CHIPS ====== */
.kr-archive__topbar{
  display: grid;
  gap: 12px;
  align-items: start;
  padding-top: 4px;
}

.kr-plp__filters{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
@media (max-width: 1180px){
  .kr-plp__filters{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .kr-plp__filters{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.kr-filter{ display: grid; gap: 6px; }
.kr-filter__label{
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: #000;
  opacity: .9;
  margin-bottom: 6px;
}

.kr-filter select,
.kr-filter input[type="number"],
.kr-filter input[type="range"]{
  width: 100%;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 10px;
  font: inherit;
  background: #fff;
  color: #000;
}

.kr-filter select[multiple]{
  height: 40px;
  padding-right: 28px;
  overflow-y: auto;
}

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

.kr-filter__submit{
  height: 40px;
  border-radius: 10px;
  border: 0;
  background: #000;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* Aktive chips */
.kr-plp__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kr-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-size: .9rem;
}
.kr-chip__label{ opacity:.75; }
.kr-chip__x{ font-weight: 900; line-height: 1; }
.kr-chip--clear{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* =====================================================
   KITROOM – New Arrivals Row (horizontal scroller)
   Match PLP look – NAMESPACE: .krnp (FORCE)
   ===================================================== */

:root{
  --kr-text: #000;
  --kr-shop-max: 1280px;
  --kr-pad: 20px;
}

.krnp{
  margin: 24px 0 10px;
  color: var(--kr-text);
}
.krnp .krnp__head{
  max-width: var(--kr-shop-max);
  margin: 0 auto 12px;
  padding: 0 var(--kr-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.krnp .krnp__title{
  margin: 0;
  font-size: clamp(1.05rem, 1.2vw + .7rem, 1.35rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .2px;
}
.krnp .krnp__actions{ display:flex; align-items:center; gap:12px; }
.krnp .krnp__seeall{
  text-decoration:none;
  font-weight:800;
  font-size:.95rem;
  color: var(--kr-text);
  opacity:.8;
}
.krnp .krnp__seeall:hover{ opacity:1; }

.krnp .krnp__ctrls{ display:inline-flex; gap:8px; }
.krnp .krnp__btn{
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease,border-color .15s ease,transform .06s ease, box-shadow .15s ease;
}
.krnp .krnp__btn:hover{ background:#f7f7f8; border-color:#e1e4ea; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.krnp .krnp__btn:active{ transform: translateY(1px); }
.krnp .krnp__btn[disabled]{ opacity:.4; cursor: default; }

.krnp .krnp__wrap{
  max-width: var(--kr-shop-max);
  margin: 0 auto;
  padding: 0 var(--kr-pad);
}
.krnp .krnp__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.krnp .krnp__track::-webkit-scrollbar{ height: 8px; }
.krnp .krnp__track::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:8px; }
.krnp .krnp__track::-webkit-scrollbar-track{ background:transparent; }

.krnp .krnp-card{
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: box-shadow .18s ease, transform .06s ease;
  overflow: hidden;
  min-width: 0;
}
@media (hover:hover){
  .krnp .krnp-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.08); transform: translateY(-1px); }
}

.krnp .krnp-thumbwrap{ position:relative; display:block; line-height:0; }
.krnp .krnp-thumbwrap img{
  display:block; width:100%;
  aspect-ratio: 1/1;
  object-fit: cover; object-position:center;
  background:#f6f7f9;
  transform: translateZ(0);
  transition: transform .25s ease, opacity .2s ease;
}
@media (hover:hover){
  .krnp .krnp-card:hover .krnp-thumbwrap img{ transform: scale(1.02); }
}

.krnp .kr-badge-new{
  position:absolute !important;
  top:10px !important;
  left:10px !important;
  z-index:6 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:7px 12px !important;
  line-height:1 !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  color:#0f172a !important;
  background:linear-gradient(180deg,#e6f6ff 0%, #d7f0ff 100%) !important;
  border:1px solid #bae6fd !important;
  border-radius:999px !important;
  box-shadow:0 4px 12px rgba(2,132,199,.15) !important;
  pointer-events:none !important;
  white-space:nowrap !important;
}
.krnp .kr-badge-new__icon{ width:14px; height:14px; display:block; flex:0 0 14px; }

.krnp .krnp-title{
  margin: 12px 10px 4px;
  font-size: 1.06rem;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--kr-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.28em * 2);
}
@media (max-width: 860px){
  .krnp .krnp-title{
    font-size: 0.92rem;
    line-height: 1.25;
    margin: 10px 6px 2px;
    -webkit-line-clamp: 3;
    min-height: calc(1.25em * 2);
  }
}
.krnp .krnp-price{
  margin: 0 10px 12px;
  font-size: 1.14rem;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--kr-text);
}
.krnp .krnp-price del{ opacity:.65; margin-right:6px; }
.krnp .krnp-price ins{ text-decoration:none; }

.krnp.krnp--cols-5 .krnp__track{ grid-auto-columns: calc((100% - 4*18px)/5); }
.krnp.krnp--cols-4 .krnp__track{ grid-auto-columns: calc((100% - 3*18px)/4); }
.krnp.krnp--cols-3 .krnp__track{ grid-auto-columns: calc((100% - 2*18px)/3); }
.krnp.krnp--cols-2 .krnp__track{ grid-auto-columns: calc((100% - 1*18px)/2); }

@media (max-width: 860px){
  .krnp .krnp__wrap{ padding: 0 12px; }
  .krnp .krnp__head{ padding: 0 12px; }
  .krnp.krnp--m25 .krnp__track{ grid-auto-columns: calc((100% - 1*12px)/2.5); gap: 12px; }
  .krnp.krnp--m2  .krnp__track{ grid-auto-columns: calc((100% - 1*12px)/2);   gap: 12px; }
  .krnp.krnp--m3  .krnp__track{ grid-auto-columns: calc((100% - 2*12px)/3);   gap: 12px; }
}

.krnp .krnp__empty{
  max-width: var(--kr-shop-max);
  margin: 0 auto;
  padding: 0 var(--kr-pad);
  color: #111;
  opacity: .8;
  font-size: .95rem;
}

/* ===== Badges (container + varianter) ===== */
.kr-plp__imgwrap{ position:relative; }
.kr-badges{
  position:absolute; top:10px; left:10px; z-index:6;
  display:flex; flex-direction:column; gap:6px;
}
.kr-badge-new,
.kr-badge-outlet{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; line-height:1;
  font-size:12px; font-weight:800; letter-spacing:.2px;
  border-radius:999px; pointer-events:none; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}

/* Nyhet – blå */
.kr-badge-new{
  color:#0f172a;
  background:linear-gradient(180deg,#e6f6ff 0%, #d7f0ff 100%);
  border:1px solid #bae6fd;
}

/* Outlet – rød */
.kr-badge-outlet{
  color:#7a1111;
  background:linear-gradient(180deg,#ffe8e8 0%, #ffd9d9 100%);
  border:1px solid #fecaca;
}

/* ==== Badges på produktbilde ========================================== */
.kr-plp__imgwrap{ position:relative; display:block; line-height:0; }
.kr-plp__imgwrap img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }

/* Nyhet (venstre) – beholdt */
.kr-badge-new{
  position:absolute; top:10px; left:10px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; line-height:1;
  font-size:12px; font-weight:800; letter-spacing:.2px;
  color:#0f172a;
  background:linear-gradient(180deg,#e6f6ff 0%, #d7f0ff 100%);
  border:1px solid #bae6fd; border-radius:999px;
  box-shadow:0 4px 12px rgba(2,132,199,.15);
  pointer-events:none;
}

/* Rabatt (høyre) – tydelig kontrast */
.kr-badge-offer{
  position:absolute; top:10px; right:10px; z-index:5;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:28px; padding:0 10px;
  font-size:13px; font-weight:900; letter-spacing:.2px;
  color:#fff; background:#ef4444; /* rød */
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  box-shadow:0 6px 14px rgba(239,68,68,.22);
  pointer-events:none;
}

@media (max-width: 420px){
  .kr-badge-new{ top:8px; left:8px; padding:6px 10px; font-size:11px; }
  .kr-badge-offer{ top:8px; right:8px; min-width:40px; height:26px; font-size:12px; }
}

/* Hindrer at badges overlapper tittel – (tittel ligger under bildet uansett) */
.kr-plp__title{ margin-top:12px; }