/* Плашка о cookie: узкая графитовая панель внизу, линии и крестики по углам, как у остальных блоков */
.cookie {
	--line: var(--grid-line-dark);
	--cross: var(--grid-cross-dark);
	position: fixed;
	left: 50%;
	bottom: clamp(12px, 2vw, 24px);
	z-index: 900;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	width: min(var(--container), calc(100% - var(--gutter) * 2));
	padding: 12px 12px 12px clamp(16px, 2vw, 24px);
	border: 1px solid var(--line); /* taste-skill-ignore: рамка панели как линии сетки */
	background: var(--c-graphite);
	color: var(--c-white);
	translate: -50% 0;
	animation: cookie-in 420ms var(--ease-out);
}

.cookie[hidden] {
	display: none;
}

.cookie.is-closing {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

@keyframes cookie-in {
	from { opacity: 0; transform: translateY(16px); }
}

.cookie::before,
.cookie::after {
	content: "";
	position: absolute;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--cross), var(--cross)) center / 1px 100% no-repeat, /* taste-skill-ignore: крестик сетки */
		linear-gradient(var(--cross), var(--cross)) center / 100% 1px no-repeat; /* taste-skill-ignore: крестик из двух линий */
	pointer-events: none;
}

.cookie::before { left: -6px; top: -6px; }
.cookie::after { right: -6px; bottom: -6px; }

.cookie__text {
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-muted-dark);
}

.cookie__text a {
	color: var(--c-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cookie__text a:hover {
	color: var(--accent);
}

.cookie__ok {
	min-height: 44px;
	padding-inline: 28px;
	font-size: 12px;
}

@media (max-width: 640px) {
	.cookie { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
	.cookie__ok { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cookie { animation: none; }
	.cookie.is-closing { transition: none; }
}