/* root variables */
:root{
	--bg-clr: #141010;
	--accent-1-clr: #39b3a8;
	--accent-2-clr: #212121;
	--accent-3-clr: #999999;
	--eco-clr: #32ac5c;
	--red-clr: #d24555;
	--noitm-clr: #459dbd;
	--catalog-clr: #f0f0f0;

	/* turquoise */
	--accent-1-ico-clr: brightness(0) saturate(100%) invert(64%) sepia(67%) saturate(367%) hue-rotate(125deg) brightness(82%) contrast(94%);
	/* white */
	--accent-2-ico-clr: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7470%) hue-rotate(116deg) brightness(109%) contrast(109%);
	/* black */
	--accent-3-ico-clr: brightness(0) saturate(100%) invert(11%) sepia(16%) saturate(0%) hue-rotate(157deg) brightness(111%) contrast(99%);
	/* eco green */
	--eco-filtr-clr: brightness(0) saturate(100%) invert(64%) sepia(67%) saturate(367%) hue-rotate(125deg) brightness(82%) contrast(94%);

	--unchanged-clr-trq: #39b3a8;
	--unchanged-clr-blk: #212121;
	--unchanged-clr-wht: #ffffff;
	--unchanged-clr-eco: #32ac5c;
	--unchanged-clr-red: #d24555;
    --unchanged-clr-trq-cart: #000000;

	--pirm-ff:"Myriad Pro Regular", "Calibri";
	--second-ff:"Bebas Neue Regular", "Impact";

	--f-prim-clr: #000000;
	--f-second-clr: #212121;
	--f-accent-1-clr: #39b3a8;
	--f-accent-2-clr: #d24555;
}

:root:has(body.theme-light) .itm_shadow{
	box-shadow: gray 0 0 25px -12px;
}

:root:has(body.theme-light) .btn_out{
	border: 1px solid #39b3a8;
	background-color: #39b3a8;
	color: #FFFFFF;
}

:root:has(body.theme-light) .btn_out:hover{
	background-color:  #f0f0f0;
	color: var(--f-prim-clr);
}

:root:has(body.theme-light) .cat_ico{
	filter: var(--accent-2-ico-clr);
}

:root:has(body.theme-light) .btn_out:hover .cat_ico{
	filter: var(--accent-3-ico-clr);
}
/* end root variables light */


/* fonts */
@font-face{
	font-family: "Bebas Neue Regular";
	src: url("../fonts/Dharma Type - Bebas Neue Regular.otf");
}

@font-face{
	font-family: "Myriad Pro Regular";
	src: url("../fonts/MyriadPro-Regular.otf");
}
/* end fonts */


/* globals - reset handled by Tailwind Preflight */

html{
	/*visibility: hidden;*/
}

body{
	background-color: var(--bg-clr);
	font-family: var(--pirm-ff);
}


.itm_shadow{
	box-shadow: inset gray 0 0 40px -12px;
}

table{
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
	table-layout: fixed;
}

.wpr{
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.wpr_lft{
	float: left;
}

.wpr_rgt{
	float: right;
}

.wpr_cntr{
	position: relative;
	width: max-content;
	margin: 0 auto;
}

.flex_wpr{
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.ico_wpr{
	width: 100%;
}

.ico{
	width: 33%;
}

.uni_width_5{
	width: 5%;
}

.uni_width_10{
	width: 10%;
}

.uni_width_15{
	width: 15%;
}

.uni_width_20{
	width: 20%;
}

.uni_width_30{
	width: 30%;
}

.uni_width_40{
	width: 40%;
}

.uni_width_50{
	width: 50%;
}

.txt_cntr{
	text-align: center !important;
}
/* end globals */


/* scroll */
.nicescroll-rails{
	z-index: 100000 !important;
}

.nicescroll-rails-hr{
	visibility: hidden;
}

.nicescroll-rails-vr{
	opacity: 0.5;
}

.nicescroll-cursors{
	border: none !important;
	background-color: var(--unchanged-clr-trq) !important;
}
/* end scroll */


/* helper */
label.error{
	font-size: 12px;
	color: var(--unchanged-clr-wht);
	float: inherit;
	position: absolute;
	right: 0;
	background-color: var(--unchanged-clr-red);
	padding: 5.5px;
	height: 100%;
	top: 0;
	z-index: 10000;
	display: grid;
	align-items: center;
}

label.error::before{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid var(--unchanged-clr-red);
	left: -7px;
	top: 50%;
	transform: translateY(-50%);
}

.validate_box{
	position: relative;
	width: 100%;
}

.noscroll{
	overflow: hidden;
}

.spacer{
	margin-bottom: 10%;
}

.del_margin{
	margin: 0 !important;
}

.del_padding{
	padding: 0 !important;
}

.click_wpr{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: pointer;
}

.click_wpr:hover {
	border-top: 1px solid var(--unchanged-clr-trq);
	border-bottom: 1px solid var(--unchanged-clr-trq);
	border-right: 6px solid var(--unchanged-clr-trq);
}

.on_off{
	display: none;
}
/* end helper */


/* Buttons */
.btn_out, .btn_full, .btn_back, .btn_full_black, .submit{
	position: relative;
	font-family: var(--second-ff);
	padding: 5px 0 3px 0;
	color: var(--f-prim-clr);
	cursor: pointer;
	text-transform: uppercase;
	font-size: 22px;
	text-align: center;
}

.btn_out{
	border: solid thin var(--accent-3-clr);
}

.btn_full{
	background-color: var(--unchanged-clr-trq);
	border: solid thin transparent;
}

.btn_full_black{
	background-color: var(--unchanged-clr-blk);
	border: solid thin var(--unchanged-clr-wht);
}

.btn_back{
	background-color: var(--unchanged-clr-red);
	border: solid thin transparent;
	width: 10% !important;
	margin-top: 20px !important;
}

.submit{
	outline: none;
	border: none;
	background-color: var(--unchanged-clr-trq);
	width: 100%;
}

.btn_lft{
	float: left;
	clear: left;
	width: 35%;
}

.btn_mid{
	margin: 0 auto;
	width: 35%;
}

.btn_rgt{
	float: right;
	clear: right;
	width: 35%;
}

.btn_out {
	border: solid thin var(--accent-3-clr);
}

.btn_out:hover{
	border: solid thin var(--unchanged-clr-trq);
	background-color: var(--unchanged-clr-trq);
}

.btn_full:hover, .btn_back:hover{
	border: solid thin var(--unchanged-clr-wht);
	background-color: var(--bg-clr);
	color: var(--unchanged-clr-trq);
}

.submit:hover{
	background-color: #277D75;
	cursor: pointer;
}

.btn_back svg{
	width: 20px;
	color: var(--unchanged-clr-wht);
}
/* Buttons end */


/* search breadcrumb */
.srh_crumb{
	position: absolute;
	bottom: 0;
	color: var(--f-prim-clr);
	font-family: var(--second-ff);
	font-size: 20px;
	width: 100%;
	text-align: center;
	text-decoration: underline solid #e85224;
	text-decoration-thickness: 0;
	text-underline-offset: 5px;
	margin: 9px auto;
}
/* end search breadcrumb */


/* header nav searchbar filter */
header{
	background-color: var(--bg-clr);
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 160px;
}

.msg_hdr{
	text-transform: uppercase;
	background-color: var(--unchanged-clr-trq);
	position: fixed;
	bottom: 0;
	left: 50%;
	color: var(--unchanged-clr-wht);
	transform: translate(-50%, 0);
	padding: 5px 30px;
	font-size: 14px;
	z-index: 10000;
}

.hdr_wpr{
	width: 84%;
	display: flex;
	position: relative;
	margin: 0 8%;
	height: 100%;
}

.logo_wpr{
	width: 19%;
	position: relative;
}

.cust_logo{
	position: absolute;
	width: 100%;
	bottom: 20px;
}

.change_cust_logo{
	float: left;
	height: 25px;
	width: 16%;
	min-width: 20%;
}

.logo_box{
	position: absolute;
	width: 100%;
	bottom: 0;
	max-height: 100%;
	max-width: 155px;
	left: 50%;
	transform: translate(-50%,0);
}

.logo_box:hover{
	cursor: pointer;
}

.cust_logo .logo_box{
	position: relative;
	top: unset;
	left: unset;
	transform: unset;
	margin: 20px auto 10px auto;
	max-width: 140px;
}

.cust_logo .ico_wpr{
	position: relative;
	float: left;
	clear: left;
}

.logo_box_ftr{
	width: 100%;
	bottom: 0;
	max-height: 100%;
	max-width: 280px;
	float: left;
	clear: left;
}

.switch_ico_wpr {
	position: relative;
	width: 100%;
	justify-content: center;
	display: flex;
	margin: 0 auto;
	column-gap: 1rem !important;
}

.switch_ico{
	position: relative;
	width: 22px;
	height: 22px;
	opacity: 0.4;
}

.switch_ico:hover{
	cursor: pointer;
	opacity: 1;
}

.switch_ico_wpr .sun{
	filter: brightness(0) saturate(100%) invert(61%) sepia(83%) saturate(619%) hue-rotate(351deg) brightness(91%) contrast(93%);
}

.switch_ico_wpr .eco{
	filter:  brightness(0) saturate(100%) invert(60%) sepia(45%) saturate(626%) hue-rotate(87deg) brightness(85%) contrast(88%);
}

.switch_ico_wpr .moon{
	filter: brightness(0) saturate(100%) invert(48%) sepia(45%) saturate(498%) hue-rotate(148deg) brightness(103%) contrast(95%);
}

nav{
	width: 59.5%;
	margin: 0 1.25%;
	position: relative;
}

.nav_wpr{
	position: absolute;
	width: 100%;
	bottom: 20px;
}

.slctn_wpr{
	position: relative;
	display: flex;
	width: 100%;
}

.slctn_box{
	width: 11.1%;
	height: 80px;
}

.slctn{
	position: relative;
}

.slctn_head{
	width:100%;
	background-image:url("../img/slctn_head.svg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 8px;
	position: absolute;
	top: 0;
	right: 1px;
	opacity: 0;
}

.slctn .ico {
	margin: 0 auto;
	max-height: 30px;
	transition: 250ms ease-in;
	filter: var(--accent-3-ico-clr);
}

.slctn_name{
	color: var(--f-prim-clr);
	position: absolute;
	visibility: visible;
	bottom: 5px;
	left: 50%;
	width: 100%;
	font-size: 9px;
	line-height: 1.2;
	transform: translate(-50%, 0);
	text-transform: uppercase;
	text-align: center;
	transition: color 250ms ease-in;
}

.slctn:hover,
.cat_active{
	background-color: var(--unchanged-clr-trq);
	transition: 250ms ease-in;
	cursor: pointer;
}

.cat_slider_group:hover .slctn_head,
.cat_slider_item:hover .slctn_head,
.cat_active .slctn_head{
	opacity: 1;
	transition: 250ms ease-in-out;
}

.slctn:hover .ico,
.cat_active .ico{
	transform: translateY(-8px);
}

.slctn:hover .slctn_name,
.cat_active .slctn_name{
	color: var(--unchanged-clr-wht);
	transition: color 250ms ease-in;
}

.srh_bar{
	height: 35px;
	width: 100%;
	position: relative;
	border: 1px solid var(--unchanged-clr-trq);
	background-color: var(--accent-2-clr);
}

.srh_bar .flex_wpr{
	align-items: center;
}

#search_ico{
	filter: var(--accent-1-ico-clr);
}

.input_ico{
	width: 29px;
	cursor: pointer;
}

.menu{
	cursor: pointer;
	position: absolute;
	right: -8px;
	top: -13px;
	height: 60px;
	width: 60px;
	padding: 19px;
}

.menu_favorites{
	cursor: pointer;
	position: absolute;
	right: 22px;
	top: -13px;
	height: 60px;
	width: 70px;
	padding: 19px;
}

.menu_ico{
	filter: var(--accent-3-ico-clr);
}

.fav_ico:hover{
	filter: var(--accent-1-ico-clr);
}

.menu:hover .menu_ico{
	filter: var(--accent-1-ico-clr);
}

.menu_favorites .fav_ico{
	padding-right: 10px;
	border-right: 1px dotted var(--accent-3-clr);
}


/* filter + dropdown */
.fltr_hover{
	width: 40px;
	height: 40px;
}

hgroup{
	position: absolute;
	left: 25%;
	z-index: 1000;
}

.fltr_hoverbox{
	position: fixed;
	width: 35px;
	height: 35px;
	top: 120px;
	left: 25%;
	z-index: 98;
}

.fltr_hoverbox_dummy{
	position: fixed;
	width: 35px;
	height: 35px;
	top: 120px;
	left: 25%;
	z-index: 98;
}

.fltr_selected{
	position: relative;
	width: 100%;
	display: table;
	padding-right: 20px;
	margin-left: 5px;
}

.fltr_selected_box{
	float: left;
	border: 1px solid var(--accent-3-clr);
	color: var(--f-prim-clr);
	padding: 5px;
	position: relative;
	margin: 15px 0 0 15px;
	font-size: 15px;
}

.fltr_box_home{
	position: fixed;
	width: 50px;
	height: 50px;
	top: 120px;
	left: 25%;
	z-index: 99;
}

.fltr_ico{
	background-image: url("../img/fltr_tr.svg");
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
	position: fixed;
	z-index: 100;
	width: 35px;
	height: 35px;
	top: 120px;
}

.fltr_hoverbox:hover .fltr_ico, .fltr_hoverbox:active .fltr_ico{
	background-color: var(--unchanged-clr-trq);
	background-image: url("../img/fltr_w.svg");
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.fltr_wpr{
	width: 100%;
	position: absolute;
	left: -1px;
	bottom: -2px;
	z-index: 10000;
}

.fltr{
	display: none;
	position: fixed;
	width: 50%;
	left: 25%;
	top: 155px;
	background-color: var(--bg-clr);
	box-shadow: 0 4px 15px 1px rgba(20,16,16,0.5);
}

.fltr:hover {
	display: block;
}

.select_wpr{
	display: flex;
}

.select{
	width: 11.11%;
	border-left: 1px dotted var(--accent-3-clr);
	color: var(--f-prim-clr);
	font-family: var(--second-ff);
	text-align: center;
	position: relative;
	letter-spacing: 0.5px;
	display: flex;
	word-wrap: anywhere;
	font-size: 15px;
	min-height: 40px;
	justify-content: center;
	align-items: center;
	border-bottom: 2px solid transparent;
	padding-bottom: 7px;
	padding-top: 9px;
	cursor: pointer;
}

.select_hdl{
	float: left;
}

.select:hover{
	border-bottom: 2px solid var(--unchanged-clr-trq);
}

.drp_wpr:hover{
	border-bottom: 2px solid var(--unchanged-clr-trq);
}

.drp_subline:hover::before{
	transform: rotate(90deg);
}

.select:hover .drp{
	display: block;
	z-index: 1;
}

.drp_wpr:hover .drp{
	display: block;
	z-index: 1;
}

.conm_menu:hover .drp_menu{
	display: block;
	z-index: 1000;
}

.drp_menu{
	display: none;
	background-color: var(--accent-2-clr);
	min-width: 10%;
	position: absolute;
	top: 79.5%;
	right: 8%;
	padding: 0 5px 10px 5px;
	text-align: left;
	box-shadow: 0 3px 15px 2px rgba(20,16,16,0.5);
	max-height: 50vh;
	z-index: -1;
	cursor: pointer;
}

.drp_subline::before{
	content: "";
	background-image: url("../img/arrow_tr.svg");
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	height: 12px;
	min-width: 12px;
	display: inline-block;
	margin-right: 5px;
}

.drp_cntr{
	width: max-content;
	margin: 0 auto 20px auto;
}

.drp_lft{
	width: max-content;
	margin-bottom: 20px;
}

.drp_rgt{
	width: max-content;
	margin-bottom: 20px;
	float: right;
	clear: right;
}

.drp_wpr{
	position: relative;
	font-family: var(--second-ff);
	letter-spacing: 0.5px;
	word-wrap: anywhere;
	font-size: 15px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.drp_border_full{
	border-right: 1px dotted var(--accent-3-clr);
	border-left: 1px dotted var(--accent-3-clr);
	width: max-content;
	text-align: center;
	padding: 0 5px;
}

.drp_border_lft{
	border-left: 1px dotted var(--accent-3-clr);
	width: max-content;
	text-align: left;
	padding: 0 5px;
}

.drp_border_rgt{
	border-right: 1px dotted var(--accent-3-clr);
	border-left: none !important;
	width: max-content;
	text-align: right;
	padding: 0 5px;
}

.drp_subline{
	color: var(--unchanged-clr-trq);
	font-size: 14px;
	width: 100%;
}

.drp{
	display: none;
	background-color: var(--accent-2-clr);
	min-width: max-content;
	position: absolute;
	top: 103.5%;
	left: -1px;
	padding: 0 5px 10px 5px;
	text-align: left;
	box-shadow: 0 3px 15px 2px rgba(20,16,16,0.5);
	overflow-y: scroll;
	max-height: 50vh;
	scrollbar-width: thin;
	z-index: -1;
	cursor: pointer;
}

#conm_order .drp, .conm_drp .drp{
	min-width: 100%;
	left: 0;
	padding: 5px 5px 5px 5px;
	top: 19px !important;
}

#conm_order .drp .option, .conm_drp .drp{
	padding: 12px 5px 12px 7px !important;
}

.drp div{
	border-bottom: 1px dotted var(--accent-3-clr);
	padding: 12px 5px;
	position: relative;
	font-family: var(--pirm-ff);
}

.option:hover ~ .drp_subline::before{
	transform: rotate(90deg);
}

.fltr_option, .sort_option, .option{
	font-size: 14px;
	letter-spacing: 0;
	line-height: 100%;
	color: var(--f-prim-clr);
}

.menu .drp_menu{
	right: 12%;
}

.menu_option{
	font-size: 15px;
	font-family: var(--second-ff);
	letter-spacing: 0;
	line-height: 1;
	color: var(--f-prim-clr);
	border-bottom: 1px dotted var(--accent-3-clr);
	padding: 15px 5px;
	position: relative;
	min-width: 100px;
}

.drp div:last-child, .drp_menu div:last-child{
	border-bottom: none;
}

.drp div:hover, .drp_menu div:hover{
	color: var(--unchanged-clr-trq);
}

.drp div:hover::before, .drp_menu div:hover::before{
	display: block;
}

.drp .fltr_option::before,
.drp .sort_option::before,
.drp .option::before,
.drp_menu .menu_option::before{
	content: "";
	background-color: var(--unchanged-clr-trq);
	width: 2px;
	height: 64%;
	position: absolute;
	top: 18%;
	left: 0;
	display: none;
}

nav form{
	width: 100%;
}

nav form input{
	width: 100%;
	outline: none;
	border: none;
	padding-left: 10px;
	color: #AAAAAA;
	-webkit-appearance: none;
	font-size: 12px;
	background-color: var(--accent-2-clr);
	height: 100%;
}

.input_box_tbl{
	float: left;
	margin-top: 5px;
	position: relative;
}

.input_box_tbl span {
	display: none;
}

.input_active span{
	background-color: var(--unchanged-clr-red);
	width: 20px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	line-height: 170%;
	display: block;
}

.client_logo{
	position: absolute;
	width: 100%;
	height: 78%;
	top: 0;
}
/* filters + dropdown end */
/* header + nav end */


/* sidebar */
aside{
	width: 8%;
	float: left;
	position: relative;
	min-height: 1px;
}

.side_wpr{
	position: fixed;
	width: 8%;
	padding: 0 1%;
	z-index: 100;
}

.favo_list_wpr{
	position: relative;
	padding: 20px 0;
	font-size: 14px;
	text-align: center;
	color: var(--f-prim-clr);
}

.favo_list_wpr .fav_wht{
	margin: 0 auto;
	width: 35px;
	height: 35px;
}

.favo_list_wpr .fav_wht:hover{
	background-image: url("../img/heart_filled_bl.svg");
	cursor: pointer;
}

.con{
	position: relative;
	border-bottom: 2px dotted var(--accent-3-clr);
	padding-bottom: 20px;
	font-size: 14px;
	text-align: center;
	color: var(--f-prim-clr);
	text-transform: uppercase;
}

.con_dtl .ico_wpr{
	display: flex;
	margin-bottom: 10px;
	justify-content: center;
}

.con_dtl .ico{
	position: relative;
	padding: 0 6px;
}

.con_dtl .ico{
	border-right: 1px solid #e85224;
}

.con_dtl .ico:last-of-type{
	border: none;
}

.con_img{
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin: 0 auto 10px auto;
}

.con_img img{
	object-fit: cover;
	object-position: top center;
	width: 80px;
	height: 80px;
}

.cart{
	width: 100%;
	display: table;
	padding: 20px 0;
	height: 100%;
	cursor: pointer;
	border-bottom: 2px dotted var(--f-prim-clr);
	font-family: var(--second-ff);
}

.window_cnt_wpr{
	position: relative;
	display: table;
	width: 100%;
	padding: 2%;
}

.window_cnt_wpr_reg{
	position: relative;
	display: table;
	width: 90%;
	margin: 5%;
}

.cart .ico_wpr{
	position: relative;
}

.contact_ico{
	transition: 200ms ease-in;
	width: 20px;
	margin: 0 auto;
	filter: var(--accent-3-ico-clr);
}

.contact_ico:hover{
	transform: scale(0.84);
	cursor: pointer;
}

.cart_empty{
	background-color: var(--unchanged-clr-red);
	font-family: var(--second-ff);
	font-size: 20px;
	padding: 1%;
	color: var(--unchanged-clr-wht);
	margin: 0 0 1% 5%;
}

.cart_checkout_empty{
	width: 60%;
	background-color: var(--unchanged-clr-red);
	font-family: var(--second-ff);
	font-size: 20px;
	padding: 1%;
	color: var(--unchanged-clr-wht);
	margin: 0 auto 1%;
	text-align: center;
}
/* sidebar end */


/*mainarea items*/
main{
	width: 100%;
	display: table;
	padding-top: 160px;
	height: 100%;
}

.fiv_grid{
	width: 84%;
	float: left;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 1.25%;
	grid-row-gap: 35px;
	position: relative;
	min-height: 1px;
}

.itm{
	background-color: var(--unchanged-clr-wht);
	transition: 250ms ease-in;
	z-index: 90;
	position: relative;
}

.itm:hover{
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: 150ms ease-in;
}

.itm_hit{
	box-shadow: inset gray 0 0 60px -12px;
}

.itm_hit::before{
	content: "";
	position: absolute;
	border: 4px solid var(--unchanged-clr-trq);
	top: 0;
	left: 0;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	pointer-events: none;
}

.itm_hit_box{
	position: absolute;
	height: 30px;
	background-color: var(--unchanged-clr-trq);
	font-family: var(--second-ff);
	color: var(--unchanged-clr-wht);
	padding-left: 28px;
	line-height: 180%;
	padding-right: 8px;
	left: 50%;
	transform: translateX(-50%)
}

.itm_hit_ico_wpr{
	position: absolute;
	width: 17px;
	top: 5px;
	left: 6px;
}

.itm_thumb_eco{
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 70px 70px;
	border-color: transparent transparent var(--eco-clr) transparent;
	bottom: 0;
	right: 0;
	z-index: 1;
}

.itm_img .itm_thumb_eco{
	border-width: 0 0 100px 100px;
}

.thumb_eco_wpr{
	position: absolute;
	width: 30px;
	bottom: -63px;
	right: 6px;
	cursor: pointer;
}

.itm_img .thumb_eco_wpr{
	width: 40px;
	bottom: -91px;
	right: 9px;
}

.itm_btn{
	cursor: pointer;
}

.itm_hdr{
	width: 100%;
	display: table;
	padding: 3%;
}

.itm_hdr .wpr_lft{
	width: 55%;
}

.itm_hdr .wpr_rgt{
	width: 45%;
}

.itm_att{
	display: none;
}

.pkg{
	width: 100%;
	display: table;
}

.pkg span{
	font-family: var(--second-ff);
	color: var(--unchanged-clr-blk);
	float: left;
	padding-top: 2%;
	margin-left: 3%;
	font-size: 20px;
	min-width: 120px;
}

.pkg .ico{
	width: 25px;
	max-width: 25px;
	max-height: 25px;
}

.pkg .ico img{
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

.itm_hdr .ico{
	width: 25px;
	max-width: 25px;
	max-height: 25px;
}

.itm_hdr .ico img{
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

.dlv_date .ico{
	width: 25px;
	max-width: 25px;
	max-height: 25px;
}

.dlv_date .ico img{
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

.prc{
	background-color: var(--unchanged-clr-blk);
	font-family: var(--second-ff);
	color: var(--unchanged-clr-wht);
	text-align: center;
	padding: 7px 12px 6px 12px;
	margin-bottom: 5px;
	font-size: 18px;
}

.dlv_date{
	font-size: 11px;
	width: 100%;
	position: relative;
	text-transform: uppercase;
	padding: 2px 0;
}

.dlv_date span{
	float: right;
	margin-right: 3%;
}

.itm_img{
	padding: 5% 20%;
}

.itm_img img {
	aspect-ratio: 1 / 1;
}

.itm_sub{
	width: 100%;
	padding: 3%;
	display: table;
	font-family: var(--second-ff);
	position: relative;
}

.itm_btm_text{
	width: 75%;
	font-size: 22px;
	text-align: center;
	position: absolute;
	bottom: 5px;
	transform: translateX(-50%);
	left: 50%;
}

.itm_btm_lft, .itm_btm_rgt{
	width: 8%;
	position: relative;
	cursor: pointer;
}

.itm_btm_rgt{
	width: 30px;
	height: 30px;
	float: right;
}

.itm_btm_rgt img:hover{
	filter: brightness(0) saturate(100%) invert(62%) sepia(99%) saturate(267%) hue-rotate(125deg) brightness(81%) contrast(92%);
}

.itm_btm_lft{
	float: left;
}

.fav_blk img{
	display: none;
}

.fav_blk{
	background-image: url("../img/heart_bl.svg");
	width: 30px;
	height: 30px;
	transition: all 250ms ease-in-out;
}

.fav_blk:hover{
	background-image: url("../img/heart_filled.svg");
	width: 30px;
	height: 30px;
	transform: scale(0.88);
	cursor: pointer;
}

.fav_blk_active img{
	display: none;
}

.fav_blk_active{
	background-image: url("../img/heart_filled.svg");
	width: 30px;
	height: 30px;
}

.fav_wht img{
	display: none;
}

.fav_wht{
	background-image: url("../img/heart_w.svg");
	width: 25px;
	height: 25px;
	transition: all 350ms ease-in-out;
}

.itm .fav_wht:hover{
	background-image: url("../img/heart_filled_bl.svg");
	width: 25px;
	height: 25px;
	transform: scale(0.88);
	cursor: pointer;
}

.fav_wht_active img{
	display: none;
}

.fav_wht_active{
	background-image: url("../img/heart_filled_bl.svg");
	width: 25px;
	height: 25px;
}

.itm_desc{
	width: 100%;
	background-color: var(--unchanged-clr-blk);
	color: var(--unchanged-clr-wht);
	text-align: center;
	font-size: 13px;
	padding: 4% 2%;
	height: 65px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.itm_ftr{
	width: 100%;
	background-color: var(--unchanged-clr-trq);
	text-align: center;
	padding: 1.5% 0;
	font-family: var(--second-ff);
	color: var(--unchanged-clr-wht);
	font-size: 18px;
}

.itm_ftr_mid{
	background-color: var(--unchanged-clr-trq);

}

.itm_ftr_low{
	background-color: var(--noitm-clr);
}

.wpr_rgt{
	float: right;
	width: 30%;
}

.wpr_rgt div{
	float: right;
}

.wpr_lft{
	float: left;
	width: 30%;
}

.wpr_lft div{
	float: left;
}

/* Eco Badge Triangle (CSS border trick) */
.itm-grid__eco-triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 60px 60px;
	border-color: transparent transparent var(--eco-clr) transparent;
}

.itm_headline_img{
	width: 100%;
	height: 100%;
	border: 1px solid var(--unchanged-clr-trq);
	display: flex;
	justify-content: center;
    overflow: hidden;
}

.itm_headline_img img{
	max-width: unset;
}

.prism_beam{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}


/* footer */
footer{
	height: 215px;
	width: 100%;
}

.size{
	width: 100%;
	position: fixed;
	z-index: 1000;
	display: none;
	height: 100%;
	overflow-y: scroll;
}

.cover{
	width: 100%;
	position: fixed;
	background-color: var(--unchanged-clr-blk);
	opacity: 0.8;
	z-index: 1000;
	cursor: pointer;
	height: 100%;
}


/* item details window */
.window{
	position: relative;
	width: 54%;
	border: 1px solid var(--unchanged-clr-trq);
	display: none;
	animation: fade_in 1s;
	min-width: 950px;
	background-color: var(--bg-clr);
	z-index: 10000;
	margin-bottom: 100px;
}

.window_mid{
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.window_mid_login{
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	border: none;
}

.window_top{
	transform: translate(-50%, 0%);
	top: 10%;
	left: 50%;
	margin-bottom: 10%;
}

.itm_wpr{
	position: relative;
	width: 49%;
	float: left;
	background-color: var(--unchanged-clr-wht);
}

.itm_dtl_head{
	display: table;
	width: 49%;
}

.itm_wpr_lft{
	float: left;
	width: 50%;
}

.itm_wpr_rgt{
	float: right;
	width: 50%;
	color: var(--f-prim-clr);
}

.itm_wpr_lft .ico{
	max-width: 25px;
}

.itm_wpr_rgt .ico{
	float: right;
}

.itm_wpr_rgt .prc{
	font-size: 28px;
	padding: 7px 12px 4px 12px;
	margin-bottom: 10px;
	float: right;
	clear: right;
}

.itm_wpr_rgt .dlv_date::after{
	content: " ";
	position: absolute;
	display: block;
	height: 1px;
	width: 24%;
	bottom: -5px;
	right: 0;
	border-bottom: 1px dotted var(--accent-3-clr);
}

.itm_nmbr{
	font-size: 11px;
	font-style: italic;
	margin: 10px 0;
	width: 100%;
	text-align: right;
	float: right;
	text-transform: uppercase;
}

.itm_dtl_info{
	width: 47%;
	position: absolute;
	right: 2%;
	bottom: 4%;
}

.itm_dtl_desc{
	width: 100%;
	color: var(--f-prim-clr);
	font-size: 12px;
	margin-bottom: 10px;
}

.itm_amount{
	width: 100%;
	height: 40px;
	background-color: var(--unchanged-clr-trq);
	position: relative;
	color: var(--unchanged-clr-wht);
	padding: 6px 10px;
	margin-bottom: 20px;
	cursor: pointer;
}

.itm_amount span{
	font-family: var(--second-ff);
	font-size: 24px;
}

.unit_cnt_wpr{
	width: 100%;
	margin-bottom: 20px;
	display: table;
	font-family: var(--second-ff);
}

.unit_cnt{
	display: flex;
	column-gap: 10px;
	float: left;
}

.chkout_wpr .btn_pls_min{
	width: 100%;
}

.chkout_wpr .unit_cnt{
	width: 100%;
}

.unit_cnt .ico{
	cursor: pointer;
}

.unit_cnt .ico:hover{
	cursor: pointer;
	border: 1px solid var(--unchanged-clr-trq);
}

.unit_cnt .ico{
	width: 30px;
	height: 30px;
	border: 1px solid var(--accent-3-clr);
	padding: 9px 0;
}

.unit_cnt_wpr span{
	margin: 4px 0  0 20px;
	font-size: 20px;
	color: var(--f-prim-clr);
	float: left;
}

.cntr{
	width: 30px;
	height: 30px;
	border: 1px solid var(--unchanged-clr-trq);
	background-color: var(--accent-2-clr);
	padding-top: 2px;
	font-size: 16px;
	text-align: center;
	color: var(--f-prim-clr);
}

.cntr:focus{
	outline: none;
}

.fltr_btn{
	display: none;
	position: relative;
	width: 49%;
	padding: 0 20px;
	float: left
}

.fltr_btn_del{
	position: relative;
	background-color: var(--unchanged-clr-red);
	border: solid thin transparent;
	text-align: center;
	padding: 5px 30px 5px 30px;
	text-transform: uppercase;
	font-family: var(--second-ff);
	font-size: 18px;
	color: var(--unchanged-clr-wht);
	cursor: pointer;
	margin: 30px 0 15px 0;
	width: 100%;
}

.fltr_btn_itm{
	position: relative;
	border: solid thin var(--accent-3-clr);
	text-align: center;
	padding: 5px 30px 5px 30px;
	text-transform: uppercase;
	font-family: var(--second-ff);
	font-size: 18px;
	color: var(--f-prim-clr);
	margin: 30px 0 15px 0;
	width: 100%;
}

.fltr_btn_del:hover{
	border: solid thin var(--accent-3-clr);
	background-color: transparent;
}

.back_btn_mid:hover, .back_btn_rgt:hover{
	border: solid thin var(--accent-3-clr);
	background-color: var(--bg-clr);
}

.close{
	position: absolute;
	background-color: var(--unchanged-clr-wht);
	width: 30px;
	height: 30px;
	top: -15px;
	right: -15px;
	border-radius: 50%;
	border: 4px solid var(--bg-clr);
	cursor: pointer;
	padding: 4px;
}

.close div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


/* headlines */
.hdl_lft, .hdl_mid, .hdl_rgt, .drp_hdl, .itm_dtl_hdl{
	font-family: var(--second-ff);
	color: var(--f-prim-clr);
	font-size: 58px;
	width: max-content;
	text-transform: uppercase;
	border-bottom: 4px solid var(--unchanged-clr-trq);
	letter-spacing: 1px;
	margin-bottom: 30px;
}

.hdl_lft{
	float: left;
	clear: left;
}

.window .hdl_lft{
	margin: 0 5% 30px 5%;
}

.hdl_rgt{
	float: right;
	clear: right;
}

.hdl_mid{
	font-size: clamp(2rem, 2.5vw + .5rem, 7rem);
	margin: 0 auto 30px auto;
}

.drp_hdl{
	border: none;
	font-size: 20px;
	margin-bottom: 4px;
	width: 100%;
	text-align: center;
}

.itm_dtl_hdl{
	font-size: 30px;
	border: unset;
	margin: unset;
}

.hdl_full{
	font-family: var(--second-ff);
	color: var(--f-accent-1-clr);
	font-size: 30px;
	text-align: left;
	margin-bottom: 20px;
}
/* headlines end */


/* basket */
.hdl_mid_sml{
	color: var(--f-prim-clr);
	font-size: 20px;
	font-family: var(--second-ff);
	text-transform: uppercase;
	border-bottom: 4px solid var(--unchanged-clr-trq);
	letter-spacing: 1px;
	margin: 0 auto 15px auto;
	width: max-content;
}

.txt_box_center{
	font-size: 15px;
	color: var(--f-prim-clr);
	margin-bottom: 20px;
	text-align: center;
}

.sbl_mid_sml{
	color: var(--f-prim-clr);
	font-size: 20px;
	font-family: var(--second-ff);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 auto 15px auto;
	width: max-content;
}

.cost_centre{
	float: right;
	width: max-content;
}

.cost_centre .select{
	width: 140px;
	margin: 0 auto;
	border-right: 1px dotted var(--accent-2-clr);
	padding: 0;
	font-size: 16px;
}

.tbl{
	position: relative;
	display: table;
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
	color: var(--f-prim-clr);
}

.row{
	position: relative;
	display: table;
	width: 100%;
	margin-bottom: 20px;
}

.row_cntr{
	font-family: var(--second-ff);
	font-size: 28px;
	width: 4%;
	text-align: center;
	border-top: 6px solid var(--unchanged-clr-trq);
	padding-top: 5px;
	margin-right: 1%;
	position: absolute;
	top: 0;
	left: 0;
}

.row_cnt{
	float: right;
	width: 100%;
	display: flex;
	border-bottom: 1px dotted var(--accent-3-clr);
	align-items: center;
	min-height: 70px;
}

.tbl_ftr_row{
	float: right;
	width: 31%;
	display: flex;
	align-items: center;
	min-height: 70px;
}

.row_cnt_cntr{
	float: right;
	width: 95%;
	display: flex;
	padding-bottom: 20px;
	border-bottom: 1px dotted var(--accent-3-clr);
	align-items: center;
	min-height: 70px;
	position: relative;
}

.tbl_ftr{
	position: relative;
	float: right;
	width: 95%;
	min-height: 70px;
}

.tbl .row:last-child .row_cnt{
	border-bottom: none;
}

.row_head{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px dotted var(--accent-3-clr);
	padding-bottom: 5px;
}

.itm_row_opt{
	color: var(--f-prim-clr);
	font-family: var(--second-ff);
	width: 34%;
	margin-top: 4px;
}

.opt_hdl{
	padding-left: 27px;
}

.opt_row{
	padding-left: 84px;
}

.opt_row::before {
	content: " ";
	display: block;
	position: relative;
	background-image: url("../img/arrow_tr.svg");
	width: 15px;
	height: 15px;
	float: left;
}

.tbl .itm_img{
	width: 13%;
	margin-right: 1%;
	padding: 0;
}

.itm_info{
	width: 25%;
	margin-right: 4%;
	align-self: start;
}

.itm_num{
	font-size: 25px;
	font-family: var(--second-ff);
	margin-bottom: 10px;
	line-height: 21px;
	letter-spacing: 1px;
}

.tbl .itm_desc{
	background-color: transparent;
	text-align: left;
	font-size: 12px;
	padding: 0;
}

.ico_box{
	width: 8%;
	min-width: 62px;
	padding: 5px 0;
	margin-right: 2%;
}

.itm_prc{
	font-family: var(--second-ff);
	font-size: 25px;
	line-height: 26px;
	padding: 26px 0;
	width: 15%;
	text-align: center;
}

.tbl .unit_cnt_wpr{
	font-size: 25px;
	padding: 22px 0;
	width: 12%;
	margin: 0 1%;
}

.tbl_total{
	font-family: var(--second-ff);
	font-size: 25px;
	padding: 26px 0;
	width: 42%;
	line-height: 26px;
}
/* basket end */


/* Summary extra costs */
.row_ec_cnt_cntr{
	float: right;
	width: 95%;
	display: flex;
	align-items: center;
	position: relative;
}

.row_ec_cnt{
	float: right;
	width: 100%;
	display: flex;
	border-bottom: 1px dotted var(--accent-3-clr);
	align-items: center;
}


.tbl .reg_label{
	font-size: 14px;
	width: 12%;
	margin: 0 1%;
}

.extra_costs{
	font-size: 14px;
	line-height: 26px;
	width: 15%;
	text-align: center;
}

.del_ico_wpr{
	position: absolute;
	right: 0;
	border: 2px solid transparent;
}

.del_ico_wpr:hover{
	cursor: pointer;
}

.del_ico{
	position: absolute;
	top: 50%;
	right: 50%;
	width: 15px;
	height: 17px;
	padding: 0 !important;
	cursor: pointer;
	background-image: url("../img/delet_v2_red.svg");
	background-size: cover;
	background-repeat: no-repeat;
	transform: translate(-50%,-50%);
}

.fltr_del_ico{
	width: 15px;
	height: 17px;
	cursor: pointer;
	background-image: url("../img/delet_v2_red.svg");
	background-size: cover;
	background-repeat: no-repeat;
	float: right;
	margin-left: 10px;
}

.check_ico_wpr{
	display: none;
	position: absolute;
	right: -1px;
	top: -16px;
}

.border_box{
	position: relative;
	width: 32px;
	height: 32px;
	border: 2px solid var(--unchanged-clr-red);
}

.check_ico_box{
	position: relative;
	background-color: var(--unchanged-clr-red);
	width: 32px;
	height: 32px;
	transform-origin: top;
	animation: slideaway 200ms;
}

@keyframes slideaway {
	from { transform: ScaleY(0); opacity: 0;}
	to { transform: ScaleY(1); opacity: 1;}
}

.check_ico{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	padding: 0 !important;
	cursor: pointer;
	background-image: url("../img/check.svg");
	background-size: contain;
	background-repeat: no-repeat;
	transform: translate(-50%,-50%);
}

.basket_ico{
	width: 2%;
	position: relative;
	right: 0;
	padding: 27px 0;
	cursor: pointer;
	filter: brightness(0) saturate(100%) invert(59%) sepia(20%) saturate(1143%) hue-rotate(125deg) brightness(98%) contrast(93%);
	margin: 0 auto;
}

.basket_ico:hover{
	filter: brightness(100%) saturate(100%) ;
}


/* overview */
.overview_wpr{
	display: table;
	width: 100%;
	padding:4%;
}


/* checkout */
.chkout_wpr{
	display: table;
	width: 80%;
	margin: 0 auto;
}

.chkout_nav{
	display: flex;
	justify-content: space-between;
	height: 90px;
	color: var(--f-prim-clr);
	margin-top: 100px;
}

.chkout_box{
	position: relative;
	width: 30%;
	display: table;
	padding: 1.5%;
}

.chkout_box:hover{
	cursor: pointer;
}

.chkout_box:hover .chkout_ico{
	opacity: 1;
}

.chkout_box:hover .chkout_sub{
	opacity: 1;
}

.chkout_box:last-child::after{
	display: none;
}

.chkout_check{
	position: absolute;
	min-width: 35px;
	max-width: 35px;
	top: 6px;
	right: 0;
	left: 53%;
	z-index: 10;
}

.chkout_ico{
	margin: 0 auto 10px auto;
	width: 50px;
	opacity: 0.2;
	transition: 250ms ease-in;
}

.chkout_box:hover .chkout_ico{
	transform: translateY(-6px);
}

.chkout_sub{
	text-align: center;
	font-family: var(--second-ff);
	font-size: 18px;
	opacity: 0.2;
	transition: 250ms ease-in;
}

.opacity_full{
	opacity: 1 !important;
	transition: 100ms ease-in-out;
}

.chkout_cart{
	display: block;

}

.chkout_accounting{
	display: block;

}

.notes{
	position: relative;
	width: 60%;
	margin: 0 auto 5% auto;
}

.chkout_order_top .notes{
	float: left;
}

.textarea{
	width: 100%;
	height: 100px;
	background-color: var(--accent-2-clr);
	margin-bottom: 20px;
	resize: none;
	border: 1px solid var(--unchanged-clr-trq);
	color: var(--f-prim-clr);
	padding: 5px;
	outline: none;
	font-size: 14px;
}

.notes input{
	width: 100%;
	background-color: var(--accent-2-clr);
	border: 1px solid var(--unchanged-clr-trq);
	color: var(--f-prim-clr);
	padding-left: 5px;
	height: 25px;
	outline: none;
}

.label, .label_chk_box, .label_rdo_box{
	font-size: 20px;
	font-family: var(--second-ff);
	margin-left: 10px;
	position: relative;
	width: 100%;
	margin-bottom: 6px;
	color: var(--f-prim-clr);
	text-transform: uppercase;
	display: table;
}

.label_chk_box{
	font-size: 16px;
	width: max-content;
	margin: unset;
	padding-bottom: 3px;
}

.label_rdo_box{
	font-size: 16px;
	width: max-content;
	margin: unset;
	padding-bottom: 3px;
	margin-left: 5px;
	float: left;
}

.label::before{
	width: 1px;
	height: 22px;
	border-left: 2px dotted var(--accent-3-clr);
	position: absolute;
	left: -10px;
	top: 2px;
	content: "";
}

.label_wpr{
	margin-bottom: 20px;
	width: max-content;
	display: table;
	float: left;
	clear: left;
}

.label_subline{
	font-size: 14px;
	color: var(--unchanged-clr-trq);
	letter-spacing: .5px;
	width: max-content;
	text-transform: uppercase;
	border-left: 2px solid var(--unchanged-clr-trq);
	padding-left: 8px;
}

.address{
	width: 100%;
	display: table;
	margin-bottom: 20px;
	position: relative;
}

.conm_costcenter_wpr{
	position: relative;
	float: left;
	clear: left;
	width: 100%;
}

.address_box, .input_box {
	display: flex;
	column-gap: 20px;
	margin-bottom: 20px;
}

.input_box_four{
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	margin-bottom: 20px;
}

.input_box_four div{
	flex: 1 0 21% !important;
}

.input{
	width: 100%;
	background-color: var(--accent-2-clr);
	border: 1px solid var(--unchanged-clr-trq);
	color: var(--f-prim-clr);
	outline: none;
	padding-left: 5px;
	height: 25px;
	font-size: 14px;
}


/* max bereich? */
.input_big{
	width: 100%;
	background-color: var(--bg-clr);
	border: 1px solid var(--accent-3-clr);
	outline: none;
	color: var(--f-prim-clr);
	padding: 5px;
	font-size: 18px;
}

.input[type=file]{
	float: right;
	padding-left: 0;
}

.input::file-selector-button {
	border-radius: 0;
	border: 1px solid transparent;
	padding: 2px 6px;
	margin-right: 10px;
	background-color: #39b3a8;
	color: #fff;
}

.input::file-selector-button:hover{
	background-color: transparent;
	color: #fff;
	cursor: pointer;
	border: 1px solid #fff;
}

.input_img{
	width: 500px;
}

.wpr:has([type=checkbox]){
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: flex-end;
}

.input[type=checkbox]{
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	padding: unset;
}

.input[type=checkbox]:checked{
	background-image: url("../img/cb_icon_checked.svg");
	background-repeat: no-repeat;
	background-position: center;
}


input[type=radio] {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	float: left;
	margin-right: 5px;
	cursor: pointer;
}

input[type=radio]:hover{
	background-color: #39b3a8;

}

input[type=radio]:checked{
	background-color: #39b3a8;
	border: 1px solid #FFF;

}

.validate_box:has([type=checkbox]){
	width: max-content;
	display: flex;
	margin-right: 10px;
}
/* max bereich? end */


.chkout_order_top{
	display: table;
	width: 100%;
	margin-bottom: 50px;
}

.address_wpr{
	position: relative;
	width: 48%;
}

.separator{
	border-right: 1px solid var(--unchanged-clr-trq);
}

.summary_accounting{
	position: relative;
	width: 48%;
}

.input:disabled{
	border: none;
}

.textarea:disabled{
	border: none;
}

.pen_ico{
	float: left;
	width: 20px;
	margin: 3px 0 0 5px;
}

.pen_ico:hover{
	cursor: pointer;
	filter: brightness(0) saturate(100%) invert(33%) sepia(71%) saturate(815%) hue-rotate(311deg) brightness(99%) contrast(92%);
}

.unit_cnt_sumup{
	font-family: var(--second-ff);
	font-size: 25px;
	color: #FFFFFF;
	line-height: 26px;
	text-align: center;
	width: 100%;
}
/* checkout end */


/* settings */
.neutral{
	width: 84%;
	float: left;
	position: relative;
	min-height: 1px;
	display: block;
}

.content{
	width: 80%;
	position: relative;
	margin: 0 auto;
	display: table;
	color: var(--f-prim-clr);
}

.set_wpr{
	margin-bottom: 50px;
	display: table;
	width: 100%;

}

.set_sign_wpr{
	width: 48%;
	display: table;
	position: relative;
}

.set_sign{
	width: 100%;
	margin-bottom: 20px;
	float: left;
}

.set_btm_box{
	position: absolute;
	bottom: 0;
}

.date{
	font-family: var(--second-ff);
	font-size: 20px;
}

.wpr:last-child{
	border-bottom: none;
}

.clm_hdl{
	font-size: 12px;
	text-transform: uppercase;
	font-weight: lighter;
}

.clm{
	position: relative;
	display: table;
}

.clm_spacer{
	width: 68%;
	visibility: hidden;
}

.mode_ico{
	width: 35px;
	float: left;
	margin-right: 20px;
	padding: 1%;
}

.conm_order_history .uni_width_10 .mode_ico{
	margin: 0 auto;
	float: unset;
}

#conm_registration{
	display: none;
}

.mode_info{
	float: left;
}

.mode_slct{
	font-size: 12px;
	font-weight: lighter;
	text-transform: uppercase;
}

.mode_txt::before{
	content: " ";
	background-image: url("../img/arrow_tr.svg");
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	display: inline-block;
	margin-right: 5px;
	height: 15px;
	width: 15px;
}

.mode_text, .tbl_prc, .tbl_date, .order_num{
	position: relative;
	font-family: var(--second-ff);
	font-size: 20px;
}

.mode_txt{
	letter-spacing: .5px;
}

.order_num{
	letter-spacing: .5px;
}

.tbl_prc{
	font-size: 24px;
}

.tbl_wrp{
	width: 100%;
}

.tbl_select::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: var(--unchanged-clr-trq);
	z-index: 90;
}

.tbl_select{
	width: 100%;
	position: relative;
	margin-bottom: 30px;
	display: flex;
	padding-left: 10px;
}

.empty{
	border: none;
	width: 40px;
}

.order .fltr{
	display: block;
	top: 0;
	left: 0;
	position: relative;
	padding: 0;
	margin-bottom: 40px;
}
.order .select{
	width: 170px;
	text-align: center;
	border-right: 1px dotted var(--accent-3-clr);
	border-left: none;
}

.order .drp{
	z-index: 90;
}

.select p{
	position: relative;
	width: max-content;
	margin: 0 auto;
}

.select p::before {
	content: "";
	background-image: url("../img/arrow_tr.svg");
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	height: 12px;
	width: 12px;
	left: -15px;
	top: 2px;
}
/* settings end */


/* standart table Max */
.conm_customers_table{
	min-width: 900px;
}

.tbl td{
	padding: 20px 0 20px 0;
	color: #fff;
	font-family: var(--second-ff);
	font-size: 18px;
}

.tbl td:is(.mode_slct){
	font-family: var(--second-ff) !important;
	font-size: 12px !important;
	font-weight: lighter !important;
}

.tbl_ico_cntr{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tbl th{
	text-align: left;
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: lighter;
	padding-bottom: 5px;
}

.tbl tr{
	border-bottom: 1px dotted #fff;
	display: flex;
	align-items: center;
	column-gap: 20px;
}

.tbl thead tr{
	border-bottom: 1px solid #fff;
}

.tbl tbody tr:hover{
	background-color: #212121;
	cursor: pointer;
}
/* standart table max end */


/* Homepage */
/* Teaser / Slider */
.slider_wpr{
	position: relative;
	width: 100%;
	height: 100%;
	margin-bottom: 20px;
}

.slider_img{
	width: 100%;
	cursor: pointer;
}

.slider_img img{
	object-fit: cover;
}


.botm_logo{
	position: absolute;
	width: 200px;
	height: 159px;
	top: -30px;
	left: -60px;
}

.prism_hdl{
	position: absolute;
	background-image: url("../img/prism_head.svg");
	width: 100%;
	height: 12px;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
	background-size: 150%;
	background-position: center;
}

/* spans Grid Item over 5 collumns */
.grid_full_witdh{
	grid-column: 1/6;
}

/* three Grid layout */
.thr_grid{
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 1.25%;
	row-gap: 20px;
	width: 100%;
}

/* Catalogue Selection Area */
.cat_img{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 65px;
	background-color: var(--catalog-clr);
	border: 1px solid transparent;
}

.cat_img:hover{
	border: 1px solid var(--unchanged-clr-trq);
	border-bottom-color: transparent;
}

.cat_box{
	position: relative;
}

.cat_box:hover{
	cursor: pointer;
}

.cat_box:first-child,
.cat_box--header {
	border: 1px solid var(--unchanged-clr-trq);
}

.cat_box--header {
	cursor: default;
}

.cat_box--header:hover {
	cursor: default;
}

.cat_box:hover .btn_out{
	background-color: var(--unchanged-clr-trq);
	border: solid thin var(--unchanged-clr-trq);
}

.cat_box_hdl{
	position: absolute;
	width: max-content;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.cat_box_hdl .hdl_mid::after{
	content: " ";
	position: relative;
	display: block;
	background-image: url("../img/prism_head.svg");
	width: 100%;
	height: 12px;
	background-repeat: no-repeat;
	background-size: 150%;
	background-position: center;
}

.cat_box_hdl .hdl_mid{
	border: none;
	margin: 0 auto 15px auto;
}

.cat_box:has(.bvv_branding_logo) .cat_img{
	display: unset;
	padding: unset;
}

.cat_box:has(.bvv_branding_logo) .cat_img img{
	width: 100%;
}

.cat_box_hdl span{
	display: block;
	color: var(--f-prim-clr);
	font-size: clamp(1rem, 1.2vw + .25rem, 3rem);
	text-align: center;
	text-transform: uppercase;
}

.bvv_branding_logo{
	position: absolute;
	width: 24%;
	top: 20px;
	left: 20px;
	padding: 3px 0;
	filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.6))
	drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6))
	drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.6))
	drop-shadow(1px -1px 2px rgba(0, 0, 0, 0.6))
	drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.6));
	z-index: 1;
}

.cat_img img{
	width: 70%;
}

.cat_ico{
	float: left;
	width: 25px;
	margin-right: 10px;
	padding: 2px;
	filter: var(--accent-3-ico-clr);
}


/* footer */
footer{
	position: relative;
	display: table;
	width: 100%;
	margin-top: 40px;
	padding: 40px 8%;
	margin-bottom: 100px;
}

footer .logo_box{
	top: 40px;
	left: 8%;
	transform: unset !important;
}

.ftr_info_wpr{
	display: flex;
	float: right;
	justify-content: space-between;
	width: 60%;
	clear: right;
}

.ftr_info_box{
	width: 30%;
}

.ftr_info_hdl{
	font-family: "Bebas Neue Regular", "Impact";
	color: var(--unchanged-clr-trq);
	font-size: 30px;
	text-align: left;
	margin-bottom: 20px;
}

.ftr_info_txt{
	display: table;
	width: 100%;
}

.ftr_info_txt span, .ftr_info_box a{
	float: left;
	clear: left;
	color: #686868;
	font-size: 14px;
}

.ftr_info_txt span{
	margin-bottom: 5px;
}

.ftr_info_txt a{
	margin-bottom: 10px;
	transition: color 200ms ease-in-out;
}

.ftr_info_txt{
	margin-bottom: 20px;
}

.mail{
	clear: unset !important;
	color: var(--unchanged-clr-trq) !important;
}

.ftr_info_box a:hover{
	color: var(--unchanged-clr-trq);
	cursor: pointer;
}

.mail:hover{
	border-bottom: 1px solid var(--unchanged-clr-trq);
}

.dot_spacer{
	width: 100%;
	float: left;
	margin: 40px 0;
	height: 1px;
	border: 1px dotted #fff;
}

body.theme-light .dot_spacer {
	border: 1px dotted #000;
}

.ftr_info_icon{
	width: 45px;
	filter: brightness(0) saturate(100%) invert(39%) sepia(12%) saturate(8%) hue-rotate(10deg) brightness(99%) contrast(91%);
}

.ftr_info_icon:hover{
	filter: var(--accent-1-ico-clr);
}

/* footer end */

/* mediaquerys */
/* tablet ansicht */
@media(max-width: 1250px){

	.fiv_grid{
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 6%;
	}

	.grid_full_witdh{
		grid-column: 1/4 !important;
	}

}


/* animationen */
/* loader */
@keyframes cover_fade_in{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 0.8;
	}
}

@keyframes fade_in{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade_out{
	0% {
		opacity: 0.8;
	}

	100% {
		opacity: 0;
	}
}

.loader{
	background-color: #141010;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	opacity: 0.9;
}

.lds-ellipsis{
	display: inline-block;
	position: absolute;
	width: 80px;
	height: 80px;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.lds-ellipsis div{
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1){
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2){
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3){
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4){
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1{
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes lds-ellipsis3{
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}

@keyframes lds-ellipsis2{
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}

/* favoriten icon */
.fav_blk_active, .fav_wht_active, .effect{
	animation: cart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
	position: relative;
}

.fav_blk_active::after, .fav_wht_active::after, .effect::after {
	animation: inherit;
	animation-timing-function: ease-out;
}

.fav_blk_active::after, .fav_wht_active::after, .effect::after {
	will-change: opacity, box-shadow;
	animation-name: particles;
}

.fav_blk_active::after, .fav_wht_active::after, .fav_blk_active::before, .fav_wht_active::before, .effect::after, .effect::before {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	content: '';
}

.fav_blk_active::after, .fav_wht_active::after, .effect::after {
	margin: -0.1875rem;
	width: 0.4rem;
	height: 0.4rem;
	box-shadow: 0.32476rem -4rem 0 -0.20625rem #ff8080, -1.32476rem -3.625rem 0 -0.20625rem #ffed80, 3.54798rem -2.61656rem 0 -0.20625rem #ffed80, 3.84982rem -0.89057rem 0 -0.20625rem #a4ff80, 3.85252rem 1.98418rem 0 -0.20625rem #a4ff80, 2.63145rem 1.2675rem 0 -0.20625rem #80ffc8, 2.00905rem 3.84381rem 0 -0.20625rem #80ffc8, 2.43154rem 3.22414rem 0 -0.20625rem #80c8ff, -2.59425rem 3.562rem 0 -0.20625rem #80c8ff, -3.84635rem 1.50595rem 0 -0.20625rem #a480ff, -3.99705rem -1.35095rem 0 -0.20625rem #a480ff, -3.48692rem -2.90073rem 0 -0.20625rem #ff80ed, -3.14301rem -4.12438rem 0 -0.20625rem #ff80ed, -5.25479rem -2.38275rem 0 -0.20625rem #ff8080;
}

.fav_blk_active, .fav_wht_active, .effect {
	animation: rotate 650ms 1 ease-in-out;

}

/* ===================================
   LEGACY: Cart Icon Styles
   DEPRECATED - Now handled by:
   - CartIcon.vue (scoped styles)
   - assets/scss/components/_cart-icon.scss (keyframes)
   =================================== */


.toggle_cart {
	align-self: center;
	color: #aab8c2;
	font-size: 2em;
	user-select: none;
	cursor: pointer;
}

/* Rotate animation - used by favorites (.fav_blk_active, .fav_wht_active, .effect) */
@keyframes rotate {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}
	30%, 50%, 70% {
		transform: translate3d(-3px, 0, 0);
	}
	40%, 60% {
		transform: translate3d(3px, 0, 0);
	}
}


/* ===================================
   Cart Badge & Icon Styles
   =================================== */

.cart_ico_wpr {
    position: relative;
    display: inline-block;
    margin-right: 15px;
}

.cart_ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.cart_ico:hover {
    opacity: 0.8;
}

.cart_ico img {
    width: 28px;
    height: 28px;
    filter: var(--accent-3-ico-clr);
}

.cart_badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--red-clr, #d24555);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: badgePop 0.3s ease-out;
}

@keyframes badgePop {
    0% {
        transform: scale(0);
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* ===================================
   Cart Notification Animations
   =================================== */

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}


/* ===================================
   Cart Page Styles
   =================================== */

.cart-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.cart-title {
    font-family: var(--second-ff);
    font-size: 36px;
    color: var(--f-prim-clr);
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cart-items__actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.cart-items__actions .btn-continue {
    width: auto;
    margin-bottom: 0;
}

/* Empty Cart */
.cart-empty {
    text-align: center;
    padding: 80px 20px;
}

.cart-empty-icon {
    width: 80px;
    height: 80px;
    opacity: 0.3;
    margin-bottom: 20px;
    filter: var(--accent-3-ico-clr);
}

.cart-empty-text {
    font-size: 20px;
    color: var(--f-second-clr);
    margin-bottom: 30px;
}

/* Cart Content */
.cart-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto auto;
    gap: 20px;
    padding: 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    align-items: center;
    transition: box-shadow 0.2s ease;
}

.cart-item:hover {
    box-shadow: 0 2px 8px var(--shadow);
}

.cart-item__image {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--bg-secondary);
}

.cart-item__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-item__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-item__name {
    font-family: var(--pirm-ff);
    font-size: 18px;
    font-weight: 600;
    color: var(--f-prim-clr);
    margin: 0;
}

.cart-item__sku {
    font-size: 14px;
    color: var(--f-second-clr);
    margin: 0;
}

.cart-item__eco {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--eco-clr);
}

.cart-item__eco img {
    width: 16px;
    height: 16px;
}

.cart-item__quantity {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.cart-item__quantity label {
    font-size: 13px;
    color: var(--f-second-clr);
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--f-prim-clr);
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quantity-btn:hover:not(:disabled) {
    background-color: var(--accent-1-clr);
    color: white;
    border-color: var(--accent-1-clr);
}

.quantity-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.quantity-input {
    width: 50px;
    height: 32px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--bg-primary);
    color: var(--f-prim-clr);
}

.cart-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.cart-item__price-single {
    font-size: 13px;
    color: var(--f-second-clr);
}

.cart-item__price-total {
    font-size: 20px;
    font-weight: 600;
    color: var(--f-prim-clr);
}


/* Cart Summary */
.cart-summary {
    position: sticky;
    top: 20px;
    padding: 25px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: fit-content;
}

.cart-summary__title {
    font-family: var(--second-ff);
    font-size: 24px;
    color: var(--f-prim-clr);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
    color: var(--f-prim-clr);
}

.cart-summary__total {
    font-size: 20px;
    font-weight: 700;
    padding: 15px 0;
    margin-top: 10px;
}

.cart-summary__note {
    font-size: 13px;
    color: var(--f-second-clr);
    margin: 15px 0 25px 0;
    text-align: center;
}

.btn-checkout {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 13px 15px;
    background-color: var(--accent-1-clr);
    color: white;
    border: 1px solid var(--accent-1-clr);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--pirm-ff);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.btn-checkout:hover {
    background-color: var(--accent-1-clr);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(57, 179, 168, 0.3);
}


.btn-continue,
.btn-primary {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 13px 15px;
    background-color: var(--bg-secondary);
    color: var(--f-prim-clr);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--pirm-ff);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue:hover,
.btn-primary:hover {
    background-color: var(--accent-1-clr);
    color: white;
    border-color: var(--accent-1-clr);
}

/* Loading State */
.cart-loading {
    text-align: center;
    padding: 80px 20px;
    font-size: 18px;
    color: var(--f-second-clr);
}

/* Responsive */
@media (max-width: 900px) {
    .cart-content {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: relative;
        top: 0;
    }

    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 15px;
    }

    .cart-item__quantity,
    .cart-item__price {
        grid-column: 2;
    }
}