/*
Theme Name: Waiu Astra Child
Template: astra
Version: 1.0
*/

:root{
--top-line-height: 36px;
--nh-top-line-height: 56px;

--top-menu-bg-color: 0,0,0;
--top-menu-bg-alpha: .72;
--top-menu-bg-alpha-from: .32;
--top-menu-anim-time: .5s;

--top-line-logo-width: 144px;
--top-line-navig-margin: 8px;
--top-mb-line-navig-margin: calc(100vw * 0.04);
--nh-top-line-navig-margin: 12px;
--top-line-items-color: #fff;
--top-line-items-padding: 0 10px 0 10px;
--top-line-social-padding-right: 48px;

--case-menu-items-padding: 10px;
--case-size: var(--nh-top-line-height);
--case-width: calc(var(--nh-top-line-height) - 28px);
--case-thickness: 3px;
--case-gap: 8px;
--case-anim: var(--top-menu-anim-time);

--svg-tg-size: 30px;
--svg-mb-tg-top: 30px;
--svg-mb-tg-left: 30px;
--svg-case-size: 36px;

--case-menu-items-padding-rd: var(--case-menu-items-padding) 0 var(--case-menu-items-padding) 0;

--top-line-navig-width: calc( 100% - var(--top-line-logo-width) - var(--top-line-height) - var(--top-line-social-padding-right) - var(--top-line-navig-margin) );
--nh-top-line-navig-width: calc( 100% - var(--top-line-logo-width) - var(--nh-top-line-height) - var(--top-line-social-padding-right) - var(--nh-top-line-navig-margin) );
--svg-tg-margin-top: calc( (var(--top-line-height) - var(--svg-tg-size) ) / 2);
--svg-case-margin-top: calc( (var(--top-line-height) - var(--svg-case-size) ) / 2);
--nh-svg-tg-margin-top: calc( (var(--nh-top-line-height) - var(--svg-tg-size) ) / 2);
--nh-svg-case-margin-top: calc( (var(--nh-top-line-height) - var(--svg-case-size) ) / 2);
--case-menu-items-padding: 10px;


--top-menu-bg: rgba( var(--top-menu-bg-color), var(--top-menu-bg-alpha) );
--top-menu-bg-from: rgba( var(--top-menu-bg-color), var(--top-menu-bg-alpha-from) );
}

@font-face {
  font-family: 'Cormorant';
  src: url('/wp-content/fonts/Cormorant_01.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body{
	width:100%;
	min-width: 300px;
	background-color: #000 !important;
}
body.woocommerce-cart,
body.woocommerce-checkout {
  background: #fff !important;
}
.topMenu{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 5000000;
}
.woocommerce-cart .topMenu,
.woocommerce-checkout .topMenu{
	display:none;
}
.single-product{
	background-color: #000 !important;
}
.topMenuProductSub{
	display: none;
	width:100%;
	height: var(--nh-top-line-height); 
	background-color: #000;
}
.topLine{
	display: block;
	float: left;
	width: 100%;
	min-width: 100%;
	z-index: 1000;
}

.topLogo,
.topBack{
	display:none;
	float: left;
	width: var(--top-line-logo-width);
	height: 100%;
}
.topBack{
	width: 48px;
	color: #fff;
	font-size: 24px;
	text-align: center;
	line-height: calc(var(--nh-top-line-height) + 12px); 
}
.topNavig{
	display: block;
	float: left;
	height: 100%;
	color: var(--top-line-items-color);
}
.topMenuHomeMobile a,
.topMenuHomeMobile a:link,
.topMenuHomeMobile a:visited,
.topMenuHomeMobile a:hover,
.topMenuHomeMobile a:active {
    text-decoration: none !important;
    color: #000 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.topMenu a,
.topMenu a:link,
.topMenu a:visited,
.topMenu a:hover,
.topMenu a:active {
    text-decoration: none !important;
    color: #fff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.topMenu a:where(:not(.wp-element-button)),
.topMenuHomeMobile a:where(:not(.wp-element-button)) {
    text-decoration: none !important;
}
.topMenuBtn{
	float: left;
	display: block;
	height: 100%;
	line-height: var(--top-line-height);
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	cursor: pointer;
}

.topSocial, .topCase{
	float: right;
	width: var(--top-line-height);
	padding: 0 var(--top-line-social-padding-right) 0 0;
	height: 100%;
	z-index: 1000;
}
.topCase{
	width: var(--nh-top-line-height);
	padding: 0 0 0 0;
}

.topCaseMenu{
	float: left;
	display: block;
	width: 100%;
	min-width: 100%;
	height: 0;
	overflow: hidden;
	background: var(--top-menu-bg-from);
    transition: background var(--top-menu-anim-time) ease;
}

.topCaseMenu.topCaseActive{
	height: auto;
	background: var(--top-menu-bg);
    transition: background var(--top-menu-anim-time) ease; 
}

.svgTG{
	display: block;
	margin-top: var(--svg-tg-margin-top);
	width: var(--svg-tg-size);
	height: var(--svg-tg-size);
}

.svgCase{
	display: block;
	margin-top: var(--svg-case-margin-top);
	width: var(--svg-case-size);
	height: var(--svg-case-size);
}


.topMenuHomeMobile{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 80px);
	height: var(--nh-top-line-height);
	z-index: 5001000;
}
.topMenuBtnHome{
	float: left;
	display: block;
	height: 100%;
	padding: 0 calc(100vw * 0.026) 0 calc(calc(100vw * 0.026) + 2vw);
	line-height: var(--nh-top-line-height);
	color: #000;
	font-size: calc(100vw * 0.044);
	font-weight: 400;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	cursor: pointer;
}

@media (min-width:1020px){
	.topLine{
		height: var(--top-line-height);
		background: var(--top-menu-bg);
	}
	.topNavig{
		margin-left: var(--top-line-navig-margin);
	}
	.topMenuBtn{
		width: auto;
		height: 100%;
		padding: var(--top-line-items-padding);
		text-align: left;
		line-height: var(--top-line-height);
	}
	.topSocial{
		float: right;
		display: block;
	}
	.topCase{display: none !important;}
	.topCaseMenu{display: none !important;}
	.mHide{display:block;}
	
}

@media (max-width:1020px){
	.topLine{
		height: var(--nh-top-line-height);
		background: rgba(0,0,0,0);
	}
	.topLine.notHome{
		height: var(--nh-top-line-height);
		background: var(--top-menu-bg);
	}
	.topNavig{
		display: none;
		margin-left: var(--top-mb-line-navig-margin);
	}
	.topMenuBtn{
		width: 100%;
		height: var(--nh-top-line-height);
		padding: var(--case-menu-items-padding-rd);
		text-align: center;
		line-height: var(--nh-top-line-height);
	}
	.topMenuBtn.mShow {color: #000; font-size:32px; width:auto; padding: 0 calc(100vw * 0.026) 0 calc(100vw * 0.026)}
	.topSocial{
		position: absolute;
		top: var(--svg-tg-mb-top);
		left: var(--svg-tg-mb-left);
		display: none;
	}
	.topCaseMenu{
		min-width: 100%;
	}
	.topCase{display:block;}
	.mHide{display:none;}
	.topNavig a.mShow,
	.topNavig a.mShow:visited,
	.topNavig a.mShow:hover,
	.topNavig a.mShow:active{
		color: #000; font-size: 32px; width:auto;
	}
	.topMenuHomeMobile{
		display: block;
	}
}

ul.products.columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.wcapf-before-products {
    max-width: 1200px !important;
    margin: 0 auto !important;
}
@media (max-width:680px){
	.topMenuBtn.mShow {font-size: calc(100vw * 0.044);padding: 0 calc(100vw * 0.026) 0 calc(100vw * 0.026)}
	.topNavig a.mShow,
	.topNavig a.mShow:visited,
	.topNavig a.mShow:hover,
	.topNavig a.mShow:active{
		font-size: calc(100vw * 0.048);
	}
	.single-product .topMenuProductSub{
		display:block;
	}
	ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.wcapf-before-products {
		max-width: 100% !important;
		margin: 0 auto !important;
	}
}

.topLine.notHome {height: var(--nh-top-line-height) !important;}
.topCase  .topMenuBtn {padding: 0;}
.topBG {background: var(--top-menu-bg);}

.notHome  .topLogo {display:block;background-size: auto 50px;background-image:url("/wp-content/images/logo_mini.png");background-repeat:no-repeat;background-position:center;}
.notHome  .topBack {display:block;}
.notHome  .topNavig {width: var(--nh-top-line-navig-width);}
.notHome  .topMenuBtn {line-height: var(--nh-top-line-height);}
.notHome  .svgTG {margin-top: var(--nh-svg-tg-margin-top);}
.notHome  .svgCase {margin-top: var(--nh-svg-case-margin-top);}

.burgerBtn{
	position:relative;
	width:var(--case-size);
	height:var(--case-size);
}

.burgerBtn span{
	position:absolute;
	left:calc((var(--case-size) - var(--case-width))/2);
	width:var(--case-width);
	height:var(--case-thickness);
	background:#fff;
	transition:var(--case-anim) ease;
}

.burgerBtn span:nth-child(1){
	top:calc(50% - var(--case-gap));
}

.burgerBtn span:nth-child(2){
	width:calc(var(--case-width) * 0.8);
	left:calc(var(--case-size) - (var(--case-width) * 0.8) - ((var(--case-size) - var(--case-width)) / 2));
	top:50%;
}

.burgerBtn span:nth-child(3){
	top:calc(50% + var(--case-gap));
}

.burgerBtn.active span:nth-child(1){
	top:50%;
	transform:rotate(45deg);
}

.burgerBtn.active span:nth-child(2){
	opacity:0;
}

.burgerBtn.active span:nth-child(3){
	top:50%;
	transform:rotate(-45deg);
}


a.button.product_type_simple {
    display: none !important;
}