/*@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/*@font-face {
	font-family: 'Manrope';
	src: url('/inc/fonts/Manrope-VariableFont_wght.ttf');
}*/

* {
	font-family: 'Manrope', sans-serif;
	box-sizing: border-box;
	outline: none;
	border: none;
	padding: 0;
	margin: 0;
	-webkit-tap-highlight-color: transparent;
}

:root {
	--basic: hsl(35, 16%, 92%);
	--dominant: hsl(170, 80%, 40%);
	--colorful: hsl(30, 100%, 60%);
	--colorful: hsl(15, 100%, 60%);

	--gap: 18px;
	--frame: 1280px;
	--min-width: 280px;
	--min-height: 410px;
	--header: 72px;
	--padding: 30px;
	--rounding: 24px;
	--shadow: 15px 15px 15px -20px rgb(0 0 0 / .15);
	/*--shadow: 15px 30px 40px -20px hsl(35, 20%, 80%);*/

	
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

html {
	min-height: 100vh;
	padding: 0px 0 400px 0;
	background-color: var(--basic);
	/*background-image: linear-gradient(145deg, hsl(170, 35%, 85%) 100px, transparent 500px), radial-gradient(circle at 85% -400px, hsl(390, 100%, 80%), transparent 600px);*/
	/*background-image: radial-gradient(circle at calc(50% - 800px) -150px, hsl(190, 60%, 80%), transparent 600px), radial-gradient(circle at 90% -300px, rgb(255 255 255 / 1), transparent 800px);*/
	background-image: radial-gradient(circle at calc(50% - 800px) -150px, hsl(190, 65%, 80%), transparent 600px);
	/*background-image: linear-gradient(transparent calc(100% - 300px), hsl(200, 40%, 80%) calc(100% - 300px));*/

	
/*	background-image: linear-gradient(45deg, transparent 5px, rgb(0 0 0 / .2) 5px 6px, transparent 6px), linear-gradient(-45deg, transparent 5px, rgb(0 0 0 / .2) 5px 6px, transparent 6px);
	background-repeat: repeat;
	background-position: 2px 0, 0 10px;
	background-size: 20px 20px; 
	background-attachment: fixed;*/

}

body {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
	gap: var(--gap);
	max-width: var(--frame);
	padding: 40px var(--gap);
	margin: 0 auto;

	/*background-image: linear-gradient(45deg, transparent 5px, rgb(0 0 0 / .2) 5px 6px, transparent 6px), linear-gradient(-45deg, transparent 5px, rgb(0 0 0 / .2) 5px 6px, transparent 6px);
	background-repeat: repeat;
	background-position: 2px 0, 0 10px;
	background-size: 20px 20px; 
	background-attachment: fixed;*/
}





header {
	position: relative;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
	align-items: flex-start;
	gap: var(--gap);
	height: var(--header);
	max-height: var(--header);
}

#contacts {
	height: 100%;
	grid-column: 2 / 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 120%;
	font-style: normal;
	font-weight: 600;
	border: 1px solid rgb(0 0 0 / .0);
	border-radius: var(--rounding);
	letter-spacing: -1px;

}

#contacts address {
	grid-column: 2 / 3;
	font-size: 65%;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0px;
}

header > ul {
	grid-column: 3 / -1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
}

header > ul > * {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	/*border: 1px solid rgb(0 0 0 / .1);*/
	min-width: 80px;
	font-size: 75%;
	font-weight: 600;
	cursor: pointer;
}

.favorite {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><path fill="none" stroke="rgb(0 0 0 / .2)" stroke-width="15" stroke-linejoin="round" d="M105 272V154c0-23 24-47 48-47h94v165l-71-71-71 71zM176 201l71-70z"/></svg>') center / 34px no-repeat;
}

.favorite:hover {
	background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><path fill="none" stroke="rgb(0 0 0 / .4)" stroke-width="15" stroke-linejoin="round" d="M105 272V154c0-23 24-47 48-47h94v165l-71-71-71 71zM176 201l71-70z"/></svg>') center / 34px no-repeat;
	cursor: pointer;
}

.favorites .favorite {
	/*background: hsl(30, 100%, 96%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><path fill="white" stroke="hsl(15, 100%, 60%)" stroke-width="15" stroke-linejoin="round" d="M105 272V131c0-12 12-24 24-24h118v165l-71-71-71 71zM176 201l71-70z"/></svg>') center / 34px no-repeat;
	*/background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><path fill="white" stroke="hsl(15, 100%, 60%)" stroke-width="15" stroke-linejoin="round" d="M105 272V154c0-23 24-47 48-47h94v165l-71-71-71 71zM176 201l71-70z"/></svg>') center / 34px no-repeat;
}


#login::before {
	background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><path fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" d="m191 198-15 15h-23v24h-24v23l-12 12H82v-35l74-74a59 59 0 1 1 35 35z"/><circle fill="hsl(170, 80%, 40%)" cx="223.4" cy="130.6" r="14"/></svg>') center / 34px no-repeat;	
/*	background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"><path fill="none" stroke="black" stroke-width="15" d="m191 198-15 15h-23v24h-24v23l-12 12H82v-35l74-74a59 59 0 1 1 35 35z"/><path d="m223 131 71-71z"/></g></svg>') center / 34px no-repeat;	
*/}

#favorites::before {
	/*background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><path fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round" d="M105 272V131c0-12 12-24 24-24h118v165l-71-71-71 71zM176 201l71-70z"/></svg>') center / 34px no-repeat;
	*/background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><path fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round" d="M105 272V154c0-23 24-47 48-47h94v165l-71-71-71 71zM176 201l71-70z"/></svg>') center / 34px no-repeat;
}

#cart::before {
	/*background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round"><path d="m129 154 35-35M188 166l47-47"/><path d="M259 225v-24m-137 31 45-45m92-92c23-23 23-23 47-23"/><path d="M81 95h178v106l-154-23z"/><circle cx="105.4" cy="248.6" r="23.6"/><circle cx="258.8" cy="248.6" r="23.6"/></g></svg>') center / 34px no-repeat;
	*/
	background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round"><path d="m141 166 24-24M188 178l36-36M122 244l31-31m106-106c24-24 24-24 47-24"/><path d="M82 107h177v118l-153-24zM259 237v-12"/><circle cx="105.7" cy="260.3" r="23.6"/><circle cx="259.1" cy="260.3" r="23.6"/></g></svg>') center / 34px no-repeat;
	
/*	background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round"><path d="m141 154 23-23M188 166l35-35M122 232l31-31M259 95c23-23 23-23 47-23"/><path d="M81 95h178v118l-154-23zM259 225v-12"/><circle cx="105.4" cy="248.6" r="23.6"/><circle cx="258.8" cy="248.6" r="23.6"/></g></svg>') center / 34px no-repeat;
*/}

#delivery::before {

	/*background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round"><path d="m164 213 71-71"/><path d="M58 201c47 0 59-11 59-59"/><path d="M117 142c-47 0-59 24-59 71v36h236V107H117v35z"/></g><g fill="white" stroke="hsl(170, 80%, 40%)" stroke-width="15"><circle cx="117.2" cy="248.6" r="23.6"/><circle cx="235.2" cy="248.6" r="23.6"/></g></svg>') center / 34px no-repeat;
	*/background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round"><path d="M258.8 248.6h35.4V107h-177v35.4c-47.2 0-59 23.6-59 70.8v35.4h35.4m47.2 0h69.6M117.2 225a23.6 23.6 0 1 1 0 47.2 23.6 23.6 0 0 1 0-47.2zm118 0a23.6 23.6 0 1 1 0 47.2 23.6 23.6 0 0 1 0-47.2z"/><path d="M58.2 201.4c47.2 0 59-11.8 59-59"/><path d="m164.4 213.2 70.8-70.8"/></g></svg>') center / 34px no-repeat;

}

/*#payment {
	background: radial-gradient(circle at center 21px, red 20px, transparent 21px);
}

#payment:hover {
	background: radial-gradient(circle at center 21px, red 30px, transparent 31px);
	transition: background 1s;
}*/

#payment::before {
	/*background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round"><path d="M94 131h188v118H117c-13 0-23-11-23-24V119c0-13 10-24 23-24h118v36"/><circle cx="235.2" cy="189.6" r="17.7"/></g></svg>') center / 34px no-repeat;
	*/background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354 354"><g fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="15" stroke-linejoin="round"><path d="M94 131h188v118H117c-13 0-23-11-23-24V119c0-13 10-24 23-24h118v36"/><path d="M282 178h-47l-35 35h82"/></g></svg>') center / 34px no-repeat;
}


header > ul >::before {
	display: flex;
	height: 40px;
	width: 40px;
	margin: 0 0 1px 0;
	background-color: white;
	border-radius: 50%;
	box-shadow: var(--shadow);
	content: '';
}


header > ul > .current::before {
	background-color: rgb(0 0 0 / .1) !important;
}


[data-count]::after {
	position: absolute;
	top: -4px;
	/*left: -10px;*/
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12px;
	max-height: 12px;
	min-width: 12px;
	padding: 4px;
	margin: 0 38px 0 0;
	background-color: var(--colorful);
	/*box-shadow: 0 0 0 0px white;*/
	border-radius: 20px;
	font-size: 85%;
	font-weight: 600;
	content: attr(data-count);
	color: white;
}

[data-count='']::after,
[data-count='0']::after {
	display: none;
}

nav {
	position: absolute;
	z-index: 9;
	left: 0;
	top: calc((var(--header) + var(--gap)) * -1);
	width: calc(50% - (var(--gap) / 2));
	height: var(--header);
	display: flex;
	flex-direction: column;

	background: var(--dominant);
	
	border-radius: var(--rounding);
	transition: background 1s, width .3s, height .3s;
	box-shadow: 20px 20px 40px -20px var(--dominant);
}

nav.open {
	width: 100%;
	height: calc(100% + var(--header) + var(--gap));
	box-shadow: 15px 15px 40px -30px var(--dominant);
	/*background-color: black;*/
	/*background: linear-gradient(-160deg, var(--dominant) 50%, hsl(220, 0%, 0%));*/

	/*background: radial-gradient(farthest-corner at 100% 100%, hsl(210, 80%, 70%), var(--dominant) 50%);*/


	/*background: hsl(200, 60%, 60%);*/

	/*transition: background 1s, width .3s, height .3s;*/
}

body.classic nav {
	width: 100%;
}

nav >:first-child {
	display: flex;
	flex-wrap: wrap;
}

nav > * > * {
	flex-grow: 1;
	/*border: 1px dashed yellow;*/
}

nav > section {
	visibility: hidden;
	opacity: 0;
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
}

.search {
	display: flex;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	min-width: 300px;
	min-height: var(--header);
	margin-right: var(--header);
	padding: 0 0 0 var(--padding);
	transition: visibility 1s, opacity 1s;
}

nav.open > section {
	visibility: visible;
	opacity: 1;
	transition: visibility 1s, opacity 1s;
}

nav.open .search {
	visibility: visible;
	opacity: 1;
	min-width: 300px;
	min-height: var(--header);
	margin-right: var(--header);
	
}

nav input {
	height: 36px;
	width: 100%;
	font-size: 120%;
	padding: 0 20px;
	background-color: rgb(255 255 255 / .0);
	box-shadow: 0 0 0 0px white;
	border-radius: 20px;
	color: white;
}

nav.open input {
	background-color: rgb(255 255 255 / .2);
	/*background-color: hsl(215, 80%, 60%);*/
}

/*nav > section {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 0px;
	height: 0px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
	background-color: inherit;
	transition: position .4s;
	color: rgb(255 255 255 / .5);
	border-radius: var(--rounding);
	overflow: hidden;
}*/

/*nav.menu > section {
	width: 200%;
	height: 600px;
	visibility: visible;
	opacity: 1;
	transition: visibility 1.2s, opacity 1.2s, width .4s, height .4s;
}*/








nav ul {
	/*border: 1px dashed yellow;*/
	list-style: none;
	font-size: 120%;
	/*max-height: var(--header);*/
}



#sections {
		
}

nav li {
	padding: 6px 0 6px var(--padding);
	/*border-top: 1px solid rgb(255 255 255 / .1);*/
	cursor: pointer;
	color: black;
	font-weight: 600;
}

/*nav li:hover {
	color: var(--colorful);
}*/

/*nav li.current {
	color: black;
}*/

#headline {
	position: relative;
	/*background-color: whitesmoke;*/
	grid-column: 1 / span 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 8px 0 var(--padding);
	/*height: calc(100% + var(--header) + var(--gap));*/
	height: calc(100%);
	/*transform: translateY(calc((var(--header) + var(--gap)) * -1));*/
/*	border-radius: 0 0 100px 0;
	border: 16px solid var(--colorful);
	border-top: 0;
	border-left: 0;*/
}

body.classic #headline {
	grid-column: auto;
	grid-row: span 20;
}

body.horizontal #headline {
	grid-column: auto;
	grid-row: span 2;
}

#logo {
	/*position: absolute;*/
	/*z-index: 10;*/
	/*top: calc((var(--header) - 30px) / 2);*/

	/*top: 20px;
	left: 0;*/
	width: 130px;
	max-width: 130px;
	height: var(--header);
	display: flex;
	align-items: center;
	/*justify-content: space-between;*/
	padding: 0 0 0 45px;
	margin-left: var(--padding);
	/*margin-left: 24px;*/
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 95"><path d="M200 60l-30-15-30 15v35h60V60zM35 35l30 15 30-15V0H35v35zm130 0l-30 15-30-15V0h60v35zM0 60l30-15 30 15v35H0V60zm130 0l-30-15-30 15v35h60V60z" fill="black"/></svg>') 0 center / 40px no-repeat;
	text-align: center;
	text-decoration: none;
	color: rgb(255 255 255 / 1);
	color: black;
	/*color: var(--basic);*/
/*	visibility: visible;
	opacity: 1;
	transition: visibility .5s, opacity .5s;*/
}

#logo::before {
	content: 'СтройПроект\AТехнолоджи';
	font-size: 75%;
	font-weight: 800;
	white-space: pre-wrap;
	line-height: 1.0;
	margin-top: -2px;
}




#menu {
	position: absolute;
	right: 0;
	top: 0;
	height: var(--header);
	width: var(--header);
	/*background-color: rgb(255 255 255 / .1);
	*/
	/*background-color: var(--colorful);*/
	/*background-color: black;*/
	border-radius: 0 0 var(--rounding) 0;
	border-radius: var(--rounding);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 80%;
}

#menu::after {
	width: 20px; 
	height: 14px;
	/*background: linear-gradient(rgb(255 255 255 / .5) 2px, transparent 2px) 0 0 / 20px 5px repeat-y;*/
	background: linear-gradient(white 2px, transparent 2px) 0 0 / 20px 6px repeat-y;
	content: '';
	visibility: visible;
	opacity: 1;
	transition: visibility .4s, opacity .4s;
	/*clip-path: polygon(100% 0, 100% 70%, 85% 70%, 85% 100%, 0 100%, 0 0);*/
}

/*#menu:hover {
	background-color: black;
}*/

/*#menu:hover::after {
	background: linear-gradient(var(--colorful) 2px, transparent 2px) 0 0 / 20px 5px repeat-y;
}*/

#menu::before {
	position: absolute;
	width: 20px; 
	height: 20px;
	content: '';
	opacity: 0;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><path fill="none" stroke="rgb(255 255 255 / 1)" stroke-width="15" d="m12 13 200 200M12 213 212 13"/></svg>') 0 0 / 20px no-repeat;
	transition: visibility .4s, opacity .4s;
}

/*#menu:hover::before {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><path fill="none" stroke="rgb(255 255 255 / 1)" stroke-width="26" d="m12 13 200 200M12 213 212 13"/></svg>') 0 0 / 16px no-repeat;
}*/

#headline.menu nav {
	left: -100%;
	height: calc(100% + var(--header) + var(--gap));
}

#headline.menu #logo {
	visibility: hidden;
	opacity: 0;
}

#headline.menu #menu::after {
	visibility: hidden;
	opacity: 0;
}

#headline.menu #menu::before {
	opacity: 1;
	transition: visibility 1s, opacity 1s;
}

body > section {
	position: relative;
	background-color: rgb(50 0 0 / .1);
	border-radius: var(--rounding);
	min-height: var(--min-height);
}

article[id] {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background-color: white;
	border-radius: var(--rounding);
	/*border-radius: 0 0 var(--rounding) 0;*/
	box-shadow: var(--shadow);
	min-height: var(--min-height);
	/*overflow: hidden;*/
}

article[id] h2 {
	font-size: 100%;
	font-weight: 600;
	padding: 20px var(--padding) 10px var(--padding);
	margin-bottom: auto;
}

.image {
	min-height: 180px;
	/*background-color: whitesmoke;*/
}

article > .prices {
	display: grid; 
	grid-template-columns: 1fr 1fr 100px;
	align-items: center;
	height: 64px;
	padding: 0 17px 0 var(--padding);
}

article > .prices .add {
	height: 36px;
	background-color: var(--colorful);
	border-radius: 30px;
	color: white;
}

article > .prices .add::after {
	content: 'Купить';
}


article.cart > .prices .add {
	background-color: var(--dominant);
}


article .price {
/*	font-family: 'Inter', sans-serif;
	*/
	font-weight: 600;
	color: black;
}

article .price::after {
	font-size: 75%;
	font-weight: 400;
	padding: 0 0 0 5px;
	content: attr(data-currency);
	color: black;
}

article.remove {
	opacity: 0;
	transition: opacity 1s;
}

div[data-weight],
div[data-row] {
	display: grid;
	grid-template-columns: auto 10fr minmax(65px, 1fr);
	padding: 1px 0px;
	margin: 0 15px 1px var(--padding);
	font-size: 80%;	
}

div[data-weight]::before {
	content: attr(data-weight);
}

div[data-row]::before {
	content: attr(data-row);
}
div[data-weight]:first-child,
div[data-row]:first-child {
	border-radius: 6px 6px 0 0;
}

div[data-weight] hr,
div[data-row] hr {
	flex-grow: 1;
	height: 20px;
	background: linear-gradient(90deg, rgb(0 0 0 / .5) 0 30%, transparent 30% 100%) left bottom / 4px 1px repeat-x;
}

h1 {
	/*font-family: 'Inter', sans-serif;*/
	font-size: 300%;
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1;
	padding: 20px 40px 20px 0;
	color: white;
}

#digest {
	display: flex;
	flex-wrap: wrap;
	/*margin: 0px 25px 40px calc(var(--left-padding) - 11px);*/
	margin: 0 20px auto 0;
	/*border: 1px dashed blue;*/

}

#digest.filter a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	height: 34px;
	padding: 0px 14px;
	margin: 7px 7px 0 0;
	/*background-color: rgb(255 255 255 / 1);
	background-color: hsl(35, 15%, 50%);*/
	background-color: rgb(255 255 255 / 1);
	/*background-color: var(--basic);*/
	transition: background .1s;
	border-radius: 30px;
	white-space: nowrap;
	font-size: 85%;
	font-weight: 600;
	color: black;
	/*border: 1px solid transparent;*/
	/*color: white;*/
	/*color: var(--dominant);*/
	/*box-shadow: 9px 9px 15px rgb(0 0 0 / .1);*/
	/*box-shadow: 0 0 0 2px rgb(255 255 255 / 1);*/
}

#digest.filter a:hover {
	background-color: rgb(0 0 0 / .1);
	/*background-color: white;*/
	/*border-color: black;*/
	/*background-color: var(--dominant);
	background-color: black;
	color: white;*/
}

#digest.filter a.tagged {
	background-color: black;
	color: white;
}

#link {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 34px;
	height: 34px;
	margin: 0 0 0 0;
	padding: 0 14px;
	border-radius: 20px;
	font-size: 85%;
	color: white;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	transition: width .3s ease-in-out;
	color: white;
	background: rgb(0 0 0 / 1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 402 402"><path fill="none" stroke="hsl(170, 80%, 40%)" stroke-width="18" d="M215 186c14 14 14 37 0 50l-33 34a36 36 0 01-50 0 36 36 0 010-50l17-17m37 13a36 36 0 010-50l33-34c14-13 37-13 50 0 14 14 14 37 0 51l-16 16"/></svg>') center / 34px no-repeat;
}


/*#link:active {
	background-color: orangered;
}

#link:active,
#link:hover {
	width: 180px;
}

#link::before {
	content: 'Ссылка на результат';
	opacity: 0;
	transition: opacity .1s;
}

#link:hover::before {
	opacity: 1;
	transition: opacity .4s .2s ease-in-out;
}*/

#link[href=""] {
	display: none;
}

#results {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 64px;
}

#found {
	white-space: nowrap;
	font-size: 90%;
}

#view {
	display: flex;
	margin: 0 0 0 auto;
	/*flex-wrap: wrap;
	justify-content: center;*/
	/*padding: 0 7px 7px 7px;*/
	/*background-color: white;*/
}

#view .current {
	background-color: white;
}

/*#view .vertical {
	background: linear-gradient(90deg, transparent 6px, var(--basic) 6px) 0 0 / 7px 100% repeat-x;
	background-color: rgb(0 0 0 / .1);
}*/

#view .vertical::before {
	width: 4px;
	height: 10px;
	/*box-shadow: 0 0 0 1px var(--basic);*/
	border: 2px solid rgb(0 0 0 / .2);
	border-radius: 5px;
	content: '';
}

#view .table::before,
#view .horizontal::before {
	width: 10px;
	height: 4px;
	border: 2px solid rgb(0 0 0 / .2);
	border-radius: 5px;
	content: '';
}

#view .table::before {
	width: 14px;
	height: 2px;
	border-left: none;
	border-right: none;
	border-radius: 0;
}

/*#view .table::before {
	width: 12px;
	height: 3px;
	background: linear-gradient(white 1px, transparent 1px) 0 1px repeat-y;
	content: '';
}*/

/*#view .horizontal {
	background: linear-gradient(transparent 6px, var(--basic) 6px) 0px 0px / 100% 7px repeat-y;
	background-color: rgb(0 0 0 / .1);
}
*/
/*#view .table {
	background: linear-gradient(DarkTurquoise 1px, transparent 1px) 0 0 / 100% 4px repeat-y;
}*/

#view > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	margin: 0 7px 0 0;
	/*background-color: rgb(0 0 0 / 1);
	background-color: white;*/
	cursor: pointer;
}

#view >:hover {
	background-color: var(--colorful);
	transition: background-color .2s;
}



strong,
span {
	white-space: nowrap;
}

.thead {
	display: none;
}

.table .thead {
	z-index: 1;
	position: relative;
	display: grid;
	align-items: flex-start;
	height: 65px;
	padding-top: 2px;
	/*background-color: var(--colorful);*/
	background-color: rgb(0 0 0 / .3);
	color: white;
	border-radius: var(--rounding) var(--rounding) 0 0;
	transform: translateY(20px);
}

body.table {
	grid-template-columns: 1fr;
	gap: 1px;
}


/*body.horizontal #headline {
	grid-column: auto;
	grid-row: span 2;
}*/

body.table #headline {
	grid-column: auto;
	grid-row: auto;
}

body.table > article {
	z-index: 2;
	grid-template-columns: 90px 3fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	border-radius: 0px;
	min-height: 40px;
	/*border-bottom: 1px solid var(--basic);*/
}


.count {
	display: flex;
	align-items: center;
	/*border: 1px solid red;*/
	border-radius: 20px;
	width: 100px;
	padding: 4px;
	background-color: rgb(0 0 0 / .05);
	/*background: linear-gradient(rgb(0 0 0 / .08), rgb(0 0 0 / .05));*/
	box-shadow: 1px 1px 2px rgb(0 0 0 / .2) inset;
	transition: background .2s;
	overflow: hidden;
}

.count input {
	width: 50px;
	height: 21px;
	background-color: transparent;
	border: none;
	font-size: 100%;
	text-align: center;
	color: var(--dominant);
	
}

.count button {
	--button: rgb(0 0 0 / .2);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	width: 21px;
	height: 21px;
	background-color: rgb(255 255 255 / 1);
	background: #f5f5f5;
	/*box-shadow: 2px 2px 3px -1px rgb(0 0 0 / .3);*/
	box-shadow: 1px 1px 2px 0px rgb(0 0 0 / .3);
	border-radius: 50%;
	border: 5px solid white;
	border-right-color: #e5e5e5;
	border-bottom-color: #e5e5e5;
	font-size: 100%;
	transition: inherit;
}

.count button.plus {
	background-image: linear-gradient(90deg, var(--button) 1px, transparent 1px), linear-gradient(var(--button) 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px), linear-gradient(white 1px, transparent 1px);
	background-position: 5px 0, 0 5px, 6px 0, 0 6px;
}

.count button.minus {
	background-image: linear-gradient(var(--button) 1px, transparent 1px), linear-gradient(white 1px, transparent 1px);
	background-position: 0 5px, 0 6px;
}

.count:hover {
	/*background-color: hsl(170, 50%, 90%);*/
	/*background-color: rgb(0 0 0 / .05);*/
}

/*.count:invalid {
	background-color: hsl(0, 100%, 90%);
}*/

.count button:hover {
	/*--button: rgb(0 0 0 / 1);*/
	--button: var(--dominant);
	/*background-color: white;*/
	box-shadow: 1px 1px 2px 0px rgb(0 0 0 / .3);
	cursor: pointer;
}



.table .image {display: none}
.table > article > * {grid-row: 1; position: relative; margin: 0; padding: 10px 15px; border-right: 0px solid var(--basic); font-size: 100%;}
.table > article > h2 {grid-column: 2; padding: 10px 15px; font-weight: 400}
.table div[data-row='Артикул'] {grid-column: 1; text-align: right;}
.table div[data-row] {display: block}
.table div[data-row]::before {content: ''}
.table div[data-row] hr {display: none}
.table div[data-row='Наличие'] {grid-column: 3}


/*.table > article:nth-of-type(2) {
	border-radius: var(--rounding) var(--rounding) 0 0;
}
*/
.table > article:nth-last-child(-n+1) {
	border-bottom-left-radius: var(--rounding);
	border-bottom-right-radius: var(--rounding);
}

/*
.table > article:nth-of-type(1) > *::before {
	z-index: 1;
	display: flex;
	align-items: center;
	position: absolute;
	top: -50px;
	left: 0;
	width: calc(100% - 30px);
	height: 50px;
	padding: 0 15px;
	font-size: 90%;
	background-color: RosyBrown;
	background-image: linear-gradient(transparent 70%, rgb(0 0 0 / .2));
	color: white;
	content: '0';
	content: attr(data-row);
	
}*/

.table  article > .prices {
	display: grid; 
	grid-template-columns: 1fr 1fr 100px;
	align-items: flex-start;
	height: auto;
	padding: 10px 15px;
	/*background-color: bisque;*/
}

.table  article > .prices .add {
	display: none;
	height: 36px;
	background-color: var(--colorful);
	border-radius: 30px;
	color: white;

}

.table  article > .prices .add::after {
	content: 'Купить';
}

.table  article .price {
/*	font-family: 'Inter', sans-serif;
	*/
	font-weight: 400;
}

.table  article .price::after {
	display: none;
}

body.horizontal {
	grid-template-columns: repeat(auto-fill, minmax(calc(var(--min-width) * 1.5), 1fr));
}

body.horizontal > article {
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr auto;
	min-height: calc(var(--min-height) / 2);
}

body.horizontal > article .image {
	grid-row: span 6;
}

body.horizontal > article >:not(.image) {
	grid-column: 2;
}


/*@keyframes show {
  
  0% {
  	visibility: hidden;
  	opacity: 0;
  }

  100% {
  	visibility: visible;
  	opacity: 1;
  }
}

@keyframes hidden {
  
  0% {
  	visibility: visible;
  	opacity: 1;
  }

  100% {
  	visibility: hidden;
  	opacity: 0;
  }
}*/

@media (max-width: 560px) {

	body {
		/*padding: 0 calc(var(--gap) / 2);
		gap: calc(var(--gap) / 2);*/
	}

	header > ul {
		grid-column: 1 / -1;
	}

	nav {
		width: 100%;
	}

/*	nav,
	nav.show {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
		left: 0;
		right: 0;
		top: 0;
		border-radius: 0;
	}

	nav.show {
		height: 600px;
	}*/


/*
	#logo {
		margin-left: 4px;
		top: 22px;
	}	*/

	#headline {
		grid-column: 1;
/*		padding: 0 10px;
		transform: translateY(0);*/
	}

	/*#digest.filter a {
		font-size: 85%;
	}*/
}