:root {
  --cc-gray-100: #faf9f8;
  --cc-gray-200: #efece9;
  --cc-gray-300: #e6e2de;
  --cc-gray-400: #dad4ce;
  --cc-gray-500: #bdb5ad;
  --cc-gray-600: #7d756c;
  --cc-gray-700: #575049;
  --cc-gray-800: #403a34;
  --cc-gray-900: #292521;

  --cc-gray: #807e7c;
  --cc-red: #ff0000;
  --cc-green: #00a543;
  --cc-gold: #e69600;
  --cc-cyan: #3f7abe;

  --cc-rgb-gray: 128, 126, 124;
  --cc-rgb-red: 255, 0, 0;
  --cc-rgb-green: 0, 165, 67;
  --cc-rgb-gold: 230, 150, 0;
  --cc-rgb-cyan: 63, 122, 190;
}

body {
	font-family: 'Source Sans 3', var(--bs-font-sans-serif);
	font-size: 1.2rem;
}

img {
	max-width: 100%;
}

.top-header {
}
.brand {
}
.logo img {
}
.slogan {
	color: var(--bs-secondary-color);
}
.nav {
}
.nav-lang {
	font-size: 1rem;
}
.nav-lang .btn {
	font-size: 1rem;
}
.nav-item {
}
.nav-link:hover {
	text-decoration: underline;
}

.footer {
	/* background-color: var(--cc-gray-700); */
	color: white;
	background-color: #2b3035;
	font-size: .9em;
}
.footer a {
	color: var(--cc-gray-300);
	/* white-space: nowrap; */
}
.footer a:hover {
	color: white;
}


.card-body > :last-child::after {
	display: inline-block;
	position: relative;
	top: .15em;
	margin-left: .1em;
	padding: .1em 0;
	content: "\e02a";
	font-family: icons;
	font-size: 1.35em;
	line-height: .75em;
	color: var(--cc-cyan);
	border-radius: .1em;
}
.card:hover .card-body > :last-child::after {
	/* color: white;
	background-color: var(--cc-cyan); */
	color: black;
}


.breadcrumb {
}
.breadcrumb-item {
	overflow: hidden;
	max-width: 20em;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: default;
}
.breadcrumb-item a {
	text-decoration: none;
}
.breadcrumb-item a:hover {
	text-decoration: underline;
}

.btn {
	font-size: 1.2rem;
}
.btn-sm {
	font-size: .85rem;
}
.accordion-button {
	font-size: .8em;
}

.checkmark {
	list-style: none;
	/* list-style: url(../img/icons/checkmark.svg); */
}
.checkmark li:before {
	content: '✓';
	margin-right: .5em;
}




.nlist {
	margin: 0;
	padding: 0;
}

.nlist li {
	margin: 0;
	padding: .7em 0;
	list-style: none;
}
.nlist li + li {
	border-top: thin solid lightgray;
}

/* .tline-1 {
	display: inline-block;
	padding-top: .4em;
	border-top: .2em solid var(--cc-gray-400);
} */
.tline-1::before {
	content: "";
	display: block;
	width: 10rem;
	margin-bottom: .4rem;
	border-top: .2rem solid var(--cc-gray-400);
}
.tline-2 {
	display: inline-block;
	padding-top: .8em;
	border-top: .5em solid var(--cc-gray-400);
}

.border-red {
	border-color: rgb(var(--cc-rgb-red));
}
.border-green {
	border-color: rgb(var(--cc-rgb-green));
}
.border-gold {
	border-color: rgb(var(--cc-rgb-gold));
}
.border-cyan {
	border-color: rgb(var(--cc-rgb-cyan));
}

.border-trans {
	border-color: rgba(var(--cc-rgb-cyan), .5);
}
.border-red::before,
.border-green::before,
.border-gold::before,
.border-cyan::before,
.border-trans::before {
	border-color: inherit;
}

.text-red {
	color: rgb(var(--cc-rgb-red));
}
.text-green {
	color: rgb(var(--cc-rgb-green));
}
.text-gold {
	color: rgb(var(--cc-rgb-gold));
}
.text-cyan {
	color: rgb(var(--cc-rgb-cyan));
}

.bg-red {
	background-color: rgb(var(--cc-rgb-red));
}
.bg-gold {
	background-color: rgb(var(--cc-rgb-gold));
}
.bg-green {
	background-color: rgb(var(--cc-rgb-green));
}
.bg-cyan {
	background-color: rgb(var(--cc-rgb-cyan));
}
.bg-neutral-light {
	background-color: var(--cc-gray-200);
}
.bg-milk {
	background-image: url("../img/gnd-milk.png"), radial-gradient(circle at 20% 0, rgba(var(--cc-rgb-cyan), .05) 0, rgba(var(--cc-rgb-cyan), 1) 100%);
	background-position: 100% 0, 0 0;
	background-repeat: no-repeat;
	background-size: contain;
}


.required label::after {
  content: "*";
  position: relative;
  top: -.3em;
  padding: 0 .1em;
  font-size: .7em;
  color: red;
}


.pseudo {
	margin: 0 0 1em;
	padding: 0 0 0 2em;
	list-style: none;
	counter-reset: item;
}
.pseudo > * {
	clear: both;
	position: relative;
	display: list-item;
	counter-increment: item;
	margin: 0;
	padding: 0;
}
.pseudo > *::before {
	position: absolute;
	top: 0;
	left: -1.5em;
	display: inline-block;
	width: 1em;
	font-weight: 800;
}
.pseudo.count > *::before {
	content: counter(item) ".";
	text-align: right;
}
.pseudo.count.invert > *::before {
	content: counter(item);
}
.pseudo.invert > *::before {
	top: -.125em;
	left: -2em;
	text-align: center;
	width: 1.5em;
	height: 1.5em;
	font-size: 1.25em;
	border-radius: 50%;
}


.pseudo.tick > *::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath fill='%23007a91' d='M 0,4 L 1,3 L 4,6 L 10,0 L 11,1 L 4,8 Z' /%3E%3C/svg%3E%0A");
}
.pseudo.tick > *::before {
	/* content: "\e017"; */
	content: "\e040";
	/* content: "\e07c"; */
	/* content: "\e094"; */
	font-family: "icons";
}
.pseudo.dash > *::before {
	content: "-";
}
.pseudo.dot > *::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Ccircle cx='8' cy='10' r='3' style='fill:%23007a91;stroke:none' /%3E%3C/svg%3E%0A");
}
.pseudo.dot > *::before {
	content: "\2022";
	content: "\25cf";
}

.pseudo-red.tick > *::before  {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath fill='%23ee0000' d='M 0,4 L 1,3 L 4,6 L 10,0 L 11,1 L 4,8 Z' /%3E%3C/svg%3E%0A");
}
.pseudo.dot.white > *::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Ccircle cx='8' cy='10' r='3' style='fill:%23ffffff;stroke:none' /%3E%3C/svg%3E%0A");
}
.pseudo.pine > *::before {
	content: "🎄";
}
.pseudo.books > *::before {
	content: "📚";
}
.pseudo.heart > *::before {
	content: "♥";
}

/* s2 */
.pseudo.s1 {
	padding-left: 4em;
}
.pseudo.s1 > * {
	margin-top: 2em;
}
.pseudo.s1 > *::before {
	top: -.25em;
	font-size: 1.65em;
}

/* s2 */
.pseudo.s2 {
	padding-left: 4em;
}
.pseudo.s2 > * {
	margin-top: 2em;
}
.pseudo.s2 > *::before {
	top: -.25em;
	font-size: 2em;
}

/* s3 */
.pseudo.s3 {
	padding-left: 6em;
}
.pseudo.s3 > * {
	margin-top: 2em;
}
.pseudo.s3 > *::before {
	font-size: 3em;
}

/* color */
.pseudo > *::before {
	color: var(--cc-gray-600);
}
.pseudo.red > *::before {
	color: rgb(var(--cc-rgb-red));
}
.pseudo.green > *::before {
	color: rgb(var(--cc-rgb-green));
}
.pseudo.gold > *::before {
	color: rgb(var(--cc-rgb-gold));
}
.pseudo.cyan > *::before {
	color: rgb(var(--cc-rgb-cyan));
}
/* invert */
.pseudo.invert > *::before {
	background-color: var(--cc-gray-600);
	color: white;
}
.pseudo.invert.red > *::before {
	background-color: rgb(var(--cc-rgb-red));
}
.pseudo.invert.green > *::before {
	background-color: rgb(var(--cc-rgb-green));
}
.pseudo.invert.gold > *::before {
	background-color: rgb(var(--cc-rgb-gold));
}
.pseudo.invert.cyan > *::before {
	background-color: rgb(var(--cc-rgb-cyan));
}

/* меню */
.menu-sets > .col {
	position: relative;
}
.menu-sets > .col::before {
	display: block;
	width: 2em;
	/* height: 1.5em; */
	height: 2em;
	content: "";
	font-size: 2em;
	/* background-color: red; */
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}
/* .menu-sets > .col:nth-child(1)::before {
	background-image: url("../img/icons/icon-star-1.svg");
}
.menu-sets > .col:nth-child(2)::before {
	background-image: url("../img/icons/icon-star-2.svg");
}
.menu-sets > .col:nth-child(3)::before {
	background-image: url("../img/icons/icon-star-3.svg");
} */
.menu-sets > .col:nth-child(1)::before {
	background-image: url("../img/icons/icon-sets-1.svg");
}
.menu-sets > .col:nth-child(2)::before {
	background-image: url("../img/icons/icon-sets-2.svg");
}
.menu-sets > .col:nth-child(3)::before {
	background-image: url("../img/icons/icon-sets-3.svg");
}


/* цена - табелка */
.price-wrap {
	perspective: 22em;
	text-align: center;
}
.price-label {
	position: relative;
	display: inline-block;
	flex-direction: column;
	margin: .7em 0;
	padding: .1em .5em;
	background-color: var(--cc-red);
	border-radius: .3em;
	color: white;
	line-height: 1;
	text-align: center;
	transition: 1s;
	transform: skew(0deg, -10deg) rotateY(40deg);
	box-shadow: 0 .1em .3em rgba(0,0,0,.3);
}
.price-label:hover {
	transform: skew(0deg, 0deg) rotateY(0deg);
}
.price-txt {
	position: relative;
	top: -.8em;
	display: block;
	margin-bottom: -1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.price-old {
	position: relative;
	display: inline-block;
	margin-left: .1em;
	padding: .1em .2em;
	background-color: yellow;
	color: black;
	font-size: 2em;
	font-weight: 900;
	border-radius: .1em;
	box-shadow: 0 .2em .3em rgba(0,0,0,.5);
}
.price-old::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 10%;
	display: block;
	width: 80%;
	border-top: medium solid var(--cc-red);
	transform: rotateZ(10deg);
	box-shadow: 0 .05em .1em rgba(0,0,0,.5);
}
.price-new {
	display: block;
	font-size: 3em;
	font-weight: 900;
}
.price-st {
	font-size: .75em;
}
.price-cur {
	margin-left: .2em;
	font-size: .5em;
	font-weight: 400;
	text-transform: uppercase;
}

.bill {
	display: inline-block;
	margin-bottom: 1em;
	padding: .5em 1em;
	color: white;
	background-color: var(--cc-green);
	border-radius: .3em;
}
.bill .price {
	font-size: 2em;
	line-height: 1;
}


/* меню hover */
.menu-sets .col:hover {
	cursor: default;
}
.menu-sets .col:hover .price-label {
	transform: skew(0deg, 0deg) rotateY(0deg);
}



/* form:has(:focus) {
	background-color: var(--cc-gray-200);
} */


.hdb {
	position: relative;
}
.hdb .hdb-text  a:not([class]),
.hdb .hdb-text .label {
	display: inline-block;
	text-decoration: none;
}
.hdb .hdb-text .title {
	font-weight: 200;
}
.hdb .hdb-img img {
	width: 100%;
}
@media screen and (max-width: 575px) {
	.hdb .hdb-img {
		padding-left: 3%;
	}
	.hdb .hdb-text {
		padding: 0 3% 0 3%;
	}
	.hdb .hdb-text  a:not([class]),
	.hdb .hdb-text .label {
		position: absolute;
		top: 20%;
		left: 0;
		display: inline-block;
		padding: 2% 5%;
		background-color: rgba(var(--cc-rgb-cyan), 0.75);
		color: white;
	}
	.hdb .hdb-text .title {
		margin-top: 1em;
	}
	.hdb .hdb-text .btn {
		color: black;
		border-color: lightgray;
	}
	.hdb .hdb-text.gold .label {
		background-color: rgba(var(--cc-rgb-gold), 0.75);
	}
}
@media screen and (min-width: 576px) {
	.hdb .hdb-img {
		padding-right: 10%;
	}
	.hdb .hdb-text {
		position: absolute;
		top: 10%;
		right: 0;
		bottom: 10%;
		width: 50%;
		margin: 0;
		padding: 3% 12% 3% 3%;
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-gray), 0.75) 80%, rgba(var(--cc-rgb-gray), 1) 0);
		color: white;
	}
	.hdb .hdb-text  a:not([class]),
	.hdb .hdb-text .label {
		font-size: 1.5vw;
		color: white;
	}
	.hdb .hdb-text .title {
		font-size: 3vw;
	}
	.hdb .hdb-text .btn {
		font-size: 1.5vw;
	}

	.hdb.rev .hdb-img {
		padding-right: 0;
		padding-left: 10%;
	}
	.hdb.rev .hdb-text {
		right: auto;
		left: 0;
		padding-right: 3%;
		padding-left: 12%;
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-gray), 1) 20%, rgba(var(--cc-rgb-gray), 0.75) 20%);
	}
	.hdb .hdb-img.rev img {
		transform: scaleX(-1);
	}

	.hdb .hdb-text.red {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-red), 0.75) 80%, rgba(var(--cc-rgb-red), 1) 0);
	}
	.hdb.rev .hdb-text.red {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-red), 1) 20%, rgba(var(--cc-rgb-red), 0.75) 20%);
	}
	.hdb .hdb-text.green {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-green), 0.75) 80%, rgba(var(--cc-rgb-green), 1) 0);
	}
	.hdb.rev .hdb-text.green {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-green), 1) 20%, rgba(var(--cc-rgb-green), 0.75) 20%);
	}
	.hdb .hdb-text.gold {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-gold), 0.75) 80%, rgba(var(--cc-rgb-gold), 1) 0);
	}
	.hdb.rev .hdb-text.gold {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-gold), 1) 20%, rgba(var(--cc-rgb-gold), 0.75) 20%);
	}
	.hdb .hdb-text.cyan {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-cyan), 0.75) 80%, rgba(var(--cc-rgb-cyan), 1) 0);
	}
	.hdb.rev .hdb-text.cyan {
		background-image: linear-gradient(90deg, rgba(var(--cc-rgb-cyan), 1) 20%, rgba(var(--cc-rgb-cyan), 0.75) 20%);
	}
}


.card-label {
	display: block;
	margin-bottom: .5em;
	font-size: 1.2rem;
	font-weight: 600;
}

.card {
	overflow: hidden;
	border-radius: 0;
	background-color: rgba(255,255,255,.8);
}
.card-title {
	font-size: 1.2rem;
}
.card-title:has( + .card-desc) {
	font-weight: 600;
}
.card-desc {
	margin: 0;
	font-size: 1.2rem;
}

/* SLICK */
.slick-container {
	margin: 0 -.5em;
}
.slick .card {
	overflow: hidden;
	margin: 0 1.25em;
	padding: 1em;
	text-decoration: none;
	border: 0;
}
.slick .card * {
	text-decoration: none;
}
.slick .card-body {
	overflow: hidden;
	height: 12em;
	padding: 0;
}
.slick .card-img {
	display: flex;
	max-width: 100%;
	height: 10em;
	margin: 0 0 1em;
	justify-content: center;
	align-items: center;
	background-color: var(--cc-gray-200);
	border-radius: 0;
}
.slick .card-img img {
	height: 100%;
	mix-blend-mode: darken;
}
.slick .card-title {
	font-size: 1.2rem;
	font-weight: 600;
}
.slick .card-desc {
	font-size: 1.2rem;
}
.slick-arrows {
	order: 2;
}
.slick-arrow {
	display: inline-block;
	cursor: pointer;
}
.slick-arrow > span {
	width: 1.5em;
	height: 1.5em;
	filter: invert(.7);
	vertical-align: middle;
}
.slick-dots {
	order: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin: 0;
	padding: 0;
}
.slick-dots button {
	display: none;
}
.slick-dots li {
	display: block;
	width: .7em;
	height: .7em;
	border-radius: 50%;
	background-color: black;
	opacity: .25;
	cursor: pointer;
}
.slick-dots li.slick-active {
	opacity: 1;
	background-color: var(--cc-cyan);
}

/* PRODUCTS */
.product-ingredients {
	background-color: var(--cc-gray-200);
}


.tree-item a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: .9em;
	text-decoration: none;
}

.blog h2 a {
	color: var(--bs-heading-color);
	text-decoration: none;
}

.stock .tree-item a[href$="small"] img {
}

@media screen and (max-width: 575px) {
}
@media screen and (min-width: 576px) {
	html {
		scroll-padding-block-start: 7.5em;
		scroll-behavior: smooth;
	}
	header {
		position: sticky;
		top: 0;
		z-index: 2;
		background-color: white;
		box-shadow: 0 .3em .3em rgba(0,0,0,.2);
	}
}
@media screen and (min-width: 576px) and (max-width: 767px) {
	header .nav-main {
		flex-grow: 1 !important;
	}
}
@media screen and (min-width: 768px) {
	.menu-sets .explanation {
		height: 12em;
	}
}
@media screen and (min-width: 768px) and (max-width: 949px) {
}
@media screen and (min-width: 950px) {
}
@media screen and (min-width: 950px) and (max-width: 1920px) {
}

.flashing {
	animation: flashing linear 1s 1 forwards;
}
@keyframes flashing {
	0% {
		background-color: white;
	}
	50% {
		background-color: var(--cc-cyan);
	}
	100% {
		background-color: white;
	}
}