@import url("/mainpage/new/css/fonts.css");

/*
 * Шапка и подвал ЛИЧНОГО КАБИНЕТА в новом дизайне (этап 1 переноса макета 2026-09).
 * Подключается ТОЛЬКО на страницах кабинета (/personal/*, /welcome/) из header.php.
 * Все селекторы под .cabhdr / .cabftr — это изолирует стили, чтобы они не протекли
 * в тело страниц (корзина/заказы на Bootstrap+site.css остаются как были).
 * Палитра и шрифт — те же, что на новой главной (Manrope, #171310 / #e1251b).
 */

.cabhdr, .cabftr {
	--cab-ink: #171310;
	--cab-ink-2: #211b16;
	--cab-red: #e1251b;
	--cab-red-d: #c91f17;
	--cab-paper: #fbfaf7;
	--cab-cream: #f5f0e8;
	--cab-muted: #9c948a;
	--cab-line: rgba(255,255,255,.14);
	font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}
.cabhdr *, .cabftr * { box-sizing: border-box; }

/* ---------- ЕДИНОЕ ПОЛЕ СТРАНИЦЫ ----------
   В старом шаблоне body покрашен в lightgray, а main:not(.maincat) — в белый
   с отступом 3rem. Отсюда два разных дефекта: на каталоге видно серое (там main
   получает .maincat скриптом и становится прозрачным), а в кабинете и на
   текстовых страницах — белый «лист» на сером. В макете поле везде бежевое
   #f5f0e8, белые только карточки.
   Файл подключается ТОЛЬКО в разделах нового дизайна, поэтому общие обёртки
   красим здесь. Раньше то же самое прописывали постранично (contacts-v2.css,
   cart-v2.css, order-v2.css, order-status-v2.css), и каталог, история заказов,
   «Моя подборка», кабинет и правовые страницы оставались без беж-поля.
   Те постраничные правила задают тот же цвет и ничему не мешают.
   .workarea красим обязательно: он растянут flex-grow в .bx-wrapper с
   min-height:100vh, поэтому беж доходит до подвала на любой короткой странице. */
body,
.bx-wrapper { background: #f5f0e8; }
.workarea {
	padding-top: 0;   /* белая полоска между чёрной шапкой и полем страницы */
	background: #f5f0e8;
}
main:not(.maincat) { background: transparent; }
@media (max-width: 980px) {
	/* у main в шаблоне max-width: calc(100% - 3rem) и padding 3rem 1.5rem — на
	   телефоне это съедало до 72px ширины. Свои отступы у блоков нового дизайна
	   уже есть (.cabpage-article, .wlc, .fav-page, .sale-order-list-container). */
	main:not(.maincat) { max-width: 100%; padding: 8px 0 24px; }
}

/* ---------- ШАПКА ---------- */
.cabhdr {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--cab-ink);
	color: #fff;
	box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.cabhdr__bar {
	width: min(1420px, calc(100% - 48px));
	margin: 0 auto;
	min-height: 70px;
	display: flex;
	align-items: center;
	gap: 34px;
}
.cabhdr__brand {
	font-weight: 800;
	font-size: 21px;
	letter-spacing: .14em;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cabhdr__actions { flex: 0 0 auto; }
.cabhdr__brand:hover { color: #fff; }

.cabhdr__nav {
	display: flex;
	align-items: center;
	gap: 30px;
	font-size: 15px;
	font-weight: 500;
}
.cabhdr__nav a {
	color: #e9e5df;
	text-decoration: none;
	padding: 6px 0;
	position: relative;
	transition: color .18s;
	white-space: nowrap;
}
.cabhdr__nav a:hover { color: #fff; }
.cabhdr__nav a.is-active { color: #fff; }
.cabhdr__nav a.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--cab-red);
	border-radius: 2px;
}

.cabhdr__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

/* мессенджеры */
.cabhdr__chat {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s, transform .18s;
	flex: none;
}
.cabhdr__chat:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.cabhdr__chat img { display: block; width: 22px; height: 22px; }

/* корзина (переиспользуем компонент vladkorn:basket, только переодеваем) */
.cabhdr__cart { display: flex; align-items: center; }
.cabhdr__cart .a_history { display: none !important; }           /* история уже есть в меню */
.cabhdr__cart .se_basket-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 40px;
	border-radius: 999px;
	background: var(--cab-red);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	position: relative;
	align-self: center;               /* перекрыть align-self:stretch из template_styles.css (иначе пилюля на всю высоту шапки) */
	transition: background .18s;
}
.cabhdr__cart .se_basket-wrap:hover { background: var(--cab-red-d); }
/* иконка корзины */
.cabhdr__cart .se_basket-wrap::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
}
/* Гасим стили старого шаблона (template_styles.css) у переиспользованного виджета корзины:
   - .se_basket-wrap::after — золотой «хвост» шириной 1000px справа (это был коричневый блок);
   - .se_basket — фоновая иконка ico-basket.png (вторая корзина), min-width:250px, padding-left:6rem, рамка. */
.cabhdr__cart .se_basket-wrap::after { display: none !important; }
.cabhdr__cart .se_basket {
	color: #fff;
	background: none !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-left: none !important;
	align-self: center;
}
.cabhdr__cart .se_basket:hover { background: none !important; }
.cabhdr__cart .se_basket .count { font-weight: 800; }
/* гасим плавающее позиционирование виджета из старого шаблона внутри новой шапки */
.cabhdr__cart .se_basket.fixed,
.cabhdr__cart .se_basket.fixed-bottom {
	position: static !important;
	top: auto !important; bottom: auto !important; right: auto !important; left: auto !important;
	box-shadow: none !important;
	background: transparent !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* компания + выход */
.cabhdr__user {
	display: inline-flex;
	align-items: center;
	max-width: 190px;
	color: #cdc7bf;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}
.cabhdr__user:hover { color: #fff; }
.cabhdr__company {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cabhdr__logout {
	width: 38px; height: 38px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #cdc7bf;
	background: rgba(255,255,255,.08);
	transition: background .18s, color .18s;
	flex: none;
}
.cabhdr__logout:hover { background: rgba(255,255,255,.18); color: #fff; }
.cabhdr__logout svg { width: 19px; height: 19px; display: block; }

/* гость в каталоге: вход и заявка на доступ вместо корзины и кабинета */
.cabhdr__login,
.cabhdr__cta {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s, color .18s, border-color .18s;
	flex: none;
}
.cabhdr__login {
	color: #fff;
	border: 1px solid rgba(255,255,255,.35);
}
.cabhdr__login:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.cabhdr__cta {
	background: var(--cab-red);
	color: #fff;
	border: 1px solid var(--cab-red);
}
.cabhdr__cta:hover { background: var(--cab-red-d); border-color: var(--cab-red-d); color: #fff; text-decoration: none; }

/* бургер (моб.) */
.cabhdr__burger {
	display: none;
	width: 42px; height: 42px;
	border: none; background: transparent;
	flex-direction: column; justify-content: center; gap: 5px;
	padding: 0; cursor: pointer;
	flex: none;
}
.cabhdr__burger span { display: block; height: 2px; width: 22px; background: #fff; border-radius: 2px; margin: 0 auto; transition: .2s; }

/* ---------- ПОДВАЛ ---------- */
.cabftr {
	background: var(--cab-ink);
	color: #cdc7bf;
	margin-top: 40px;
	font-size: 14px;
}
.cabftr__grid {
	width: min(1420px, calc(100% - 48px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 32px;
	padding: 48px 0 32px;
}
.cabftr a { color: #cdc7bf; text-decoration: none; display: block; margin-bottom: 8px; transition: color .18s; }
.cabftr a:hover { color: #fff; }
.cabftr h3 { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 16px; text-transform: uppercase; letter-spacing: .05em; }
.cabftr__brand strong { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .12em; display: block; margin-bottom: 12px; }
.cabftr__brand p { margin: 0; color: var(--cab-muted); line-height: 1.5; max-width: 320px; }
.cabftr__legal {
	width: min(1420px, calc(100% - 48px));
	margin: 0 auto;
	display: flex; flex-wrap: wrap; gap: 6px 22px;
	padding: 22px 0;
	border-top: 1px solid var(--cab-line);
	color: var(--cab-muted);
}
.cabftr__legal strong { color: #fff; }
.cabftr__bottom {
	width: min(1420px, calc(100% - 48px));
	margin: 0 auto;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
	padding: 16px 0 28px;
	color: var(--cab-muted);
	font-size: 13px;
}

/* ---------- МОБИЛЬНАЯ ВЕРСИЯ ---------- */
@media (max-width: 980px) {
	.cabhdr__bar { width: calc(100% - 28px); gap: 14px; min-height: 60px; }
	.cabhdr__brand { font-size: 18px; letter-spacing: .1em; }
	.cabhdr__nav {
		position: absolute;
		left: 0; right: 0; top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--cab-ink-2);
		padding: 6px 0;
		box-shadow: 0 12px 24px rgba(0,0,0,.4);
		display: none;
	}
	.cabhdr.is-open .cabhdr__nav { display: flex; }
	.cabhdr__nav a { padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
	.cabhdr__nav a.is-active::after { display: none; }
	.cabhdr__nav a.is-active { color: var(--cab-red); }
	.cabhdr__burger { display: flex; }
	.cabhdr__user { display: none; }
	.cabhdr__actions { gap: 8px; }
	.cabhdr__chat { width: 34px; height: 34px; }
	.cabhdr__chat img { width: 20px; height: 20px; }
	.cabhdr__cart .se_basket-wrap { padding: 8px 12px 8px 34px; font-size: 13px; }
	.cabhdr__cart .se_basket-wrap::before { left: 12px; width: 16px; height: 16px; }
	.cabftr__grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0 24px; }
}
@media (max-width: 560px) {
	.cabhdr__chat { display: none; }   /* на узких экранах чаты прячем, они есть в подвале */
	.cabhdr__bar { gap: 10px; }
	/* корзина сжимается в компактную круглую иконку, чтобы гарантированно поместился бургер */
	.cabhdr__cart .se_basket-wrap { padding: 0; width: 40px; height: 40px; border-radius: 50%; justify-content: center; }
	.cabhdr__cart .se_basket-wrap::before { left: 50%; transform: translate(-50%, -50%); }
	.cabhdr__cart .se_basket { display: none; }   /* текст "N товаров, сумма" прячем — виден при открытии корзины */
	.cabhdr__logout { display: none; }            /* выход есть в подвале — в узкой шапке экономим место */
	/* у гостя в узкой шапке остаётся только «Войти», заявка — в меню и на главной */
	.cabhdr__cta { display: none; }
	.cabhdr__login { height: 34px; padding: 0 14px; font-size: 13px; }
	.cabftr__grid { grid-template-columns: 1fr; }
	.cabftr__legal { font-size: 13px; }
}

/* ── Текстовые страницы кабинета (/about/*): единая типографика статьи ── */
.cabpage-article{max-width:820px;margin:0 auto;padding:14px 24px 48px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;color:#4a443d;}
.cabpage-article h1{font-size:26px;font-weight:800;color:#171310;margin:4px 0 20px;line-height:1.25;letter-spacing:-.01em;}
.cabpage-article .cabpage-article__eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e1251b;margin-bottom:8px;}
.cabpage-article p{font-size:15px;line-height:1.65;margin:0 0 14px;}
.cabpage-article ul{margin:0 0 16px;padding:0;list-style:none;}
.cabpage-article li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:1.55;border-bottom:1px solid #f4efe7;list-style:none;}
.cabpage-article li:last-child{border-bottom:0;}
.cabpage-article li::before{content:"";position:absolute;left:4px;top:14px;width:6px;height:6px;border-radius:50%;background:#e1251b;}
.cabpage-article a{color:#e1251b;font-weight:600;text-decoration:none;}
.cabpage-article a:hover{text-decoration:underline;}
.cabpage-article table{margin:6px 0 18px;border-collapse:collapse;}
.cabpage-article td{padding:6px 16px 6px 0;vertical-align:middle;}
.cabpage-article img{max-width:100%;height:auto;}
.cabpage-article__card{background:#fff;border:1px solid #ece5da;border-radius:16px;padding:24px 26px;box-shadow:0 1px 2px rgba(23,19,16,.04);}
@media(max-width:700px){.cabpage-article{padding:12px 14px 36px;}.cabpage-article h1{font-size:22px;}.cabpage-article__card{padding:18px 16px;}}