/*
Theme Name: Mestsolgte Senter
Theme URI: https://mestsolgte.no
Author: Moonlanding AS
Description: Shoppingsenter-tema for mestsolgte.no. Bred header, smal avdelingsrad, produktbildedrevne kort med runde hjørner. Bygget for WooCommerce.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: mestsolgte
WC requires at least: 8.0
WC tested up to: 11.0
*/


:root{
  color-scheme:light;
  --paper:#EBF0EE; --surface:#FFFFFF; --sunken:#E0E8E5;
  --ink:#131E1D; --mute:#62756F; --line:#DCE4E1;
  --deep:#0B3A37; --deep-2:#0F4B46; --deep-ink:#F2F7F6;
  --teal:#08B8B0; --teal-deep:#0A8C86; --gold:#F0C000; --gold-deep:#D9AE00;
  --sale:#BE3327;
  --shadow:0 1px 2px rgba(11,58,55,.05), 0 10px 28px rgba(11,58,55,.07);
  --radius:14px;
  --wrap:1320px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px}

.ms{
  font-family:"Material Symbols Rounded";
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  font-size:24px; line-height:1; user-select:none;
  font-weight:normal; font-style:normal; letter-spacing:normal;
  text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr;
}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.serif{font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:.1px}
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mute);
}
.num{font-variant-numeric:tabular-nums}

/* ---------- 1. utility strip ---------- */
.utility{background:var(--deep); color:rgba(242,247,246,.72); font-size:12.5px}
.utility .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:36px}
.usp-inline{display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.usp-inline li{display:flex; align-items:center; gap:6px}
.usp-inline .ms{font-size:16px; color:var(--teal)}
.utility-links{display:flex; gap:18px}
.utility-links a:hover{color:#fff}

/* ---------- 2. wide header ---------- */
.masthead{background:var(--deep-2); color:var(--deep-ink); position:relative; z-index:5}
.masthead .wrap{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:32px; padding-block:18px;
}
.logo{display:flex; align-items:center; gap:11px}
.logo-text{display:grid; gap:2px}
.tagline{
  font-family:"Instrument Serif",Georgia,serif; font-style:italic;
  font-size:13.5px; color:var(--gold); letter-spacing:.2px; line-height:1;
}
.logo-mark{
  width:38px;height:38px;border-radius:11px;background:var(--teal);
  display:grid;place-items:center;color:#06302E;flex:none;
}
.logo-mark .ms{font-size:22px; font-variation-settings:'FILL' 0,'wght' 400}
.logo-word{font-size:23px; letter-spacing:-.3px; line-height:1}
.logo-word b{font-weight:400; color:var(--teal)}
.logo-word span{color:var(--gold)}

.searchbar{display:flex; background:var(--surface); border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.searchbar:focus-within{box-shadow:0 0 0 2px var(--teal)}
.searchbar .ms{color:var(--mute); font-size:22px; align-self:center; margin-left:14px}
.searchbar input{
  flex:1; border:0; background:transparent; color:var(--ink);
  padding:13px 12px; font:inherit; min-width:0;
}
.searchbar input::placeholder{color:var(--mute)}
.searchbar button{
  background:var(--gold); color:#3A2E00; font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; padding-inline:24px;
}
.searchbar button:hover{background:var(--gold-deep)}

.acts{display:flex; gap:6px}
.act{
  display:grid; justify-items:center; gap:3px; padding:6px 12px; border-radius:10px;
  font-size:11px; color:rgba(242,247,246,.85); position:relative;
}
.act:hover{background:rgba(255,255,255,.08); color:#fff}
.act .ms{font-size:25px}
.badge{
  position:absolute; top:1px; right:6px; min-width:17px; height:17px; padding:0 5px;
  border-radius:9px; background:var(--gold); color:#3A2E00;
  font-size:11px; font-weight:700; display:grid; place-items:center;
}

/* ---------- 3. narrow department rail ---------- */
.rail{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:4}
.rail-track{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-block:10px}
.rail-track::-webkit-scrollbar{display:none}
.dept{
  flex:none; display:grid; justify-items:center; gap:5px; padding:8px 16px; border-radius:12px;
  font-size:12px; color:var(--ink); white-space:nowrap; transition:background .15s, color .15s;
}
.dept .ms{font-size:27px; color:var(--ink); transition:color .15s}
.dept:hover{background:var(--sunken)}
.dept:hover .ms{color:var(--teal-deep)}
.dept.hot{color:var(--teal-deep)} .dept.hot .ms{color:var(--teal-deep)}

/* ---------- 4. hero ---------- */
.hero{margin-top:28px}
.stage{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  min-height:392px; display:grid;
}
.slide{
  grid-area:1/1; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  opacity:0; visibility:hidden; transition:opacity .5s ease;
}
.slide.on{opacity:1; visibility:visible}
.slide-copy{padding:52px 48px; align-self:center; color:var(--ink)}
.tag{
  display:inline-block; background:var(--gold); color:#3A2E00; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:5px; margin-bottom:18px;
}
.slide h1{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:clamp(38px,4.6vw,62px); line-height:1.02; margin:0 0 14px; text-wrap:balance;
}
.slide h1 em{font-style:normal; color:var(--teal-deep)}
.slide p{margin:0 0 26px; max-width:44ch; color:var(--mute); font-size:16px}
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--gold); color:#3A2E00;
  font-weight:600; padding:13px 22px; border-radius:9px; font-size:15px;
}
.btn:hover{background:var(--gold-deep)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{background:var(--sunken)}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.slide-art{position:relative; overflow:hidden; background:var(--deep)}
.scene{position:absolute; inset:0; display:grid; place-items:center}
.scene .ms{font-size:190px; color:rgba(255,255,255,.15); font-variation-settings:'FILL' 1,'wght' 200}

/* senter-tavle i hero — eneste grønne flate her */
.directory{
  position:absolute; inset:0; display:grid; align-content:center; justify-items:stretch;
  padding:34px 44px 34px 12px; gap:0;
}
.dir-head{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,247,246,.55); padding:0 14px 10px;
}
.dir-row{
  display:grid; grid-template-columns:26px 1fr auto auto; align-items:center; gap:14px;
  padding:13px 14px; color:#F2F7F6; border-top:1px solid rgba(242,247,246,.14);
  font-size:14.5px;
}
.dir-row:last-child{border-bottom:1px solid rgba(242,247,246,.14)}
.dir-row .ms{font-size:23px; color:var(--teal)}
.dir-floor{
  font-size:11px; font-weight:600; letter-spacing:.08em; color:rgba(242,247,246,.5);
  font-variant-numeric:tabular-nums;
}
.dir-pill{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--gold); color:#3A2E00; padding:3px 7px; border-radius:20px;
}
.dir-count{font-size:12.5px; color:rgba(242,247,246,.5); font-variant-numeric:tabular-nums}
.dots{position:absolute; left:48px; bottom:26px; display:flex; gap:7px}
.dot{width:26px; height:4px; border-radius:2px; background:var(--line)}
.dot[aria-current="true"]{background:var(--teal-deep)}

/* ---------- sections ---------- */
section{margin-top:52px}
/* annenhver bolk på hvitt, resten på papir */
section.tint{
  background:var(--surface); border-block:1px solid var(--line);
  padding-block:46px; margin-top:56px;
}
section.tint + section.tint{margin-top:0; border-top:0}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:18px}
.sec-head h2{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:31px; margin:0; letter-spacing:.2px}
.see-all{display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:500; color:var(--teal-deep)}
.see-all .ms{font-size:19px}
.see-all:hover{text-decoration:underline}

/* velg avdeling — mørk bolk */
section.dark{
  background:var(--deep); color:var(--deep-ink);
  padding-block:52px; margin-top:56px;
}
section.dark h2{color:#F2F7F6}
section.dark .lead{color:rgba(242,247,246,.68)}
section.dark .see-all{color:var(--teal)}
section.dark .pick{
  background:rgba(255,255,255,.055); border-color:rgba(242,247,246,.16); color:#F2F7F6;
}
section.dark .pick:hover{background:rgba(255,255,255,.11); border-color:var(--teal)}
section.dark .pick > .ms{color:var(--teal)}
section.dark .pick span{color:rgba(242,247,246,.58)}

/* velg avdeling */
.picker{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.pick{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:grid; gap:7px; align-content:start;
  transition:border-color .15s, transform .15s, background .15s;
}
.pick:hover{border-color:var(--teal); background:var(--surface); transform:translateY(-2px)}
.pick > .ms{font-size:29px; color:var(--teal-deep)}
.pick b{font-size:15px; font-weight:600}
.pick span{font-size:12.5px; color:var(--mute); font-variant-numeric:tabular-nums}

/* produktrad */
.row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.thumb{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center;
  background:linear-gradient(155deg, rgba(8,184,176,.12), rgba(8,184,176,.03) 65%, transparent);
}
.thumb .ms{font-size:74px; color:rgba(10,140,134,.45); font-variation-settings:'FILL' 1,'wght' 200}
.flag{
  position:absolute; top:10px; left:10px; background:var(--deep-2); color:#F2F7F6;
  font-size:11px; font-weight:600; letter-spacing:.06em; padding:4px 9px; border-radius:4px;
}
.flag.hot{background:var(--teal); color:#06302E}
.card-body{padding:14px; display:flex; flex-direction:column; gap:7px; flex:1}
.card h3{margin:0; font-size:14px; font-weight:500; line-height:1.35}
.stars{display:flex; align-items:center; gap:4px; font-size:12px; color:var(--mute)}
.stars .ms{font-size:15px; color:var(--gold-deep); font-variation-settings:'FILL' 1,'wght' 300}
.price-line{margin-top:auto; display:flex; align-items:baseline; gap:9px}
.price{font-size:20px; font-weight:700; letter-spacing:-.3px}
.was{font-size:13px; color:var(--mute); text-decoration:line-through}
.stock{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--teal-deep)}
.stock .ms{font-size:15px}

/* tjenestetorget */
.lead{margin:-6px 0 22px; max-width:62ch; color:var(--mute); font-size:15.5px}
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.service{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; display:flex; flex-direction:column; gap:11px;
  transition:border-color .15s, transform .15s, box-shadow .18s;
}
.service:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow)}
.service > .ms{font-size:30px; color:var(--teal-deep)}
.service h3{margin:0; font-size:17px; font-weight:600}
.service p{margin:0; font-size:14px; color:var(--mute)}
.service .partner{
  font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--mute);
}
.service .go{
  margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:500; color:var(--teal-deep);
}
.service .go .ms{font-size:18px}
.service:hover .go{text-decoration:underline}

/* verdt å vite */
.know{background:var(--surface); border-bottom:1px solid var(--line); padding-block:48px; margin-top:0}
.know .lead{margin-bottom:26px}
.link-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.link-cols h4{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
  margin:0 0 12px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.link-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px}
.link-cols a{color:var(--mute)}
.link-cols a:hover{color:var(--teal-deep); text-decoration:underline}

/* usp band */
.band{
  margin-top:52px; background:var(--deep); color:rgba(242,247,246,.74);
}
section.tint + .band{margin-top:0; border-top:0}
.band .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding-block:26px}
.usp{display:flex; gap:12px; align-items:flex-start}
.usp .ms{font-size:27px; color:var(--teal); flex:none}
.usp b{display:block; font-size:14px; font-weight:600; color:#F2F7F6}
.usp span{font-size:13px; color:rgba(242,247,246,.62)}

/* footer */
footer{background:var(--deep); color:rgba(242,247,246,.72); margin-top:0; padding-block:44px 30px}
footer .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
footer h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#F2F7F6; margin:0 0 14px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px}
footer a:hover{color:#fff}
.news{display:flex; gap:8px; margin-top:12px}
.news input{
  flex:1; min-width:0; border:0; border-radius:8px; padding:11px 12px; font:inherit;
  background:rgba(255,255,255,.1); color:#F2F7F6;
}
.news input::placeholder{color:rgba(242,247,246,.5)}
.news button{background:var(--teal); color:#06302E; font-weight:600; padding:0 16px; border-radius:8px}
.colophon{border-top:1px solid rgba(242,247,246,.14); margin-top:32px; padding-top:18px; font-size:12.5px}

/* designnotat */
.note{max-width:var(--wrap); margin:34px auto 60px; padding:0 20px}
.note-inner{
  border:1px dashed var(--line); border-radius:var(--radius); padding:24px;
  background:var(--surface); display:grid; gap:18px;
}
.note h5{margin:0; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}
.specs{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; font-size:13.5px}
.specs dt{font-weight:600; margin-bottom:3px}
.specs dd{margin:0 0 12px; color:var(--mute)}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.sw{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mute)}
.sw i{width:20px; height:20px; border-radius:5px; display:block; border:1px solid var(--line)}

/* ---------- scroll-avsløring ---------- */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .65s cubic-bezier(.22,.7,.3,1), transform .65s cubic-bezier(.22,.7,.3,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.in{opacity:1; transform:none}
.rail{transition:box-shadow .25s ease}
.rail.stuck{box-shadow:0 6px 20px rgba(11,58,55,.09)}

@media (max-width:1080px){
  .picker{grid-template-columns:repeat(3,1fr)}
  .services{grid-template-columns:1fr 1fr}
  .link-cols{grid-template-columns:1fr 1fr; gap:22px 26px}
  .row{grid-template-columns:repeat(3,1fr)}
  .row .card:nth-child(n+4){display:none}
  .band .wrap{grid-template-columns:repeat(2,1fr)}
  footer .wrap{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .services{grid-template-columns:1fr}
  .link-cols{grid-template-columns:1fr}
  .picker{grid-template-columns:repeat(2,1fr)}
  .masthead .wrap{grid-template-columns:1fr auto; gap:16px}
  .searchbar{grid-column:1/-1; order:3}
  .slide{grid-template-columns:1fr}
  .slide-art{display:none}
  .slide-copy{padding:36px 26px}
  .dots{left:26px; bottom:18px}
  .utility-links{display:none}
  .row{grid-template-columns:repeat(2,1fr)}
  .row .card:nth-child(n+3){display:none}
  .specs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .reveal{opacity:1 !important; transform:none !important}
}


/* ============================================================
   WooCommerce — samme kortspråk som forsiden
   ============================================================ */
.woocommerce ul.products,
ul.products{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.woocommerce ul.products li.product,
ul.products li.product{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; margin:0; width:auto; float:none;
  transition:box-shadow .18s, transform .18s;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
li.product .thumb{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--sunken);
  border-radius:var(--radius) var(--radius) 0 0;
}
li.product .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.22,.7,.3,1);
}
li.product:hover .thumb img{transform:scale(1.04)}
li.product .thumb .placeholder{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(155deg, rgba(8,184,176,.12), rgba(8,184,176,.03) 65%, transparent);
}
li.product .thumb .placeholder .ms{font-size:70px; color:rgba(10,140,134,.45); font-variation-settings:'FILL' 1,'wght' 200}
li.product .card-body{padding:14px; display:flex; flex-direction:column; gap:7px; flex:1}
li.product .woocommerce-loop-product__title{
  margin:0 !important; padding:0 !important; font-size:14px; font-weight:500; line-height:1.35;
}
li.product .price{
  margin-top:auto; font-size:20px; font-weight:700; letter-spacing:-.3px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
li.product .price del{display:none}
li.product .price ins{text-decoration:none}
li.product .button, li.product .added_to_cart{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--gold); color:#3A2E00; font-weight:600; font-size:14px;
  padding:11px 16px; border-radius:9px; margin-top:4px; text-align:center;
}
li.product .button:hover{background:var(--gold-deep)}
li.product .star-rating{font-size:12px; color:var(--gold-deep)}

/* arkiv og enkeltprodukt */
.woo-head{padding-block:26px 4px}
.woo-head h1{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:36px; margin:0 0 6px}
.woo-head .woocommerce-result-count{color:var(--mute); font-size:13.5px; margin:0}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select{
  border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--surface); color:var(--ink);
}
.woocommerce div.product div.images img{border-radius:var(--radius)}
.woocommerce div.product .product_title{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:38px}
.woocommerce div.product p.price{font-size:28px; font-weight:700; color:var(--ink)}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt{
  background:var(--gold); color:#3A2E00; font-weight:600; border-radius:9px; padding:13px 22px;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover{background:var(--gold-deep); color:#3A2E00}
.woocommerce .quantity .qty{border:1px solid var(--line); border-radius:9px; padding:10px}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  border-top-color:var(--teal); border-radius:var(--radius); background:var(--surface);
}
.woocommerce-breadcrumb{font-size:13px; color:var(--mute); padding-block:16px 0}
.woocommerce-breadcrumb a{color:var(--mute)} .woocommerce-breadcrumb a:hover{color:var(--teal-deep)}
.woocommerce .woocommerce-ordering{margin-bottom:18px}
.woocommerce nav.woocommerce-pagination ul{border:0; gap:6px; display:flex; justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line); border-radius:9px; background:var(--surface); padding:9px 14px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--deep); color:#F2F7F6; border-color:var(--deep)}

/* sidebygg */
.page-shell{padding-block:8px 48px}
.page-shell h1, .page-shell h2{font-family:"Instrument Serif",Georgia,serif; font-weight:400}
.entry{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px}

@media (max-width:1080px){
  .woocommerce ul.products, ul.products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .woocommerce ul.products, ul.products{grid-template-columns:repeat(2,1fr)}
}

/* skjermleser / hopp-til-innhold */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:99; width:auto; height:auto; clip:auto;
  background:var(--gold); color:#3A2E00; padding:10px 16px; border-radius:9px;
}

/* kategoribilde i avdelingsvelgeren */
.pick-img{
  display:block; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--sunken);
  margin-bottom:2px;
}
.pick-img img{width:100%; height:100%; object-fit:cover; display:block}
section.dark .pick-img{background:rgba(255,255,255,.07)}

/* logo lastet opp i WordPress */
.custom-logo{max-height:46px; width:auto}

/* kategoribeskrivelse */
.term-desc{color:var(--mute); font-size:14.5px; max-width:70ch; margin-top:8px}
.term-desc p{margin:0 0 8px}


/* logo-kolonnen: eget merke eller opplastet logo, med slagord under */
.logo{display:grid; gap:3px; justify-items:start; align-content:center}
.logo .custom-logo{max-height:46px; width:auto; display:block}
.logo-link{display:flex; align-items:center; gap:11px}

/* underkategori-fliser i kategoriarkivet */
ul.products li.product-category{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s}
ul.products li.product-category:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
ul.products li.product-category > a{display:block; color:inherit}
ul.products li.product-category img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; margin:0}
ul.products li.product-category .woocommerce-loop-category__title{margin:0; padding:14px; font-size:15px; font-weight:600; line-height:1.35}
ul.products li.product-category .count{background:var(--sunken); color:var(--mute); border-radius:20px; padding:2px 8px; font-size:12px; font-weight:500; margin-left:6px}

/* WooCommerce setter prosentbredde per kolonnetall — rutenettet vaart styrer bredden */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products li.product{width:auto !important; float:none; margin:0}

/* ---------- kategoritopp ---------- */
.cat-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:18px 0 30px}
.cat-hero.no-art{grid-template-columns:1fr}
.cat-hero-copy{padding:34px 36px; align-self:center}
.cat-hero-copy h1{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:clamp(30px,3.4vw,46px); line-height:1.05; margin:6px 0 10px}
.cat-hero-meta{margin:0; color:var(--mute); font-size:15px; font-variant-numeric:tabular-nums}
.cat-hero-desc{margin-top:14px; color:var(--mute); font-size:14.5px; max-width:60ch}
.cat-hero-desc p{margin:0 0 8px}
.cat-hero-art{position:relative; min-height:230px; background:var(--sunken)}
.cat-hero-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* ---------- underkategori-fliser ---------- */
ul.products li.product-category > a{display:flex; flex-direction:column; height:100%; color:inherit}
ul.products li.product-category .cat-thumb{display:block; background:var(--sunken)}
ul.products li.product-category img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; margin:0}
ul.products li.product-category .woocommerce-loop-category__title{margin:0; padding:16px 18px 18px; font-size:17px; font-weight:600; line-height:1.3; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
ul.products li.product-category .count{background:var(--sunken); color:var(--mute); border-radius:20px; padding:3px 9px; font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums}

@media (max-width:1080px){
  .cat-hero{grid-template-columns:1fr}
  .cat-hero-art{min-height:180px}
  ul.products:has(li.product-category){grid-template-columns:repeat(2,1fr)}
}

/* ---------- like hoye produktkort, ingen hull i radene ---------- */
li.product-category + li.product:not(.product-category){grid-column:1}
ul.products li.product:not(.product-category) .card-body{display:flex; flex-direction:column; gap:7px; flex:1}
ul.products li.product:not(.product-category) .woocommerce-loop-product__title{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
ul.products li.product:not(.product-category) .stars{min-height:18px}
ul.products li.product:not(.product-category) .price{margin-top:auto}
ul.products li.product:not(.product-category) .button,
ul.products li.product:not(.product-category) .added_to_cart{width:100%}

/* verdt aa vite paa kategorisider */
.cat-know{margin-top:44px}
.cat-know .link-cols a .num{color:var(--mute); font-size:13px}

/* WooCommerce sin clearfix legger et pseudo-element i rutenettet og
   dytter det forste kortet ut i kolonne to. Ta det bort. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after{display:none !important; content:none !important}