@charset "UTF-8";

/* =========================== */
/*   IMPORTS                   */
/* =========================== */
@import url("/user/documents/externals/css/config/variables.css?v=1.01");
@import url("/user/documents/externals/css/config/text.css?v=1.00");

@import url("/user/documents/externals/css/parts/category.css?v=1.00");
@import url("/user/documents/externals/css/parts/banners.css?v=1.08");
@import url("/user/documents/externals/css/parts/product-card.css?v=1.14");
@import url("/user/documents/externals/css/parts/product.css?v=1.02");
@import url("/user/documents/externals/css/parts/welcome.css?v=1.01");
@import url("/user/documents/externals/css/parts/cart.css?v=1.01");
@import url("/user/documents/externals/css/parts/productInjector.css?v=1.01");

/* =========================== */
/*   Base                      */
/* =========================== */
html{
	scrollbar-width: none;
}

.overall-wrapper{
	overflow-x: hidden;
}

#content, #content-wrapper{
	width: 100%;
	padding: 0;
}

#content-wrapper{
	padding-left: 0;
}

#content{
	display: flex;
	flex-direction: column;
}

.full-width{
	width: 100%;
	left: 0;
	right: 0;
	margin-left: 0;
	margin-right: 0;
}

.benefit-banners-full-width{
	order: 1;
}

ul.languagesMenu__list{
	z-index: 99999;
}

/* sr-only fix */
.sr-only{
    height: 1px!important;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute!important;
    width: 1px!important;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* =========================== */
/*   instagram                 */
/* =========================== */
.dklab_instagram_widget_box{
	width: 300px !important;
    height: 300px !important;
    min-width: auto!important;
    min-height: auto!important;
    object-fit: cover;
}

@media only screen and (max-width: 601px){
	.dklab_instagram_widget_box{
		width: 50% !important;
		height: 250px !important;
		object-fit: cover;
		overflow: hidden;
		min-width: auto!important;
		min-height: auto!important;
	}
}

/* =========================== */
/*   not-full-width            */
/* =========================== */
body:not(.in-index):not(.type-category):not(.type-detail):not(.in-kosik) #content-wrapper{
	margin: 0 auto;
	max-width: 964px;
	width: 90%;
}

body.in-kosik #content-wrapper{
	max-width: 1440px;
	width: 90%;
}

/* =========================== */
/*   Header                    */
/* =========================== */
/* Header */
#header{
	display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Header - index */
body.in-index #header{
	position: absolute;
	z-index: 999;
	padding-bottom: 60px;
	background: rgba(0, 0, 0, 0.99);	
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* Logo size */
#header .site-name{
	order: 2;
	height: 80px;
	width: 220px;
	padding: 0;
}

/* Logo size - a */
#header .site-name a{
	display: block;
	width: 100%;
	height: 100%;
}

/* Logo size - a img */
#header .site-name a img{
	object-fit: contain;
	width: 100%;
	height: 100%;
}

/* Header Right */
#header .header-right{
	order: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: auto;
	margin: 0 auto;
}

/* Header Top */
#header .header-top{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 0;
}

/* Header Top - items */
#header .header-top .navigation-tools,
#header .header-top .languagesMenu{
	width: auto;
}

/* Navigation buttons */
#header .header-top .navigation-buttons{
	flex-grow: 0;
	padding-right: var(--global-gap);
	gap: var(--global-gap);
}

/* Mobile menu */
#header .header-bottom{
	display: none;
	position: fixed;
	left: 0;
    top: 0;
    padding: calc(8 * var(--global-gap)) calc(4 * var(--global-gap));
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    backdrop-filter: blur(12px);
	overflow-y: auto;
}

/* Display mobile menu */
body.navigation-window-visible #header .header-bottom{
	display: block;
}

/* Menu margins reset */
#header .header-bottom ul{
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: calc(4 * var(--global-gap));
	padding: 0;
	margin: 0;
}

/* Hide list style */
#header .header-bottom ul li{
	list-style: none;
}

/* Menu links styles */
#header .header-bottom ul li a{
	color: var(--black-color);
	font-size: 28px;
    line-height: 1.2em;
}

/* Menu links styles hover */
#header .header-bottom ul li a:hover{
	color: var(--highlight-color);
}

/* Hide sub-menu */
#header .header-bottom ul li ul,
#header .header-bottom ul li .submenu-arrow,
#header .header-bottom ul li.appended-category{
	display: none;
}

/* Close Button on mobile menu */
#header .header-bottom ul button{
	border: none;
    background: none;
    font-size: 48px;
	position: absolute;
    top: calc(3 * var(--global-gap));
    right: calc(3 * var(--global-gap));
}

/* transparent background Menu */
#header .header-top .toggle-window,
#header .header-top .top-nav-button-login,
#header .header-bottom .navigation-in{ 
	background: transparent;
}

/* white text Menu - index */
body.in-index #header .header-top .icon-search,
body.in-index #header .header-top .icon-login,
body.in-index #header .header-top .dkLabFavHeaderIconBtn,
body.in-index #header .header-top .cart-count,
body.in-index #header .header-top .toggle-window,
body.in-index #header .header-bottom .menu-helper-visible .menu-helper:after{
	color: var(--white-color);
}

/* hover text Menu - index */
body.in-index #header .header-top .icon-search:hover,
body.in-index #header .header-top .icon-login:hover,
body.in-index #header .header-top .dkLabFavHeaderIconBtn:hover,
body.in-index #header .header-top .cart-count:hover,
body.in-index #header .header-top .toggle-window:hover,
body.in-index #header .header-top .languagesMenu__header:hover,
body.in-index #header .header-bottom .menu-helper-visible .menu-helper:after:hover{
	color: var(--highlight-color);
}

body #header .languagesMenu__content{
	display: none;
	position: fixed;
	z-index: 999999;
	top: 48px;
	left: var(--global-gap);
	width: calc(100vw - (2 * var(--global-gap)));
	flex-direction: column;
	gap: var(--global-gap);
	border-radius: 10px;
	background-color: #FFFFFF44;
	backdrop-filter: blur(10px);
	padding: var(--global-gap);
}

body #header .languagesMenu.open .languagesMenu__content{
	display: flex;
}

body #header .languagesMenu__box{
	display: flex;
	flex-direction: column;
}

body #header .languagesMenu__box div,
body #header .languagesMenu__box ul.languagesMenu__list{
	background: transparent;
	color: var(--black-color);
	height: 48px;
	border-radius: 0;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

body #header .languagesMenu__box .languagesMenu__header--actual,
body #header .languagesMenu__box .languagesMenu__header--actual{
	display: none;
}

body #header .languagesMenu__box.open ul.languagesMenu__list,
body #header .languagesMenu.open ul.languagesMenu__list{
	display: flex;
	padding: 0;
	margin: 0;
}

body #header .languagesMenu__box ul.languagesMenu__list li.selected{
	background-color: #FFFFFF77;
    border-radius: 10px;
}

body #header .languagesMenu__box ul.languagesMenu__list li .languagesMenu__list__name--actual{
	background-color: #FFFFFF77;
    border-radius: 10px;
	padding: 0 var(--global-gap);
}

/* Desktop */
@media only screen and (min-width: 768px){
	#header{
		flex-direction: row;
		align-items: start;
	}
	
	#header .site-name{
		order: 1;
		height: 100px;
        width: 240px;
		padding-left: calc(3 * var(--global-gap));
	}
	
	#header .header-right{
		order: 2;
		width: 100%;
	}
	
	/* Display desktop menu */
	#header .header-bottom{
		position: relative;
		display: block;
		background: transparent;
		backdrop-filter: blur(0px);
		padding: 0;
		padding-right: 22px;
	}
	
	#header .header-bottom ul{
		justify-content: flex-end;
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: calc(2 * var(--global-gap));
	}
	
	#header .header-bottom ul li a{
		font-size: 14px;
		line-height: 1em;
	}
		
	body.in-index #header .header-bottom ul li a{
		color: var(--white-color);
	}
	
	body.in-index #header .header-bottom ul li a:hover{
		color: var(--highlight-color);
	}
	
	#header .header-bottom ul button{
		display: none;
	}
	
	#header .header-top .languagesMenu__content{
		display: flex;
		flex-direction: row;
		position: relative;
		top: 0;
		width: auto;
		background: transparent;
		color: var(--black-color);
		padding: 0;
	}
	
	body.in-index #header .header-top .languagesMenu__box{
		height: auto;
	}
	
	body.in-index #header .header-top .languagesMenu__header{
		color: var(--white-color);
	}
	
	body #header .languagesMenu__box .languagesMenu__header--actual,
	body #header .languagesMenu__box .languagesMenu__header--actual{
		display: flex;
	}
	
	body #header .languagesMenu__box.open ul.languagesMenu__list{
		display: block;
		margin: 20px 0 0;
		padding: 16px;
		height: auto;
		border-radius: 8px;
		background: var(--white-color);
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .08);
	}
}

@media only screen and (min-width: 1400px){
	#header .header-bottom ul li a{
		font-size: 18px;
	}
	
	#header .site-name{
		height: 130px;
        width: 340px;
	}
}

/* =========================== */
/*   Scrollbar                 */
/* =========================== */

/* Skrývá nativní scrollbar, ale zachová přístup k obsahu */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overscroll-behavior: none;
}

/* Kontejner pro posouvání (přidává se automaticky JS) */
.overlay-scroll__container {
	position: fixed;
	inset: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: none; /* IE a Edge */
	scrollbar-width: none;    /* Firefox */
}

.overlay-scroll__container::-webkit-scrollbar {
	display: none;
}

/* Overlay scrollbar */
.overlay-scroll__thumb {
	position: fixed;
	right: 6px;
	top: 0;
	width: 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.1s ease;
	z-index: 999999;
	cursor: grab;
	touch-action: none;
	backdrop-filter: blur(2px);
}

.overlay-scroll__thumb.dragging {
	cursor: grabbing;
	background: rgba(255, 255, 255, 0.85);
	transform: scaleX(1.2);
}

.overlay-scroll--visible .overlay-scroll__thumb {
	opacity: 1;
}


/* =========================== */
/*   Logo                      */
/* =========================== */
#header .header-top .header-top-wrapper .site-name a img{
	max-height: 53px;
	margin-top: 5px;
}

@media only screen and (min-width: 767px){
	#header .header-top .header-top-wrapper .site-name a img{
		max-height: 57px;
		margin-top: -14px;
	}
}

@media only screen and (min-width: 991px){
	#header .header-top .header-top-wrapper .site-name a img{
		max-height: 100px;
		margin-top: 0px;
	}
}

/* =========================== */
/*   Search                    */
/* =========================== */
body.user-action-visible.search-window-visible:before{
	display: none;
}

.search-window-visible .user-action{
	position: absolute;
	z-index: 99999;
    width: 100vw;
    top: 0;
}

.search-window-visible .user-action .user-action-in>div.user-action-search{
	top: 0px;
	width: 100vw;
	max-width: none;
	height: auto;
	min-height: calc(100vh + 260px);
	max-height: none;
    margin: 0 auto;
	padding-top: 120px;
    border-radius: 0;
    background-color: rgba(0,0,0,0.6);
	backdrop-filter: blur(10px);
	border-bottom: solid white 2px;
	overflow: hidden;
}

.search-window-visible .searchWhisperer.active{
	position: absolute;
	top: 220px;
	background-color: transparent;	
}

.search-window-visible .searchWhisperer__products,
.search-window-visible .searchWhisperer__additionalResults{
	background-color: transparent;
}

.search-window-visible .searchWhisperer__additionalResults h3,
.search-window-visible .searchWhisperer__additionalResults a,
.search-window-visible .searchWhisperer__additionalResults i,
.search-window-visible .searchWhisperer__products h3,
.search-window-visible .searchWhisperer__products .searchWhisperer__product__name{
	color: var(--white-color);
}

.search-window-visible .searchWhisperer__buttonWrapper{
	position: absolute;
    top: -14px;
}

.search-window-visible .popup-widget.search-widget .search-widget-close{
	display: flex;
	position: absolute;
    top: 60px;
    right: 70px;
}

.search-window-visible #header .header-top .languagesMenu{
	z-index: -1;
}

@media only screen and (min-width: 580px){
	.search-window-visible .user-action .user-action-in>div.user-action-search{
		top: 24px;
	}
}

@media only screen and (min-width: 991px){
	.search-window-visible .user-action .user-action-in>div.user-action-search{
		top: 0;
	}
	
	.search-window-visible .searchWhisperer__buttonWrapper{
		position: relative;
		top: 0;
	}
}