/* Подвал сайта. Макет Claude Design «Футер · 8a».

   Фирменный зелёный взят общий по сайту — #1D3A37 (в макете стоял ранний
   #14322B, им же были сделаны первые правки кабинета; 23.08 всё сведено
   к одному цвету, и подвал не должен снова разъезжаться).

   Селектор верхнего уровня — footer#colophon.tk-footer: в dynamic_style.php
   темы есть правило footer#colophon{background-color:…}, одним классом его
   не перебить. */

.tk-footer {
	--tk-deep: #1D3A37;
	--tk-accent: #8A6A3B;
	--tk-bg: #FBF9F6;
	--tk-border: #E4DCCF;
	--tk-muted: #7C756C;
	--tk-link: #55504A;
	--tk-label: #A9A093;
	--tk-faint: #B5AC9F;
	--tk-rule: #DDD6CC;
}

footer#colophon.tk-footer {
	position: relative;
	box-sizing: border-box;
	padding: 0 72px 40px;
	background: var(--tk-bg);
	border-top: 1px solid var(--tk-border);
	font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--tk-deep);
}

.tk-footer *,
.tk-footer *::before,
.tk-footer *::after { box-sizing: border-box; }

/* Короткий засечённый штрих у левого края — держит верхнюю границу. */
.tk-footer__accent {
	position: absolute;
	left: 0;
	top: -1px;
	width: 132px;
	height: 2px;
	background: var(--tk-accent);
}

.tk-footer__inner {
	max-width: 1296px;
	margin: 0 auto;
}

/* ---------- верх ---------- */

.tk-footer__top {
	display: grid;
	grid-template-columns: 270px 1fr auto;
	gap: 44px;
	align-items: start;
	padding: 56px 0 44px;
}

.tk-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.tk-footer__logo {
	display: block;
	width: 210px;
	height: auto;
	max-width: 100%;
}

.tk-footer__tagline {
	margin: 0;
	max-width: 240px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--tk-muted);
	text-wrap: pretty;
}

.tk-footer__info {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-top: 6px;
}

.tk-footer__hours {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tk-footer__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tk-label);
}

.tk-footer__hours-main {
	font-size: 16px;
	font-weight: 600;
	color: var(--tk-deep);
}

.tk-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 30px;
}

/* Без точек ссылки разделять нечем — расстояние между ними давал только
   зазор флекса, и «Доставка и оплата  Возврат и обмен» на одной строке
   читались как одна фраза. Поэтому в этом случае список становится честно
   вертикальным: по ссылке на строку. Так же сделано в бургер-меню. */
.tk-footer__links:not(.has-dots) a { flex: 0 0 100%; }

.tk-footer__links a {
	font-size: 14.5px;
	color: var(--tk-link);
	text-decoration: none;
	transition: color 200ms ease;
}

.tk-footer__links a:hover,
.tk-footer__links a:focus-visible { color: var(--tk-accent); }

/* Точки-разделители между ссылками. Класс has-dots ставит assets/footer.js —
   только когда ссылки уместились в одну строку: на переносе точка повисала бы
   в конце строки. Точка лежит абсолютом и на раскладку не влияет, поэтому
   от её появления строка не переносится и мигания не будет. */
.tk-footer__links a { position: relative; }

.tk-footer__links.has-dots a:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -17px;
	width: 3px;
	height: 3px;
	margin-top: -1px;
	border-radius: 50%;
	background: #C9C0B2;
}

/* ---------- правая колонка ---------- */

.tk-footer__aside {
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: flex-end;
	padding-top: 6px;
}

.tk-footer__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

.tk-footer__pay {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Логотипы платёжных систем приглушены и проявляются при наведении:
   в подвале они справочные, а не рекламные. */
.tk-footer__pay img {
	display: block;
	height: 26px;
	width: auto;
	filter: grayscale(1) opacity(0.5);
	transition: filter 280ms ease;
}

.tk-footer__pay img:hover { filter: none; }

.tk-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tk-footer__soc {
	position: relative;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tk-border);
	border-radius: 50%;
	background: #FFFDF9;
	color: var(--tk-deep);
	transition: border-color 240ms ease, background 240ms ease, transform 240ms ease, color 240ms ease;
}

.tk-footer__soc:hover,
.tk-footer__soc:focus-visible {
	border-color: #D3C9B8;
	background: #FFFFFF;
	transform: translateY(-2px);
}

.tk-footer__soc svg { transition: stroke 240ms ease, fill 240ms ease; }

.tk-footer__soc--ig:hover, .tk-footer__soc--ig:focus-visible { color: #C13584; }
.tk-footer__soc--vk:hover, .tk-footer__soc--vk:focus-visible { color: #0077FF; }
.tk-footer__soc--yt:hover, .tk-footer__soc--yt:focus-visible { color: #FF0000; }

/* Звёздочка — сноска про Meta под чертой. */
.tk-footer__ast {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 9px;
	line-height: 1;
	color: var(--tk-faint);
}

/* ---------- низ ---------- */

.tk-footer__rule {
	height: 1px;
	background: repeating-linear-gradient(to right, var(--tk-rule) 0 4px, transparent 4px 9px);
}

.tk-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 22px;
}

.tk-footer__note {
	margin: 0;
	max-width: 760px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--tk-faint);
}

.tk-footer__legal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
}

.tk-footer__copy {
	font-size: 13px;
	color: var(--tk-label);
}

.tk-footer__cookie {
	padding: 0;
	background: none;
	border: none;
	border-bottom: 1px solid var(--tk-rule);
	border-radius: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	/* reset.css темы поднимает любой button в КАПС — здесь это не нужно. */
	text-transform: none;
	letter-spacing: normal;
	color: #8A8279;
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
}

.tk-footer__cookie:hover,
.tk-footer__cookie:focus-visible {
	color: var(--tk-deep);
	border-color: var(--tk-accent);
	background: none;
}

/* ---------- планшет ---------- */

@media (max-width: 1199px) {
	footer#colophon.tk-footer { padding: 0 40px 36px; }

	.tk-footer__top {
		grid-template-columns: 260px 1fr auto;
		gap: 40px;
		padding: 48px 0 36px;
	}
}

@media (max-width: 991px) {
	.tk-footer__top {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 44px 0 32px;
	}

	/* В одну колонку правый блок прижимается к левому краю вместе с остальным. */
	.tk-footer__aside,
	.tk-footer__group { align-items: flex-start; }

	.tk-footer__info,
	.tk-footer__aside { padding-top: 0; }

	.tk-footer__tagline { max-width: 420px; }
}

/* ---------- телефон ---------- */

@media (max-width: 767px) {
	footer#colophon.tk-footer { padding: 0 20px 28px; }

	.tk-footer__accent { width: 88px; }

	.tk-footer__top {
		gap: 30px;
		padding: 36px 0 28px;
	}

	/* Логотип и подпись под ним — по центру (решение владельца 05.09.2026).
	   В одну колонку блок бренда работает шапкой подвала, и центр читается
	   как его ось; остальные разделы остаются по левому краю, иначе центр
	   потеряет смысл и подвал развалится на четыре одинаковых столбика. */
	.tk-footer__brand {
		align-items: center;
		text-align: center;
	}

	.tk-footer__logo {
		width: 168px;
		margin: 0 auto;
	}

	.tk-footer__tagline { max-width: 320px; }

	.tk-footer__links { gap: 10px 22px; }

	.tk-footer__pay { gap: 14px; }

	.tk-footer__pay img {
		height: 22px;
		/* На тач-экране наведения нет — показываем логотипы как есть. */
		filter: none;
	}

	.tk-footer__soc {
		width: 40px;
		height: 40px;
	}

	.tk-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}