/* KanonCon Design – forside */
.row.kc-univ{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:var(--kc-luft-2) var(--kc-luft-2) var(--kc-luft-2);margin:0 auto;max-width:100%}
.row.kc-univ::-webkit-scrollbar{display:none}
/* Flatsome legger en maske på bilderammer med avrundede hjørner (style=border-radius), og den skjuler fokusringen. Bildet har egen radius, så masken trengs ikke */
.kc-univ .box-image{margin:0 auto;-webkit-mask-image:none;mask-image:none}
.kc-univ .box-image img{object-fit:cover;border-radius:50%}
.kc-univ .box-text p,.kc-univ .kc-univ__alle{font-size:var(--kc-tekst-mini);line-height:13px;font-weight:700;color:var(--kc-ink);margin:0}
/* !important på bakgrunn: Flatsome sin .white har background-color !important */
.kc-univ .kc-univ__alle{display:flex;flex-direction:column;align-items:center;gap:var(--kc-luft-1);background:none!important;border:0;padding:0;min-height:0;margin:0;text-transform:none;letter-spacing:0;box-shadow:none;white-space:normal;line-height:13px}
.kc-univ .kc-univ__alle::before{content:"";width:58px;height:58px;border-radius:50%;background:var(--kc-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5'/%3E%3C/svg%3E") center/22px no-repeat}
.kc-univ .kc-univ__alle span{color:var(--kc-ink);line-height:inherit}
.row.kc-topp>.col{padding-bottom:0}
.kc-hero{display:block;border-radius:var(--kc-r-lg);overflow:hidden;box-shadow:0 10px 28px rgb(from var(--kc-navy-mork) r g b / .28);margin-bottom:var(--kc-luft-2)}
.kc-hero img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.kc-hero--tom{padding:var(--kc-luft-8);background:var(--kc-flate);text-align:center}
/* !important: Flatsome sin .row .row-small:not(.row-collapse) har høyere spesifisitet */
.kc-topp__sma .row{margin:0 calc(var(--kc-luft-1) * -1)!important}
.kc-topp__sma .row>.col{padding:0 var(--kc-luft-1)}
.kc-butikk{border-radius:var(--kc-r-lg);overflow:hidden}
/* !important på overlay: banneret setter bakgrunnsfarge med ID i innebygd stil. På tekstboksen: Flatsome sin md-y50/lg-y50 bruker transform !important */
.kc-butikk .overlay{background:linear-gradient(180deg,rgb(from var(--kc-navy-mork) r g b / .05) 0%,rgb(from var(--kc-navy-mork) r g b / .55) 38%,rgb(from var(--kc-navy-mork) r g b / .94) 70%)!important}
.kc-butikk .text-box{top:auto;bottom:22px;transform:none!important}
.kc-butikk h2{font-size:var(--kc-tekst-h1);line-height:var(--kc-lh-h1);color:var(--kc-white);margin:0 0 var(--kc-luft-2)}
.kc-butikk p{font-size:var(--kc-tekst-body);line-height:22px;color:var(--kc-white);margin:0 0 var(--kc-luft-2)}
.kc-butikk .button{margin:var(--kc-luft-2) var(--kc-luft-2) 0 0}
@media (min-width:850px){.row.kc-univ{overflow:visible;padding:var(--kc-luft-4) 0 var(--kc-luft-6);justify-content:space-between;max-width:1200px}
/* !important på bredden: Flatsome setter width:100% som innebygd stil på bilderammen */
.kc-univ .box-image{width:84px!important}
.kc-univ .box-image img{width:84px;height:84px}
.kc-univ .kc-univ__alle::before{width:84px;height:84px;background-size:30px}
.kc-univ .box-text p,.kc-univ .kc-univ__alle{font-size:var(--kc-tekst-liten);line-height:16px}
.kc-butikk{border-radius:var(--kc-r-lg)}
.kc-butikk .overlay{background:linear-gradient(90deg,rgb(from var(--kc-ink) r g b / .97) 0%,rgb(from var(--kc-ink) r g b / .9) 42%,rgb(from var(--kc-ink) r g b / 0) 70%)!important}
.kc-butikk .text-box{top:50%;bottom:auto;transform:translateY(-50%)!important}
.kc-butikk p{font-size:var(--kc-tekst-body);line-height:26px}
}
.kc-mb{display:block;border-radius:var(--kc-r-lg);overflow:hidden;background:var(--kc-flate)}
.kc-mb picture,.kc-mb img{display:block;width:100%;height:auto;object-fit:cover}
/* Småbanner på mobil (under 550 px): hele bildet i eksportformatet 540 × 675 */
@media (max-width:549px){.kc-mb img{aspect-ratio:540/675}}
/* Toppen med hovedbanner og småbannere: PC-oppsett og PC-bilder fra 550 px – samme grense som Flatsome bruker for kolonnene (medium), og samme grense som bildevalget i [kc_hero]/[kc_smabanner] */
@media (min-width:550px){.kc-hero{border-radius:var(--kc-r-lg);margin:0}
.kc-topp__hero .kc-hero,.kc-topp__hero .kc-hero img{display:block}
.kc-topp__sma .row{display:grid;gap:var(--kc-luft-6);margin:0!important}
.kc-topp__sma .row>.col{max-width:100%;padding:0}
.kc-topp__sma .row::before,.kc-topp__sma .row::after{content:none;display:none}}
/* 550–849 px (mobil liggende, nettbrett stående): bannerne vises i eksportformatet (hovedbanner 1520 × 880, småbanner 880 × 500) uten beskjæring, og kolonnebredden regnes ut så alle tre slutter på samme linje:
   hovedkolonne = (100 % − 0,4905 × kolonnemarg (2 × 9,8 px) + space-6 × 0,88) / 1,5095 – utledet av høyde hovedbanner = 2 × høyde småbanner + space-6 */
@media (min-width:550px) and (max-width:849px){.row.kc-topp>.kc-topp__hero{flex:0 0 calc((100% - 9.6px + var(--kc-luft-6) * .88) / 1.5095);max-width:calc((100% - 9.6px + var(--kc-luft-6) * .88) / 1.5095)}
.row.kc-topp>.kc-topp__sma{flex:1 1 0;max-width:none}
.kc-hero img{aspect-ratio:1520/880}
.kc-mb img{aspect-ratio:880/500}}
/* PC: alle tre bannerne slutter på samme linje – småbannerne strekkes til hovedbannerets høyde og beskjæres litt i kantene */
@media (min-width:850px){.row.kc-topp{align-items:stretch}
.kc-hero{height:100%}
.kc-hero img{aspect-ratio:1520/880;height:100%}
.kc-topp__hero>.col-inner,.kc-topp__sma>.col-inner{height:100%}
.kc-topp__sma .row{height:100%;align-items:stretch;align-content:stretch;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.kc-topp__sma .row>.col,.kc-topp__sma .row>.col>.col-inner{height:100%}
.kc-mb{height:100%;min-height:150px}
.kc-mb picture,.kc-mb img{height:100%}}
@media (min-width:850px){.row.kc-univ>.col{padding:0}}
.row.kc-univ::before,.row.kc-univ::after{content:none;display:none}
@media (min-width:850px) and (max-width:1229px){.row.kc-univ{padding-left:0;padding-right:0;margin:0 -2px;max-width:none}}
@media (min-width:1100px){.row.kc-univ>.col{flex:0 0 102px;max-width:102px;width:102px}}
@media (min-width:1230px){.row.kc-univ{padding-left:var(--kc-luft-6);padding-right:var(--kc-luft-6)}}
@media (min-width:850px) and (max-width:1099px){.row.kc-univ>.col{flex:0 0 80px;max-width:80px;width:80px}
.kc-univ .box-image{width:64px!important}
.kc-univ .box-image img{width:64px;height:64px}
.kc-univ .kc-univ__alle::before{width:64px;height:64px}
.row.kc-univ{margin:0 calc(var(--kc-luft-2) * -1)}
.kc-univ .box-text p,.kc-univ .kc-univ__alle{font-size:var(--kc-tekst-mini)}}
/* !important på padding: Flatsome sin .row-collapse>.col har padding:0 !important */
@media (max-width:849px){.row.kc-univ>.col{flex:0 0 calc((100vw - 10px) / 5.5);max-width:calc((100vw - 10px) / 5.5);width:calc((100vw - 10px) / 5.5);padding:0 var(--kc-luft-1)!important}
.kc-univ .box-image{width:min(58px,100%)!important}
.kc-univ .box-image img{width:100%;height:auto;aspect-ratio:1/1}
.kc-univ .box-text p{white-space:nowrap;margin:0 calc(var(--kc-luft-2) * -1)}}
.kc-skjult{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}