/*
 * Виправлення верстки відновленої копії kunstkompagniet.dk.
 * Оригінальна верстка залежала від скриптів (слайдер, вкладки, карусель, мобільне меню),
 * які при відновленні вирізано; тут те саме зроблено на CSS і HTML без JS.
 * Підключається останнім у <head> кожної сторінки, тому перекриває styles.css / styles_responsive.css.
 */

/* ---------- 1. Слайдер угорі головної: статично перший слайд з картинкою ----------
   Перший слайд ("inktober") без картинки (файл не збережено в архіві) — порожня рамка.
   Ховаємо слайди без <img> і всі слайди після першого з <img>. */
.home-slider .slide:not(:has(img)) { display: none; }
.home-slider .slide:has(img) ~ .slide { display: none; }

/* ---------- 2. Блок ul.banner-front: картинки billede1-9.jpg відсутні в архіві ----------
   Без картинок лишаються лише розсипані підписи, тому блок ховаємо. */
ul.banner-front:not(:has(img)) { display: none; }

/* ---------- 3. Картки товарів ---------- */
/* Мітка new-label.png абсолютна (left:50%); раніше її контейнером був <a>, якого відновлення прибрало, тож мітка їхала до .col-main */
.prod-img-bg { position: relative; }
.prod-img-bg > img[width] { display: block; margin: 5px auto 0; }
.prod-img-bg:not(:has(img[width])) { background: #f5f5f5; }

/* ---------- 4. Вкладки TILBUD / NYHED / MEST POPULÆR (радіо + label, без JS) ---------- */
.kk-tab-radio {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#tabContainer label { float: left; margin: 0 3px 0 0; cursor: pointer; user-select: none; }
.tab_product .tab_content { display: none; }
#kk-tab-r1:checked ~ .tab_wrapper #tab_1_data,
#kk-tab-r2:checked ~ .tab_wrapper #tab_2_data,
#kk-tab-r3:checked ~ .tab_wrapper #tab_3_data { display: block; }
#kk-tab-r2:checked ~ #tabContainer #tab_1,
#kk-tab-r3:checked ~ #tabContainer #tab_1 {
	background-image: url("/skin/frontend/default/modern_theme/images/bg-tab-off-2.png"); color: #d0d0d0;
}
#kk-tab-r2:checked ~ #tabContainer #tab_2,
#kk-tab-r3:checked ~ #tabContainer #tab_3 {
	background-image: url("/skin/frontend/default/modern_theme/images/bg-tab-selected-2.png"); color: #fff;
}
#kk-tab-r1:focus-visible ~ #tabContainer #tab_1,
#kk-tab-r2:focus-visible ~ #tabContainer #tab_2,
#kk-tab-r3:focus-visible ~ #tabContainer #tab_3 { outline: 2px solid #264447; outline-offset: 2px; }

/* ---------- 5. Карусель "Udvalgte produkter": статичний ряд, прокрутка нативна ---------- */
#example-2 a.carousel-control { display: none; }
#example-2 .middle {
	display: flex; float: none; width: 660px; max-width: 100%; height: auto; margin: 33px auto 0;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin;
	scrollbar-color: #b8b8b8 transparent;
}
#example-2 .inner { display: contents; }
#example-2 .inner .slideNabler { flex: 0 0 155px; float: none; margin: 0 5px; scroll-snap-align: start; }
/* "#example-2 a" з styles.css задає кожному <a> розмір стрілки (45x207, float) — картки з посиланням на картинці через це зсувалися */
#example-2 .slideNabler a.link { float: none; display: block; width: auto; height: auto; line-height: normal; font-size: inherit; }
#example-2 .slideNabler img.product-image { display: block; margin: 0 auto; }
#example-2 .slideNabler:not(:has(img.product-image))::before {
	content: ""; display: block; box-sizing: border-box; width: 147px; height: 147px; margin: 0 auto;
	background: #f5f5f5; border: 1px solid #ccc;
}
@media only screen and (max-width: 567px) {
	#example-2 .middle { width: auto; margin: 30px 0 0; }
	#example-2 .inner .slideNabler { flex: 0 0 50%; margin: 0; box-sizing: border-box; padding: 0 4px; }
}

/* ---------- 6. Хедер на вузьких екранах ---------- */
@media only screen and (max-width: 767px) {
	/* кнопка facebook лежить над логотипом, а не на ньому */
	.header-container:has(#custommenu-mobile) .header-left { padding-top: 40px; }
	.header-container:has(#custommenu-mobile) .header-left #facebook { left: 50%; margin-left: -55px; }

	/* мобільне меню: <details>/<summary> замість скрипта */
	.menu-details > #menu-content { display: none; }
	.menu-details[open] > #menu-content { display: block; }
	#menu-content li ul { display: block; }
	#menu-content > ul > li { line-height: 30px; font-size: 14px; text-indent: 15px; }
	#menu-content > ul > li > a { text-indent: 0; }
	#menu-content li > ul { text-indent: 0; }
	#menu-content li li { font-size: 13px; line-height: 18px; text-indent: 30px; }
	#menu-content li li > a { padding-left: 0; text-indent: 0; }
	#menu-content > ul > li > ul { padding: 0 0 8px; }
}
.menu-details > summary { display: block; list-style: none; }
.menu-details > summary::-webkit-details-marker { display: none; }
.menu-details > summary::marker { content: ""; }