/*
Theme Name: Kontorlige
Theme URI: https://kontorlige.nu
Author: M Office
Description: Tema til Kontorlige.nu, bygget efter Wireframe 8. Klassisk tema med WooCommerce-understøttelse.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: kontorlige
*/

:root{
  --bg:#F6F6F5; --surface:#FFFFFF; --surface-2:#EFEFEE;
  --ink:#141416; --ink-2:#55575C; --ink-3:#8A8D93;
  --line:#E2E2E0; --line-2:#EDEDEB; --shot:#FFFFFF;
  --wine:#6E2833; --wine-2:#8E3644;
  --stock:#1E7A4B; --stock-soft:#E6F2EB; --warn:#8A6100; --warn-soft:#F7EEDA;
  --font:"Futura","Futura PT","Futura Std","Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Futura","Futura PT","Futura Std","Jost",system-ui,sans-serif;
  --r:999px; --rc:0px;   /* kun knapper er afrundede — billeder og flader har skarpe kanter */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --logo:#575757; --logo-prik:#EE0A12;   /* målt på det rigtige logo fra kontorlige.nu */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141416; --surface:#1C1D20; --surface-2:#232529;
  --ink:#F2F2F0; --ink-2:#B4B7BC; --ink-3:#83868C;
  --line:#2E3034; --line-2:#26282B; --shot:#F7F7F6;
  --wine:#D98795; --wine-2:#E9A3AE;
  --stock:#5ECB93; --stock-soft:#192B21; --warn:#E0B458; --warn-soft:#2C2618;
  --logo:#C9C9C7;
}}
:root[data-theme="dark"]{
  --bg:#141416; --surface:#1C1D20; --surface-2:#232529;
  --ink:#F2F2F0; --ink-2:#B4B7BC; --ink-3:#83868C;
  --line:#2E3034; --line-2:#26282B; --shot:#F7F7F6;
  --wine:#D98795; --wine-2:#E9A3AE;
  --stock:#5ECB93; --stock-soft:#192B21; --warn:#E0B458; --warn-soft:#2C2618;
  --logo:#C9C9C7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%}
button,a{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-decoration:none}
:focus-visible{outline:2px solid var(--wine);outline-offset:2px}


/* ------- butikkens chrome ------- */
.util{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:8px 18px;background:var(--ink);color:#fff;font-size:12.5px}
:root[data-theme="dark"] .util,:root:not([data-theme="light"]) .util{color:var(--bg)}
.seg{display:inline-flex;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);overflow:hidden}
.seg button{font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:.01em;padding:4px 13px;color:rgba(255,255,255,.62)}
.seg button[aria-pressed="true"]{background:#fff;color:#141416}
.lang{position:relative;display:inline-flex}
.util .ur .lang>button{display:flex;align-items:center;gap:5px;padding:2px;opacity:.9}
.util .ur .lang>button:hover{text-decoration:none;opacity:1}
.util .ur .lang>button::after{content:"▾";font-size:8px;opacity:.7}
.flag{width:21px;height:14px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.langpop{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:150px;padding:5px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.util .ur .langpop button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  font-family:var(--font);font-size:13px;font-weight:400;color:var(--ink);opacity:1;text-align:left}
.util .ur .langpop button:hover{background:var(--surface-2);text-decoration:none}
.util .ur .langpop button[aria-pressed="true"]{font-weight:600}
.langpop .flag{box-shadow:0 0 0 1px var(--line)}
.util .ul{display:flex;gap:10px;align-items:center;justify-self:start;min-width:0}
.util .ur{display:flex;gap:18px;align-items:center;justify-content:flex-end;justify-self:end;white-space:nowrap;min-width:0}
.util .ur button{color:#fff;font-size:12.5px;opacity:.85;transition:opacity .18s}
.util .ur button:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.hdr{position:relative;z-index:90;background:var(--surface)}
.util{position:sticky;top:var(--wfbar,0px);z-index:95}
.uspcell{display:flex;align-items:center;gap:8px;min-width:0;justify-self:center}
body.forside .tsoeg{display:none}
body:not(.forside) .usprot{display:none}
.tsoeg{display:flex;align-items:center;gap:8px;min-width:0;
  width:clamp(240px,36vw,440px);padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);transition:border-color .18s,background .18s}
.tsoeg:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.tsoeg svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;opacity:.72}
.tsoeg input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;
  font-family:inherit;font-size:12.5px;padding:2px 0;-webkit-appearance:none;appearance:none}
.tsoeg input::placeholder{color:rgba(255,255,255,.62)}
.tsoeg input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
:root[data-theme="dark"] .tsoeg input,:root:not([data-theme="light"]) .tsoeg input{color:var(--bg)}
.usprot{position:relative;height:20px;min-width:0;max-width:44vw}
.uspwin{position:relative;height:20px}
.uspwin span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .5s ease}
.uspwin span.on{opacity:1}
@media (prefers-reduced-motion:reduce){.uspwin span{transition:none}}
/* under 1000px er der ikke plads til tre ting — så ryger USP-rullen ud */
@media (max-width:1000px){
  .util{grid-template-columns:1fr auto;justify-content:space-between;gap:8px 10px;padding:7px 14px;font-size:12px}
  .usprot{display:none}
  .uspcell{grid-column:1 / -1;order:3;justify-self:stretch}
  .tsoeg{width:100%}
  body.forside .uspcell{display:none}
}
@media (max-width:480px){.util .ur button:last-of-type:not(#langBtn){display:none}}
.nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 20px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.nav .links{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;min-width:0}
.nav .acts{display:flex;gap:8px;align-items:center;justify-self:end}
@media (max-width:920px){
  .nav{grid-template-columns:auto auto;justify-content:space-between;row-gap:12px}
  .nav .links{grid-column:1 / -1;order:3}
  .nav .acts{order:2}
}
.nav .logo{margin-right:10px;font-family:var(--display);font-weight:300;font-size:21px;
  letter-spacing:.085em;text-transform:uppercase;color:var(--logo);line-height:1;white-space:nowrap;
  cursor:pointer;-webkit-font-smoothing:antialiased}
.nav .logo b{font-weight:inherit;color:var(--logo-prik)}
@media (max-width:520px){.nav .logo{font-size:17px;letter-spacing:.07em}}
.nav a{font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a.sale{color:var(--wine)}
.nav a[data-kat]{cursor:pointer;position:relative;padding:3px 0;display:inline-flex;align-items:center;gap:5px}
.nav a[data-kat][aria-expanded="true"]{color:var(--ink)}
.nav a[data-kat]::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .18s}
.nav a[data-kat][aria-expanded="true"]::before{transform:scaleX(1)}
.nav a.sale[data-kat]::before{background:var(--wine)}
.nav a[data-kat] i{width:4px;height:4px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .18s;opacity:.55}
.nav a[data-kat][aria-expanded="true"] i{transform:rotate(-135deg) translateY(0);opacity:1}
.mega{position:absolute;left:0;right:0;z-index:120;background:var(--surface);border-bottom:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.10)}
.megain{max-width:1280px;margin:0 auto;padding:18px 18px 22px;display:grid;gap:22px}
.mgrp{display:grid;gap:6px}
.mrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
@media (max-width:820px){.mrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rumgrp{border-top:1px solid var(--line-2);padding-top:18px}
.rumkick{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:4px 12px;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--r);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.rumkick[hidden]{display:none}
.rumgrp .mhead{color:var(--wine)}
.megain .rum b{font-weight:600}
.megain .alle4{margin-top:6px;padding:10px;font-size:13px;color:var(--ink-2);
  border-top:1px solid var(--line-2);border-radius:0}
.megain .alle4:hover{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.megain a{display:flex;gap:11px;align-items:center;padding:4px 8px;border-radius:8px;cursor:pointer;transition:background .16s}
.megain a:hover{background:var(--surface-2)}
.megain b{display:block;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.25}
.megain small{display:block;font-family:var(--font);font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.megain .mhead{display:flex;gap:10px;align-items:baseline;font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-bottom:2px}
.ibtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--ink);padding:0;transition:opacity .18s}
.ibtn:hover{opacity:.55}
.ibtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ibtn .cnt{position:absolute;top:1px;right:0;min-width:15px;height:15px;border-radius:999px;background:var(--wine);color:#fff;font-family:var(--mono);font-size:9.5px;line-height:1;display:none;align-items:center;justify-content:center;padding:0 4px}
.ibtn .cnt.on{display:inline-flex}
.ibtn.bump{animation:bump .4s ease}
@keyframes bump{0%,100%{transform:scale(1)}45%{transform:scale(1.1)}}


.kfoot{margin-top:52px;background:#121316;color:#fff;padding-block:clamp(32px,4vw,52px) clamp(26px,3vw,40px);padding-inline:clamp(24px,5vw,72px)}
.kftop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 30px;align-items:flex-end}
.kfoot .kontakt{grid-column:2 / -1;justify-self:start}
.kfoot .big{font-family:var(--display);font-weight:600;font-size:clamp(26px,4.4vw,46px);line-height:1.04;
  letter-spacing:-.02em;color:#fff;margin:0}
.kfoot .kontakt{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:15px}
.kfoot .kontakt a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.kfoot .kontakt a:hover{border-color:#fff}
.kfoot .kontakt span{color:rgba(255,255,255,.4)}
.kftop + .kf{margin-top:clamp(34px,4.5vw,56px)}
.kf{margin-top:clamp(34px,4.5vw,56px);display:grid;gap:30px;grid-template-columns:repeat(4,minmax(0,1fr));
  font-size:14px;color:rgba(255,255,255,.66)}
@media (max-width:860px){.kf,.kftop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kf,.kftop{grid-template-columns:1fr}.kfoot .kontakt{grid-column:1}}
.kf h5{margin:0 0 12px;font-size:13px;font-weight:600;color:#fff;letter-spacing:.01em}
.kf p{line-height:1.8}
.kf a{border-bottom:1px solid rgba(255,255,255,.3)}
.kf a:hover{color:#fff;border-color:#fff}
.kf .cvr{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.42)}
.kf .nl{display:flex;align-items:center;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);
  padding:4px 4px 4px 16px;max-width:290px}
.kf .nl span{flex:1;color:rgba(255,255,255,.5);font-size:13.5px}
.kf .nl b{background:#fff;color:#121316;border-radius:var(--r);padding:9px 20px;font-size:13px}
.kf .tiny{margin-top:12px;font-size:11.5px;color:rgba(255,255,255,.42)}
.nlchk{display:flex;gap:9px;align-items:flex-start;cursor:pointer;line-height:1.4}
.nlchk input{position:absolute;opacity:0;width:0;height:0}
.nlchk .box{flex:none;width:14px;height:14px;border:1px solid rgba(255,255,255,.45);margin-top:2px;position:relative;transition:background .15s,border-color .15s}
.nlchk:hover .box{border-color:rgba(255,255,255,.8)}
.nlchk input:checked+.box{background:#fff;border-color:#fff}
.nlchk input:checked+.box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #141416;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.nlchk input:focus-visible+.box{outline:2px solid #fff;outline-offset:2px}
.nlchk a{text-decoration:underline;text-underline-offset:2px}



/* ------- WordPress-basis ------- */
.site-main{max-width:1280px;margin:0 auto;padding:32px 18px 60px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:999;background:var(--surface);padding:10px 16px;border:1px solid var(--line)}
.entry-title{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;margin:0 0 18px}
.entry-content p{margin:0 0 1em}
.entry-content a{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.entry-content h2{font-family:var(--display);font-weight:600;font-size:22px;margin:1.6em 0 .5em}
.entry-content ul,.entry-content ol{margin:0 0 1em 1.2em;padding:0}
.admin-bar .util{top:32px}
@media (max-width:782px){.admin-bar .util{top:46px}}

/* menulinjen: "Alle kategorier" markeres lidt anderledes */
.nav a.alle{color:var(--ink)}
.nav .links a{display:inline-flex;align-items:center;gap:5px}


/* ======== FORSIDEN — hentet fra Wireframe 8 ======== */
/* ------- hero ------- */
.hero{position:relative;overflow:hidden;min-height:clamp(320px,44vw,470px);display:flex;align-items:flex-end}
.hero>img,.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero>img.poster{animation:ken 24s ease-in-out infinite alternate}
/* Videoen ligger oven på plakatbilledet og dækker det, så snart første billede er der. */
.hero>video{z-index:1}
@media (prefers-reduced-motion:reduce){.hero>video{display:none}.hero>img.poster{animation:none}}
.hero .veil,.hero .in{z-index:2}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,14,.66) 0%,rgba(12,12,14,.34) 46%,rgba(12,12,14,.02) 82%)}
.hero .in{position:relative;padding:clamp(26px,3.5vw,44px) clamp(24px,5.5vw,72px) clamp(28px,4vw,50px);color:#fff;max-width:min(660px,90%)}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,5vw,52px);line-height:1;letter-spacing:-.005em}
.hero p{margin-top:10px;font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.9);max-width:34ch}
.search{position:relative;display:flex;margin-top:18px;background:#fff;border-radius:var(--r);max-width:470px;padding:4px 4px 4px 6px}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px 14px;
  font-family:inherit;font-size:13.5px;color:#141416;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#8A8D93}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search b{flex:none;background:#141416;color:#fff;padding:11px 22px;font-size:13.5px;border-radius:var(--r);cursor:pointer;user-select:none}
.search b:hover{background:var(--wine)}
.sugg{position:fixed;z-index:140;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--rc);box-shadow:0 16px 38px rgba(0,0,0,.16);
  padding:6px;max-height:320px;overflow:auto;text-align:left}
.sugg[hidden]{display:none}
.sugg .sh{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 10px 4px}
.sugg button{display:flex;width:100%;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;
  font-size:13.5px;color:var(--ink);text-align:left;background:transparent}
.sugg button:hover,.sugg button[data-akt="1"]{background:var(--surface-2)}
.sugg button em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.sugg .tom{padding:12px 10px;font-size:13px;color:var(--ink-2)}
.playtag{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:10px;color:#fff;background:rgba(10,10,12,.46);padding:5px 12px;border-radius:var(--r);display:flex;gap:6px;align-items:center}
.playtag i{width:0;height:0;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}

.usp{display:flex;flex-wrap:wrap;gap:4px 26px;padding:11px 18px;border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2);background:var(--surface-2)}
.usp b{font-weight:600;color:var(--ink)}

.pad{padding:0 18px}
.sec{margin-top:38px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sechead h2{font-family:var(--display);font-weight:600;font-size:clamp(17px,2.2vw,23px);letter-spacing:-.015em}
.sechead a{font-family:var(--mono);font-size:11px;color:var(--ink-2);border-bottom:1px solid var(--line)}

/* ------- fliser ------- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
/* fire fliser holdes hele vejen ned til tablet — først på mobil deles rækken i to */
@media (max-width:620px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--rc);background:var(--surface-2);display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.07)}
.tile .lab{position:absolute;inset:auto 0 0 0;padding:34px 14px 14px;color:#fff;background:linear-gradient(to top,rgba(10,10,12,.78),rgba(10,10,12,0))}
.tile .lab strong{display:block;font-size:15px;font-weight:600;line-height:1.2}
.tile .lab small{font-family:var(--mono);font-size:10px;opacity:.82}

/* ------- produktkort ------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:920px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--surface);border-radius:3px;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease}
.card:hover{transform:translateY(-3px)}
.card .shot{position:relative;aspect-ratio:1/1;background:var(--shot);border-radius:var(--rc);overflow:hidden}
.card .shot img{width:100%;height:100%;object-fit:contain;padding:8%;transition:opacity .35s ease,transform .6s ease}
.card .shot img.b{position:absolute;inset:0;opacity:0}
.card:hover .shot img.a{opacity:0}
.card:hover .shot img.b{opacity:1}
.card:hover .shot.single img{transform:scale(1.06)}
.badges{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:6px;pointer-events:none}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r);background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.tag.stock{background:var(--stock-soft);color:var(--stock)}
.tag.mid{background:var(--warn-soft);color:var(--warn)}
.tag.sale{background:var(--wine);color:#fff}
.card .b2{padding:11px 2px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.card .brand{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.card .name{font-size:13.5px;font-weight:500;line-height:1.32}
.card .pr{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card .now{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.card .vej{font-size:11px;color:var(--ink-3)}
.card .vat{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.card .solgt{font-family:var(--mono);font-size:10px;color:var(--wine);margin-top:3px}
.card .act{margin-top:11px;display:block;width:100%;text-align:center;border:1.5px solid var(--ink);border-radius:var(--r);padding:11px;font-size:12.5px;font-weight:600;background:transparent;color:var(--ink);transition:background .18s,color .18s,border-color .18s}
.card .act:hover{background:var(--ink);color:var(--bg)}
.card .act.buy{background:var(--ink);color:var(--bg)}
.card .act.buy:hover{background:var(--wine);border-color:var(--wine);color:#fff}

/* ------- vores univers ------- */
.unichips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.unichips button{border:1px solid var(--line);border-radius:var(--r);padding:8px 16px;font-size:13px;color:var(--ink-2);background:var(--surface)}
.unichips button[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.lead{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border-radius:var(--rc);overflow:hidden;background:var(--surface-2)}
@media (max-width:760px){.lead{grid-template-columns:1fr}}
.lead .ph{aspect-ratio:16/10;overflow:hidden}
.lead .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.lead:hover .ph img{transform:scale(1.04)}
.lead .tx{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--wine)}
.lead h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.8vw,32px);line-height:1.06;letter-spacing:-.02em}
.lead p{color:var(--ink-2);font-size:14.5px;max-width:42ch}
.meta{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.posts{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:920px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post{display:flex;flex-direction:column;gap:9px}
.post .ph{aspect-ratio:4/3;border-radius:var(--rc);overflow:hidden;background:var(--surface-2)}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.post:hover .ph img{transform:scale(1.05)}
.post h4{margin:0;font-size:15px;font-weight:600;line-height:1.28}
.post p{font-size:13px;color:var(--ink-2)}
.qa{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.qa{grid-template-columns:1fr}}
.qa a{background:var(--surface-2);border-radius:var(--rc);padding:16px 18px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:14.5px;font-weight:500;transition:background .2s}
.qa a:hover{background:var(--surface);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.qa a em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}

/* ------- kom og besøg os ------- */
.visit{display:grid;grid-template-columns:1fr 1fr;background:var(--surface)}
@media (max-width:820px){.visit{grid-template-columns:1fr}}
.visit .ph{position:relative;min-height:clamp(260px,32vw,430px)}
.visit .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit .tx{padding:clamp(22px,3.6vw,54px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.visit h3{font-family:var(--display);font-weight:600;font-size:clamp(23px,3.2vw,36px);letter-spacing:-.02em;line-height:1.05}
.visit .body{color:var(--ink-2);font-size:15px;max-width:40ch}
.visit .body b{color:var(--ink);font-weight:600;display:block;margin-top:6px}
.tp{display:flex;flex-direction:column;gap:7px}
.tp .lbl{font-size:13.5px;font-weight:600}
.stars{position:relative;width:104px;height:18px}
.stars .row{position:absolute;inset:0;display:flex;gap:3px}
.stars svg{width:18px;height:18px;flex:none}
.stars .grey svg{fill:var(--line)}
.stars .fill{overflow:hidden}
.stars .fill svg{fill:var(--ink)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:2px}
@media (max-width:620px){.quotes{grid-template-columns:1fr;gap:12px}}
.quote strong{display:block;font-size:13px;margin-bottom:4px}
.quote p{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.visit .cbtn{align-self:flex-start;background:var(--ink);color:var(--bg);border-radius:var(--r);padding:12px 26px;font-weight:600;font-size:13.5px;margin-top:4px}
.visit .cbtn:hover{background:var(--wine);color:#fff}


/* ------- leverandør-slider ------- */
.logos{overflow:hidden;position:relative;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos .track{display:flex;gap:44px;width:max-content;animation:slide 44s linear infinite}
.logos:hover .track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nlchk{display:flex;gap:9px;align-items:flex-start;cursor:pointer;line-height:1.4}
.nlchk .box{flex:none;width:14px;height:14px;border:1px solid rgba(255,255,255,.45);margin-top:2px;position:relative}
.nlchk[data-on="1"] .box{background:#fff;border-color:#fff}
.nlchk[data-on="1"] .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #141416;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.nlchk a{text-decoration:underline;text-underline-offset:2px}
.logos .lgi{display:flex;align-items:center;justify-content:center;width:130px;height:44px;flex:none}
.logos .lgi img{max-height:100%;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s}
.logos .lgi:hover img{filter:none;opacity:1}
:root[data-theme="dark"] .logos .lgi img,:root:not([data-theme="light"]) .logos .lgi img{mix-blend-mode:multiply}
.logos .lg{font-family:var(--display);font-weight:500;font-size:clamp(17px,2vw,23px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;transition:color .2s}
.logos .lg:hover{color:var(--ink)}

/* ------- brands-side ------- */
.azbar{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 22px}
.azbar button{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);background:var(--surface)}
.azbar button.has{border-color:var(--ink);color:var(--ink);font-weight:600}
.azbar button:disabled{opacity:.32;cursor:default}
/* ------- kundeudtalelser og kundelogoer ------- */
.cases{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2px}
@media (max-width:820px){.cases{grid-template-columns:1fr;gap:11px}}
.case3{display:flex;flex-direction:column;gap:9px;padding-top:13px;border-top:2px solid var(--ink)}
.case3 blockquote{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.case3 .who{display:flex;align-items:center;margin-top:auto}
.case3 .whotx{display:flex;flex-direction:column;min-width:0}
.case3 .whotx b{font-size:12.5px;font-weight:600;line-height:1.25}
.case3 .whotx span{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.03em}

.clients{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2)}
.clients .lbl4{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:11px}
.clientrow{display:flex;flex-wrap:wrap;gap:9px}
.clientrow .cl{display:flex;align-items:center;justify-content:center;height:46px;padding:0 16px;
  border:1px solid var(--line-2);transition:border-color .2s}
.clientrow .cl img{max-height:30px;max-width:156px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.9;transition:filter .25s,opacity .25s}
.clientrow .cl:hover{border-color:var(--ink)}
.clientrow .cl:hover img{filter:none;opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .clientrow .cl img{filter:grayscale(1) invert(1);opacity:.75}
  :root:not([data-theme="light"]) .clientrow .cl:hover img{filter:invert(1);opacity:1}
}
:root[data-theme="dark"] .clientrow .cl img{filter:grayscale(1) invert(1);opacity:.75}
:root[data-theme="dark"] .clientrow .cl:hover img{filter:invert(1);opacity:1}
.tplink{margin-top:14px;font-size:12.5px;color:var(--ink-2)}
.tplink a{border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
.tplink a:hover{border-color:var(--ink)}
.brandgrid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.brandgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bcard{background:transparent;border:1px solid var(--line-2);border-radius:var(--rc);padding:18px 0 14px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:center;min-height:118px;transition:border-color .2s,transform .2s,box-shadow .2s}
.bcard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.07)}
.bcard .wm{display:flex;align-items:center;justify-content:center;height:clamp(46px,5vw,64px);padding:0 10px;font-family:var(--display);font-weight:500;font-size:clamp(15px,1.7vw,19px);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1.1}
.bcard small{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.azgroup{margin-top:30px}
.azgroup h3{font-family:var(--display);font-weight:600;font-size:22px;color:var(--wine);margin-bottom:12px}
.cattext{max-width:66ch}
.cattext h3{font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:8px}
.cattext p{color:var(--ink-2);font-size:14px;line-height:1.7}

/* ------- brede bånd ------- */
.band{position:relative;overflow:hidden;border-radius:var(--rc);min-height:clamp(200px,26vw,320px);display:flex;align-items:center}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,14,.6),rgba(12,12,14,.12) 62%,transparent)}
.band .in{position:relative;padding:24px;color:#fff;max-width:min(520px,84%)}
.band h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.6vw,30px);line-height:1.04;letter-spacing:-.02em}
.band p{margin-top:8px;color:rgba(255,255,255,.88);font-size:14px;max-width:32ch}
.wbtn{display:inline-block;margin-top:14px;background:#fff;color:#141416;padding:11px 24px;border-radius:var(--r);font-weight:600;font-size:13.5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--rc);overflow:hidden;background:var(--surface-2)}
@media (max-width:680px){.split{grid-template-columns:1fr}}
.split.flip .ph{order:2}
.split.flip .tx{order:1}
@media (max-width:680px){.split.flip .ph{order:1}.split.flip .tx{order:2}}
.split .ph{aspect-ratio:4/3;overflow:hidden}
.split .ph img{width:100%;height:100%;object-fit:cover}
.split .tx{padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.split h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.4vw,27px);line-height:1.06;letter-spacing:-.02em}
.split p{color:var(--ink-2);font-size:14px;max-width:38ch}
/* 'Kom forbi og sid ned' spejler 'Kom og besøg os' — samme skriftstørrelser */
.split.flip h3{font-size:clamp(23px,3.2vw,36px);line-height:1.05}
.split.flip p{font-size:15px;max-width:40ch}
.dark-btn{align-self:flex-start;background:var(--ink);color:var(--bg);padding:11px 24px;border-radius:var(--r);font-weight:600;font-size:13.5px;margin-top:8px}






.vidthumb{position:relative}
.vidthumb .pl2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:999px;
  background:rgba(20,20,22,.78);display:block}
.vidthumb .pl2::after{content:"";position:absolute;left:7.5px;top:5.5px;border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent #fff}
.vidthumb em{position:absolute;right:3px;bottom:3px;font-style:normal;font-family:var(--mono);font-size:8.5px;
  background:rgba(20,20,22,.78);color:#fff;padding:1px 4px;border-radius:2px}
.vidplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(20,20,22,.28);color:#fff;z-index:3}
.vidplay .pl2.big{width:64px;height:64px;border-radius:999px;background:rgba(255,255,255,.94);display:block;position:relative;
  box-shadow:0 8px 28px rgba(0,0,0,.28);transition:transform .2s}
.vidplay:hover .pl2.big{transform:scale(1.06)}
.vidplay .pl2.big::after{content:"";position:absolute;left:25px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #141416}
.vidplay .lab3{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13.5px;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.vidplay .lab3 em{font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.85;font-weight:400}

.bcard .bl{display:block;height:clamp(46px,5vw,64px);padding:0 10px}
.bcard .bl img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .2s,opacity .2s}
.bcard:hover .bl img{filter:none;opacity:1}
.klogo{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}
.klogo b{width:42px;height:42px;border-radius:4px;background:rgba(255,255,255,.92);color:#141416;
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.02em}
.klogo em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.4);cursor:pointer}
.klogo em:hover{color:#fff;border-color:#fff}


/* Wireframet tegnede knapper som <span>; her er de rigtige knapper og links. */
.hero .search button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.tile{display:block}
.routes .route{cursor:pointer}
a.cbtn,a.wbtn{display:inline-block;text-align:center}
/* Wireframet har ingen maksbredde — indholdet går helt ud i kanterne som banneret.
   Luften ind til kanten følger bannerets, så alt flugter. */
.pad{padding-inline:clamp(24px,5vw,72px)}
.kfoot{padding-inline:clamp(24px,5vw,72px)}


/* ======== Kundeservice og kontakt — resten af Wireframe 8 ======== */
/* ------- kundeservice ------- */
.kshead{max-width:60ch}
.kshead h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.6vw,48px);line-height:1.02;letter-spacing:-.025em}
.kshead p{color:var(--ink-2);font-size:16px;margin-top:12px}
.kswrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,46px)}
@media (max-width:880px){.kswrap{grid-template-columns:1fr}}
.ksform{display:flex;flex-direction:column;gap:12px}
.ksform h3{font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:2px}
.fld{border:1px solid var(--line);border-radius:var(--r);padding:13px 18px;font-size:14px;color:var(--ink-3);background:var(--surface)}
.fld.area{border-radius:14px;min-height:118px;align-items:flex-start;display:flex}
.ksform .send{align-self:flex-start;background:var(--ink);color:var(--bg);border-radius:var(--r);padding:13px 28px;font-weight:600;font-size:14px;margin-top:4px}
.ksform .send:hover{background:var(--wine);color:#fff}
.ksor{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)}
.ksor .tel2{display:inline-block;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,27px);letter-spacing:-.01em;border-bottom:2px solid var(--wine);padding-bottom:2px}
.ksor p{font-size:13.5px;color:var(--ink-2);margin-top:10px;max-width:38ch}
.kstopics{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
@media (max-width:520px){.kstopics{grid-template-columns:1fr}}
.kstopic{background:var(--surface-2);padding:20px 18px;display:flex;flex-direction:column;gap:8px;transition:background .2s,transform .2s}
.kstopic:hover{background:var(--surface);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.kstopic svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kstopic strong{font-size:15px;font-weight:600}
.kstopic span{font-size:13px;color:var(--ink-2);line-height:1.45}
.kstopic{text-align:left;cursor:pointer;border:none;width:100%}
.kstopic[aria-current="true"]{background:var(--ink)}
.kstopic[aria-current="true"] strong{color:var(--bg)}
.kstopic[aria-current="true"] span{color:rgba(255,255,255,.7)}
.kstopic[aria-current="true"] svg{stroke:var(--bg)}
.ksfaq{margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line-2);padding-top:26px}
.faqhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.faqhead h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.02em}
.faqhead button{border:1px solid var(--line);border-radius:var(--r);padding:8px 16px;font-size:12.5px;color:var(--ink-2)}
.faqhead button:hover{border-color:var(--ink);color:var(--ink)}
.faqlist{max-width:74ch}
.faqq{width:100%;text-align:left;display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:16px 2px;border-bottom:1px solid var(--line-2);font-size:15.5px;font-weight:500}
.faqq:hover{color:var(--wine)}
.faqq i{font-style:normal;color:var(--ink-3);font-size:18px;line-height:1;flex:none}
.faqa{padding:2px 2px 18px;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-size:14px;line-height:1.65;max-width:66ch}

/* ------- kontakt ------- */
.contact{background:var(--surface-2);border-radius:var(--rc);padding:18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.contact .face{width:62px;height:62px;border-radius:var(--r);overflow:hidden;flex:none}
.contact .face img{width:100%;height:100%;object-fit:cover}
.contact .cx{flex:1 1 200px;min-width:0}
.contact h4{margin:0 0 3px;font-size:15px;font-weight:600;color:var(--ink)}
.contact p{font-size:13px;color:var(--ink-2)}
.contact .tel{display:inline-block;margin-top:9px;font-family:var(--display);font-weight:600;font-size:clamp(19px,2.4vw,25px);letter-spacing:-.01em;color:var(--ink);border-bottom:2px solid var(--wine);padding-bottom:2px}
.contact .ways{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.contact .ways button{border:1.5px solid var(--ink);border-radius:var(--r);padding:9px 16px;font-size:12.5px;font-weight:600}
.contact .ways button:hover{background:var(--ink);color:var(--bg)}
.contact .ways button.pri{background:var(--ink);color:var(--bg)}
.contact .ways button.pri:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.contact.wide{padding:26px}
.cslim{margin-top:14px;padding:13px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.cslim .ctel{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:1px}
.cslim .ctel:hover{border-color:var(--ink)}
.cslim em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:4px}
.cslim button{border:1px solid var(--line);border-radius:var(--r);padding:8px 16px;font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.cslim button:hover{border-color:var(--ink);color:var(--ink)}
.routes{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.routes{grid-template-columns:1fr}}
.route{background:var(--surface-2);border-radius:var(--rc);padding:22px 20px;display:flex;flex-direction:column;gap:6px;transition:background .2s,transform .2s}
.route:hover{background:var(--surface);transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.07)}
.route .ic{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.route strong{font-size:15px;font-weight:600}
.route span{font-size:13px;color:var(--ink-2)}
.route em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:4px}
.helpline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface-2);border-radius:var(--r);padding:12px 18px;font-size:13.5px;color:var(--ink-2);margin-top:14px}
.helpline b{color:var(--ink)}
.helpline button{margin-left:auto;border:1.5px solid var(--ink);border-radius:var(--r);padding:8px 16px;font-size:12.5px;font-weight:600}
.helpline button:hover{background:var(--ink);color:var(--bg)}
.floatc{position:sticky;bottom:16px;margin:0 18px 18px auto;width:max-content;z-index:40;display:flex;gap:8px;align-items:center;background:var(--ink);color:var(--bg);border-radius:var(--r);padding:12px 20px;box-shadow:0 10px 30px rgba(0,0,0,.22);font-weight:600;font-size:13.5px}
.floatc:hover{background:var(--wine);color:#fff}
.icf{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.floatc small{font-family:var(--mono);font-weight:400;font-size:10.5px;opacity:.72}
.util .tel{font-weight:600}



/* ======== Rettelser 28-09, sidst på dagen ======== */

/* Hvid baggrund. Mærkelogoerne i brandbåndet har hvid bund, og den grå flade
   under dem tegnede en kant rundt om hvert logo. */
:root{--bg:#FFFFFF}

/* Reservedelsvælgeren: ikonet skal være en lille hvid flise, ikke et helt
   billede. Reglen stod i et af wireframets afsnit, jeg havde sprunget over. */
.picker .ic{width:56px;height:56px;background:var(--shot);border-radius:var(--r);padding:8px}
.picker .ic img{width:100%;height:100%;object-fit:contain}

/* Billedet ved "Kom og besøg os" beskæres fra bunden, ikke fra toppen —
   ellers ryger hovederne af dem, der står bagest. */
.visit .ph img{object-position:50% 22%}


/* ---- rettelser 28-09 ---- */
/* Banneret var så lavt, at folk på billedet blev skåret over ved hovedet. */
.hero{min-height:clamp(430px,56vw,660px)}
/* Fliserne på forsiden: kvadratiske i stedet for stående. */
.tile{aspect-ratio:1/1}

/* Reservedelsvaelgeren manglede sine egne regler - derfor laa billedet i fuld bredde. */
.picker{background:var(--surface-2);border-radius:var(--rc);padding:18px;display:grid;gap:12px;
  grid-template-columns:auto repeat(3,minmax(120px,1fr)) auto;align-items:center}
@media (max-width:820px){.picker{grid-template-columns:1fr}}
.sel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 16px;
  font-size:13.5px;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}

/* Menupanelet flugter med menulinjen: samme venstrekant som "Reservedele". */
.megain{max-width:none;margin:0;padding-left:var(--mleft,18px);padding-right:18px}
.megain .mhead{padding-left:8px}
.kliste .kli{padding:8px}


/* Banneret: teksten til venstre, soegefeltet ovre i hoejre side. */
.hero .in{max-width:none;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:20px 48px;align-items:end}
.hero .in .tx{min-width:0}
.hero .search{width:100%;justify-self:end}
@media (max-width:900px){
  .hero .in{grid-template-columns:1fr}
  .hero .search{justify-self:stretch}
}


/* Mere luft mellem overskrift og undertekst i banneret. */
.hero p{margin-top:clamp(16px,1.6vw,24px)}


/* Teksten loeftes, saa undertekstens underkant flugter med soegefeltets overkant.
   --soeg er soegefeltets faste hoejde: 4 + 12 + linje + 12 + 4 px. */
.hero{--soeg:51px}
.hero .search{margin-top:0}
.hero .in .tx{margin-bottom:var(--soeg)}
@media (max-width:900px){.hero .in .tx{margin-bottom:0}}


/* "Alle kategorier": en soejle pr. kategori, underkategorierne som egne links. */
/* Spalter i stedet for et gitter: en kategori uden underkategorier efterlader
   ellers et stort hul, fordi raekken bliver lige saa hoej som den hoejeste soejle. */
.megain .mrow.kat{display:block;column-count:4;column-gap:28px}
@media (max-width:900px){.megain .mrow.kat{column-count:2}}
@media (max-width:560px){.megain .mrow.kat{column-count:1}}
.kgrp{display:flex;flex-direction:column;min-width:0;break-inside:avoid;margin-bottom:18px}
.kgrp .khead b{font-weight:600}
.kgrp .khead[data-sale] b{color:var(--wine)}
.kgrp .kund{font-size:12.5px;color:var(--ink-3);padding-top:3px;padding-bottom:3px}
.kgrp .kund:hover{color:var(--ink)}


/* ------- kategoriside ------- */
.kathero{min-height:clamp(200px,24vw,300px)}
.kathero .in h1{font-size:clamp(24px,4vw,42px)}
.kathero:not(:has(img)) .in{color:var(--ink)}
.crumbs{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:14px 18px 0}
.count{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding:18px 0 10px}
.nores{padding:26px 0;font-size:14px;color:var(--ink-2)}
.mini{border:1.5px solid var(--ink);border-radius:var(--r);padding:7px 16px;font-size:11.5px;font-weight:600;white-space:nowrap}
.card .name{color:var(--ink);text-decoration:none;display:block}
.card .shot{display:block}
.sider{display:flex;justify-content:center;gap:6px;margin-top:28px}
.sider .page-numbers{border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;
  font-size:13px;color:var(--ink-2);text-decoration:none;background:var(--surface)}
.sider .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.sider .page-numbers.current{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.sider .page-numbers.dots{border:0;background:none}


/* En flise uden billede: mørk flade, saa den hvide etiket kan laeses. */
.tile:not(:has(img)){background:#2A2B2E}
.tile:not(:has(img)) .lab{background:none}

/* ---------- Produktsiden ---------- */
/* Temaet har endnu ingen egen produktside, saa WooCommerces egen bruges. Uden
   en ramme fyldte billedet hele skaermen, og hele stolen kunne ikke ses paa en
   gang. Her faar galleriet en spalte og en hoejdegraense. */
.single-product .site-main{max-width:1320px;margin:0 auto;padding:26px 18px 72px}
.single-product div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 56px;align-items:start}
.single-product div.product::before,.single-product div.product::after{content:none}
.single-product div.product .woocommerce-product-gallery{width:auto!important;max-width:100%;float:none;margin:0;position:relative}
.single-product div.product .woocommerce-product-gallery__wrapper{margin:0}
.single-product div.product .woocommerce-product-gallery__image{background:var(--surface-2);border-radius:var(--rc)}
.single-product div.product .woocommerce-product-gallery__image img{width:100%;height:auto;max-height:60vh;object-fit:contain;display:block;margin:0 auto}
.single-product div.product .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 0;padding:0;list-style:none;overflow:visible}
.single-product div.product .flex-control-thumbs li{width:auto;margin:0;float:none;list-style:none}
.single-product div.product .flex-control-thumbs img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--surface-2);border-radius:var(--rc);cursor:pointer;opacity:.55}
.single-product div.product .flex-control-thumbs img.flex-active,.single-product div.product .flex-control-thumbs img:hover{opacity:1}
.single-product div.product .summary{width:auto!important;float:none;margin:0}
.single-product div.product .woocommerce-tabs,.single-product div.product .related,.single-product div.product .up-sells{grid-column:1/-1}
@media (max-width:860px){.single-product div.product{grid-template-columns:1fr}}

/* ---------- Filterlinjen paa kategorisiden ---------- */
/* Selve filtreringen laver WooCommerce ud fra adressen. Her staar kun knapperne. */
.fbar{padding:20px 0 0;display:flex;flex-direction:column;gap:12px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fwrap{position:relative;display:inline-block}
.fb{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 16px;font-size:13px;font-weight:500;line-height:1;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.fb:hover{border-color:var(--ink-3);color:var(--ink)}
.fb.on{border-color:var(--ink);color:var(--ink)}
.fb::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.fb .cnt{background:var(--wine);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.fpop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:236px;max-height:320px;overflow:auto;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 36px rgba(0,0,0,.13);padding:6px}
.fpop a{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13.5px;color:var(--ink-2);text-decoration:none}
.fpop a:hover{background:var(--surface-2);color:var(--ink)}
.fpop a.valgt{color:var(--ink);font-weight:500}
.fpop input{pointer-events:none;margin:0;accent-color:var(--wine)}
.active{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.achip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border-radius:var(--r);padding:7px 13px;font-size:12.5px;color:var(--ink);text-decoration:none}
.achip b{font-weight:400;color:var(--ink-3)}
.achip i{font-style:normal;font-size:14px;line-height:1;color:var(--ink-3)}
.achip:hover i{color:var(--ink)}
.aclear{font-size:12.5px;color:var(--ink-3);text-decoration:underline;padding:7px 4px}
.aclear:hover{color:var(--ink)}
.fbar + .count{padding-top:14px}

/* ---------- Vis flere ---------- */
/* Sidetallene bliver staaende for dem uden JavaScript; app.js skjuler dem,
   naar knappen er sat op. */
.mere{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 0 8px}
.mereknap{background:var(--surface);border:1px solid var(--ink);border-radius:var(--r);padding:13px 34px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer}
.mereknap:hover{background:var(--ink);color:#fff}
.mereknap[disabled]{opacity:.5;cursor:default}