/* =========================================
   Generelt
   ========================================= */
body.frontpage .main { padding-top:0 }
img[data-src] { display:none !important }
img.loaded[data-src] { display:block !important }
.rssapp-carousel { display:block; width:100vw; margin-left:calc(50% - 50vw) }

/* =========================================
   Hero-banner
   ========================================= */
.hero-banner { display:block; position:relative; text-decoration:none }

.hero-banner__text {
	display:flex;
	position:absolute;
	z-index:1;
	inset:0;
	box-sizing:border-box;
	padding:25px;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#fff;
	text-shadow:0 1px 12px rgba(0, 0, 0, .25)
}

.hero-banner__pre {
	margin:0 0 1.3em;
	font-size:25px;
	letter-spacing:.05em;
	text-transform:uppercase;
	line-height:1
}

.hero-banner .hero-banner__title {
	margin:0;
	font-size:clamp(36px, 5vw, 80px);
	font-weight:400;
	line-height:1;
	text-transform:uppercase;
	color:#fff
}

.hero-banner__link {
	display:inline-block;
	margin-top:1.3em;
	font-size:25px;
	line-height:1;
	text-decoration:underline;
	text-underline-offset:.2em;
	text-decoration-thickness:1px
}

.hero-banner:hover .hero-banner__link { text-decoration-thickness:2px }

.kategori-hero { position:relative; overflow:hidden }
.kategori-hero .hero-banner__text { padding-inline:90px }

.kategori-hero__img {
	display:block;
	width:100%;
	height:auto;
	min-height:240px;
	object-fit:cover;
	object-position:center
}

/* =========================================
   Grid, kolonner og formater
   ========================================= */
.columns-section img { display:block; width:100%; vertical-align:bottom }
.columns-section .grid,
.columns-section .columns { display:grid }
.columns-section .grid.gap { gap:5px }
.columns-section .grid.columns-2 .columns-2 { grid-template-columns:none }
.columns-section .grid.rows-2 { grid-template-rows:repeat(2, 1fr) }

.columns-section .content { display:block; position:relative; width:100%; height:0; padding-bottom:100% }
.columns-section .format__high .content { padding-bottom:118.75% }
.columns-section .format__hightower .content { padding-bottom:150% }

/* =========================================
   Billedbokse med tekst
   ========================================= */
.columns-section .grid-background {
	min-height:280px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover
}

.columns-section .grid-image { position:relative }

.columns-section .grid-image .text {
	display:grid;
	position:absolute;
	z-index:1;
	inset:0;
	padding:25px;
	align-items:center;
	place-content:center;
	row-gap:.8em;
	text-align:center;
	color:#fff
}

.columns-section .grid-image .text.bottom { align-content:end }
.columns-section .grid-image .text.top { align-content:start }
.columns-section .grid-image .text.left { justify-content:left; text-align:left }
.columns-section .grid-image .text.right { justify-content:right; text-align:right }

/* Fælles tekstlinjer i billed- og tekstbokse (afstanden styres af row-gap) */
.columns-section .text > span { display:block; line-height:1 }
.columns-section .text > span.title,
.columns-section .text > span.pre-title,
.columns-section .grid-image .text .kategori-titel { margin:0 }
.columns-section .text > span.title { font-size:2.6em }
.columns-section .text > span.pre-title { font-size:1.7em;}
.columns-section .text > span.intro { font-size:1.2em; max-width:29em; margin-inline:auto }
.columns-section .text > u { font-size:1.5em; line-height:1 }

.columns-section .grid-image .text .kategori-titel {
	display:block;
	font-size:2em;
	font-weight:400 !important;
	line-height:1.1;
	letter-spacing:0;
	text-transform:none !important;
	color:#fff
}

/* =========================================
   Tekstbokse
   ========================================= */
.columns-section .grid-text {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:40px;
	background-color:#f2f0ec
}

.columns-section .grid-text .text { display:grid; row-gap:.8em; text-align:center; color:#000 }
.columns-section .grid-text h4 { margin:0; color:inherit; font-size:2em }
.columns-section .grid-text p { margin:0; font-size:1.5em }

.columns-section .grid-image .text,
.columns-section .grid-text .text,
.kategori-4-grid__item { font-size:10px }

/* =========================================
   Lille tekst (tilføj klassen lille-tekst på sektionen, titlen er uændret)
   ========================================= */
.columns-section.lille-tekst .text > span.pre-title { font-size:1.1em }
.columns-section.lille-tekst .text > u { font-size:1.3em }

/* =========================================
   Produkter
   ========================================= */
.columns-section .grid-products { display:grid; grid-template-columns:repeat(2, 1fr); gap:5px }
.columns-section .product { display:block; position:relative }
.columns-section .product .product-inner { display:grid; position:relative; height:100%; padding:15px }

.columns-section .product .product-inner::before {
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	inset:0;
	background-color:#000;
	opacity:.03
}

.columns-section .product .discount,
.columns-section .product .labels { position:absolute; z-index:10; top:15px }

.columns-section .product .discount,
.columns-section .product .labels li {
	padding:2px 8px;
	background-color:#000;
	border-radius:2px;
	line-height:16px;
	text-transform:uppercase;
	font-size:10px;
	color:#fff
}

.columns-section .product .discount { right:15px }

.columns-section .product .labels {
	display:flex;
	gap:5px;
	flex-wrap:wrap;
	list-style:none;
	left:15px;
	margin:0 55px 0 0;
	padding:0
}

.columns-section .product .img { display:block; position:relative; margin-bottom:10px; z-index:0 }
.columns-section .product img { max-width:200px; height:auto; margin:0 auto }
.columns-section .product .details { position:relative; z-index:2; overflow:hidden }

.columns-section .product .brand,
.columns-section .product .title { display:block; margin-bottom:5px; color:#000 }
.columns-section .product .brand { text-transform:uppercase; font-weight:700 }
.columns-section .product .title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.columns-section .product .product-stock-status { margin:8px 0 }
.columns-section .product .prices { display:flex; gap:2px 8px; align-items:end; flex-wrap:wrap }
.columns-section .product .price,
.columns-section .product .price-before { color:#000 }
.columns-section .product .price { font-weight:700 }
.columns-section .product .wishlist-button { position:absolute; right:10px; bottom:10px; z-index:2 }

/* =========================================
   Forsidetekster
   ========================================= */
.h2-forside {
	display:flex;
	justify-content:center;
	align-items:center;
	height:100%;
	text-align:center;
	font-size:1.5vw;
	font-family:Arial, sans-serif
}

.tekst-forside { max-width:1200px; margin-inline:auto; padding-bottom:10px; text-align:center }
.tekst-forside p { margin:0; font-size:1.1vw; line-height:1.5 }

/* =========================================
   Kategori-grid (4 billeder, tekst nederst til venstre)
   ========================================= */
.kategori-4-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:5px; padding:20px 0 }
.kategori-4-grid__item { display:block; position:relative; overflow:hidden; text-decoration:none }

.kategori-4-grid__item::after {
	content:"";
	position:absolute;
	inset:auto 0 0;
	height:45%;
	background:linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
	pointer-events:none
}

.kategori-4-grid__img { display:block; width:100%; height:auto; transition:transform .3s ease }
.kategori-4-grid__item:hover .kategori-4-grid__img { transform:scale(1.03) }

.kategori-4-grid__text {
	position:absolute;
	z-index:1;
	inset:auto 0 0;
	box-sizing:border-box;
	padding:15px;
	text-align:left;
	font-size:2em;
	font-weight:400;
	line-height:1.1;
	letter-spacing:0;
	text-transform:none;
	color:#fff
}

/* =========================================
   Se mere-boks (produktsider)
   ========================================= */
.hj-links { max-width:560px; margin:0 }
.hj-links__heading { margin:0 0 10px; font-size:15px; font-weight:700 }
.hj-links__categories { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px }

.hj-links__chip {
	display:inline-block;
	padding:8px 14px;
	border:1px solid #000;
	border-radius:4px;
	background-color:#fff;
	font-size:14px;
	line-height:1.2;
	text-decoration:none;
	color:#000
}

.hj-links__chip:hover { background-color:#000; color:#fff }

.hj-links__blogs { display:flex; flex-direction:column; gap:8px }

.hj-links__blog {
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	background-color:#fff;
	border:1px solid #e2e2e2;
	border-left:3px solid #a47b4f;
	text-decoration:none;
	color:#000
}

.hj-links__blog:hover { border-color:#a47b4f }
.hj-links .hj-links__blog-icon {
	display:block;
	flex:0 0 22px;
	width:22px !important;
	height:22px !important;
	max-width:none;
	margin:0;
	object-fit:contain
}

.hj-links__blog-text,
.hj-links__blog-title,
.hj-links__blog-cta { display:block }
.hj-links__blog-title { font-size:14px; font-weight:700; line-height:1.3 }
.hj-links__blog-cta { margin-top:2px; font-size:13px; text-decoration:underline; color:#555 }

.hj-links__chip:focus-visible,
.hj-links__blog:focus-visible { outline:2px solid #a47b4f; outline-offset:2px }

/* =========================================
   Mobil (op til 767px)
   ========================================= */
@media (max-width:767px) {
	.columns-section .grid.mobile-rows-2 { grid-template-rows:repeat(2, 1fr) }
	.columns-section .format__high-sm .content { padding-bottom:118.75% }
	.columns-section .product:nth-child(n+3) { display:none }
	.columns-section .grid-products + .grid-image,
	.columns-section .grid-text + .grid-image { order:-1 }
	.tekst-forside p { font-size:3vw }
	.h2-forside { font-size:4.5vw }
	.hero-banner__text { padding:15px }
	.hero-banner__pre { margin-bottom:.8em; font-size:13px }
	.hero-banner .hero-banner__title { font-size:30px }
	.hero-banner__link { margin-top:.8em; font-size:15px }
	.columns-section .grid-image .text,
	.columns-section .grid-text .text { row-gap:1.4em }
	.columns-section.lille-tekst .text > span.pre-title { font-size:1.4em }
	.columns-section.lille-tekst .text > u { font-size:1.6em }

	
}

/* =========================================
   Fra 480px
   ========================================= */
@media (min-width:480px) {
	.columns-section .columns.columns__3 { grid-template-columns:repeat(3, 1fr) }
	.columns-section .columns.columns__4 { grid-template-columns:repeat(2, 1fr) }
	.columns-section .grid-image .text,
	.columns-section .grid-text .text,
	.kategori-4-grid__item { font-size:12px }
}

/* =========================================
   Fra 768px (tablet og desktop)
   ========================================= */
@media (min-width:768px) {
	.columns-section .grid.columns-2,
	.columns-section .columns.columns__2 { grid-template-columns:repeat(2, 1fr) }
	.columns-section .columns.gap__24 { gap:24px }
	.columns-section .format_wide-md .content { padding-bottom:68.33425% }
	.columns-section .product .product-inner { padding:25px }
	.columns-section .product .discount,
	.columns-section .product .labels { top:25px }
	.columns-section .product .labels { left:25px }
	.columns-section .product .discount { right:25px }
	.kategori-4-grid { grid-template-columns:repeat(4, 1fr) }
	.kategori-4-grid__text { padding:25px }
}

/* Kun tablet (768-959px) */
@media (min-width:768px) and (max-width:959px) {
	.columns-section .grid.tablet-rows-2 { grid-template-rows:repeat(2, 1fr) }
	.hero-banner__pre { font-size:18px }
	.hero-banner .hero-banner__title { font-size:56px }
	.hero-banner__link { font-size:18px }
}

/* =========================================
   Fra 960px (desktop)
   ========================================= */
@media (min-width:960px) {
	.columns-section .grid.columns-2 .columns-2 { grid-template-columns:repeat(2, 1fr) }
	.columns-section .grid.columns-reverse-desktop { direction:rtl }
	.columns-section .grid.columns-reverse-desktop > * { direction:ltr }
	.columns-section .grid.desktop-rows-2 { grid-template-rows:repeat(2, 1fr) }
	.columns-section .columns.columns__4 { grid-template-columns:repeat(4, 1fr) }
}

/* =========================================
   Fra 1280px
   ========================================= */
@media (min-width:1280px) {
	.columns-section .grid-image .text,
	.columns-section .grid-text .text,
	.kategori-4-grid__item { font-size:14px }
}