/* ======================================================================
   booksmarket — направление «Б», второй этап: тёмная шапка, заголовки
   с засечками, страница книги как посадочная.

   Лист подключается только при ?skin=b (см. f.php), после a.css, и
   надстраивает его: разметка шапки, каталога, главной и всех остальных
   страниц та же, что в А, меняются только цвета шапки и гарнитура
   заголовков. Своя разметка только у страницы книги — классы с
   приставкой b-, которых больше нигде нет.

   Цвета те же шесть, что и в А (#1F1C18 текст, #6B6355 приглушённый,
   #557D03 действие, #B35400 внимание, #FBFAF8 бумага, #E6E1D6 линия),
   плюс два для этого этапа:
     #8FBF2A знак на тёмном  — основной зелёный на #1F1C18 даёт 3,76:1,
                               светлый — 7,80:1
     #F1E9D6 песок           — плашка «книгу продаёт сам автор»
   ====================================================================== */

/* --- заголовочная гарнитура ------------------------------------------
   Alegreya (OFL), один вес — 700, им набраны все заголовки на макетах.
   Нарезана из переменного исходника Google Fonts на те же два
   подмножества, что и Open Sans: основное и расширенное для таджикских
   и казахских букв, которые встречаются в названиях книг. */
@font-face{
	font-family:'AlegreyaB';
	src:url('/fonts/alegreya-b-700.woff2') format('woff2');
	font-weight:700; font-style:normal; font-display:swap;
	unicode-range:U+0000-00FF, U+0100-017F, U+0192, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
	              U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
	              U+0400-045F, U+0490-0491, U+2000-206F, U+20AC,
	              U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
	font-family:'AlegreyaB';
	src:url('/fonts/alegreya-b-700-ext.woff2') format('woff2');
	font-weight:700; font-style:normal; font-display:swap;
	unicode-range:U+0460-048F, U+0492-052F;
}

/* --- земля -----------------------------------------------------------
   В А страница лежала белой карточкой на бумаге. Здесь шапка тёмная и
   во всю ширину, поэтому карточка снимается: содержимое идёт прямо по
   бумаге, а белыми остаются только блоки, которым это нужно. */
body.skin-b .container{width:auto; max-width:none; padding:0}
/* у .row в Bootstrap поля по -15px в расчёте на отступы контейнера;
   контейнер здесь без отступов, и без этой строки страница на телефоне
   выходила на 15 точек шире экрана */
body.skin-b .container .row.main{background:transparent; border:0; border-radius:0; margin-left:0; margin-right:0}
body.skin-b .row.content{padding-top:28px}
body.skin-b .a-foot{margin-top:40px}

/* --- тёмная шапка ----------------------------------------------------
   Разметка та же, что в А. Знак — в светло-зелёном: fill в svg задан
   атрибутом, а свойство CSS его перебивает. */
body.skin-b .a-head{background:#1F1C18; border-bottom:0; border-radius:0}
/* кнопка кабинета на тёмной шапке — как корзина рядом */
body.skin-b .a-user>a{border-color:rgba(255,255,255,.22); color:#FBFAF8}
body.skin-b .a-user>a:hover{border-color:#8FBF2A; color:#8FBF2A}
body.skin-b .a-logo span{color:#FBFAF8}
body.skin-b .a-logo:hover span{color:#8FBF2A}
body.skin-b .a-logo svg rect{fill:#8FBF2A}
body.skin-b .a-logo svg path{stroke:#1F1C18; stroke-opacity:.5}
body.skin-b .a-search input{
	background:#2B2721; border-color:#2B2721; color:#FBFAF8;
}
body.skin-b .a-search input::-webkit-input-placeholder{color:#9A9384}
body.skin-b .a-search input::placeholder{color:#9A9384}
body.skin-b .a-search input:focus{outline-color:#8FBF2A; border-color:#8FBF2A}
body.skin-b .a-search button:focus{outline-color:#FBFAF8}
body.skin-b .a-cart>a{border-color:rgba(255,255,255,.22); color:#FBFAF8}
body.skin-b .a-cart>a:hover{border-color:#8FBF2A; color:#8FBF2A}
body.skin-b .a-cart .basket_count{background:#8FBF2A; color:#1F1C18}

/* --- заголовки с засечками -------------------------------------------
   Всё, что в А было полужирным Open Sans крупнее текста. Кегли чуть
   больше прежних: у Alegreya мелкий рисунок строчных, и на одном кегле
   с Open Sans она выглядит меньше. */
body.skin-b h1.page_head,
body.skin-b .a-book-title,
body.skin-b .a-hero-title,
body.skin-b .a-list-title,
body.skin-b .a-sect-title,
body.skin-b .a-step-title,
body.skin-b .a-card-name,
body.skin-b .a-newsitem-title,
body.skin-b .b-title,
body.skin-b .b-h2{
	font-family:'AlegreyaB',Georgia,'Times New Roman',serif;
	font-weight:700; letter-spacing:0;
}
body.skin-b h1.page_head{font-size:32px; line-height:1.15}
body.skin-b .a-book-title{font-size:32px}
body.skin-b .a-hero-title{font-size:44px}
body.skin-b .a-list-title{font-size:30px}
body.skin-b h2.a-list-title{font-size:24px}
body.skin-b .a-sect-title{font-size:23px}
body.skin-b .a-step-title{font-size:21px}
body.skin-b .a-card-name{font-size:16.5px; line-height:1.25}
body.skin-b .a-newsitem-title{font-size:20px}
/* ссылка внутри заголовка: сброс в s.css задаёт тегу a свою гарнитуру
   и кегль, поэтому наследование приходится включать явно */
body.skin-b .a-card-name a,
body.skin-b .a-list-title a,
body.skin-b .a-newsitem-title a,
body.skin-b h1.page_head a{font-family:inherit; font-weight:inherit; font-size:inherit}
body.skin-b .a-card-name a{min-height:24px}

/* ======================================================================
   Страница книги — посадочная. Первый экран: обложка слева, справа
   название, автор, строка о продавце и карточка с ценой и кнопкой.
   Ниже — аннотация с карточкой автора, вопросы, отзывы, «ещё в разделе».
   ====================================================================== */
body.skin-b .b-page{max-width:1140px}
body.skin-b .b-page .a-crumbs{margin-bottom:22px}

/* --- первый экран ---------------------------------------------------- */
body.skin-b .b-hero{display:flex; gap:48px; align-items:flex-start}
body.skin-b .b-cover{
	flex:0 0 250px; width:250px;
	display:flex; flex-direction:column; gap:14px;
}
body.skin-b .b-cover picture{
	display:block; border-radius:4px; overflow:hidden; background:#EFEAE0; line-height:0;
	box-shadow:0 14px 34px rgba(31,28,24,.14), 0 0 0 1px rgba(31,28,24,.06);
}
body.skin-b .b-cover img{width:100%; height:auto; display:block}
body.skin-b .b-cover-meta{
	display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0;
	font-size:13px; color:#6B6355; line-height:1.5;
}
body.skin-b .b-cover-meta span + span::before{content:"\00B7"; padding:0 8px; color:#B7B0A1}
body.skin-b .b-cover .a-tags{justify-content:center}
body.skin-b .b-cover .a-book-own{text-align:center}

body.skin-b .b-lead{
	flex:1 1 auto; min-width:0; max-width:640px;
	display:flex; flex-direction:column; gap:20px;
}
body.skin-b .b-title{
	font-size:40px; line-height:1.12; margin:0 0 10px; color:#1F1C18;
	text-wrap:balance; overflow-wrap:anywhere;
}
body.skin-b .b-byline{font-size:17px; line-height:1.5; color:#6B6355; display:flex; flex-wrap:wrap; gap:0 8px; align-items:center}
body.skin-b .b-byline a{
	color:#557D03; text-decoration:none;
	display:inline-block; min-height:24px; line-height:24px;
}
body.skin-b .b-byline a:hover{text-decoration:underline}
body.skin-b .b-byline-author{color:#1F1C18}

body.skin-b .b-rate{font-size:14px; color:#6B6355; margin-top:-8px}
body.skin-b .b-rate a{display:inline-block; min-height:24px; line-height:24px; text-decoration:none}
body.skin-b .b-rate a:hover{text-decoration:underline}
body.skin-b .b-rate .a-rate-do-row{margin-top:0}

/* строка о продавце: больше половины людей попадают на эту страницу из
   поиска и о магазине не знают */
body.skin-b .b-direct{
	display:flex; gap:12px; align-items:flex-start;
	background:#F1E9D6; border-radius:4px; padding:14px 16px;
	font-size:14.5px; line-height:1.5; color:#4A4438;
}
body.skin-b .b-direct svg{flex:0 0 auto; margin-top:2px; color:#557D03}

/* --- карточка покупки ------------------------------------------------ */
body.skin-b .b-buy{
	border:1px solid #E6E1D6; border-radius:6px; background:#FFFFFF;
	padding:22px 24px; display:flex; flex-direction:column; gap:16px;
}
body.skin-b .b-buy-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
body.skin-b .b-buy-price{display:flex; flex-direction:column; gap:4px}
body.skin-b .b-buy-sum{
	font-size:38px; font-weight:600; letter-spacing:-.025em; line-height:1;
	color:#1F1C18; white-space:nowrap;
}
body.skin-b .b-buy-sum.is-free{color:#557D03; font-size:32px}
/* знак рубля берётся из Arial (в Open Sans его нет); тот же сброс s.css
   даёт вложенному span кегль 14px — возвращаем пропорцию к сумме */
body.skin-b .b-buy-sum .a-rub, body.skin-b .b-stick-sum .a-rub{font-size:.72em}
body.skin-b .b-buy-once{font-size:13.5px; color:#6B6355}
body.skin-b .b-buy-fmt{
	display:flex; flex-direction:column; gap:4px; text-align:right;
	font-size:13.5px; color:#6B6355; line-height:1.4;
}
body.skin-b .b-buy-fmt a{color:#6B6355; text-decoration:underline}
body.skin-b .b-buy-fmt a:hover{color:#557D03}
body.skin-b .b-buy-actions .a-btn-primary{flex:1 1 auto; font-size:16.5px; padding:13px 30px; min-height:50px}
body.skin-b .b-buy-actions .a-btn-ghost{font-size:16px; padding:13px 22px; min-height:50px}
body.skin-b .b-trust{
	list-style:none; margin:0; padding:0;
	display:flex; flex-wrap:wrap; gap:6px 22px;
	font-size:13.5px; color:#6B6355; line-height:1.5;
}
body.skin-b .b-trust li{padding:0; margin:0; text-indent:0}
body.skin-b .b-buy .a-buy-note{font-size:13.5px}
body.skin-b .b-buy.a-buy-owned{gap:12px}

body.skin-b .b-frag .a-btn{gap:9px; font-weight:400; font-size:14.5px; min-height:44px}
body.skin-b .b-frag .a-btn svg{color:#557D03}

/* --- о книге и об авторе --------------------------------------------- */
body.skin-b .b-about{display:flex; gap:48px; align-items:flex-start; margin-top:56px}
body.skin-b .b-anons{flex:1 1 auto; min-width:0; max-width:680px}
body.skin-b .b-h2{font-size:26px; line-height:1.2; margin:0 0 14px; color:#1F1C18}
body.skin-b .b-h2 .a-count{font-family:'OpenSansA',"Helvetica Neue",Arial,sans-serif; font-size:14px; color:#9A9384; font-weight:400; margin-left:8px}
body.skin-b .b-anons p{font-size:16.5px; line-height:1.68; color:#2E2A20; padding:0 0 14px; text-indent:0}
body.skin-b .b-anons p:last-child{padding-bottom:0}

body.skin-b .b-author{
	flex:0 0 300px; width:300px;
	border:1px solid #E6E1D6; border-radius:6px; background:#FFFFFF;
	padding:20px; display:flex; flex-direction:column; gap:12px;
}
body.skin-b .b-author-cap{
	font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
	color:#6B6355; font-weight:600;
}
body.skin-b .b-author-row{display:flex; gap:13px; align-items:center}
body.skin-b .b-author-photo{
	width:52px; height:52px; border-radius:26px; flex:0 0 52px;
	object-fit:cover; background:#F1E9D6; display:block;
}
body.skin-b .b-author-initial{
	display:flex; align-items:center; justify-content:center;
	font-family:'AlegreyaB',Georgia,serif; font-weight:700; font-size:24px; color:#7A7057;
}
body.skin-b .b-author-name{display:flex; flex-direction:column; gap:2px; min-width:0}
body.skin-b .b-author-name a, body.skin-b .b-author-name b{
	font-size:16px; font-weight:600; color:#1F1C18; text-decoration:none;
	display:inline-block; min-height:24px; line-height:24px;
}
body.skin-b .b-author-name a:hover{color:#557D03; text-decoration:underline}
body.skin-b .b-author-name span{font-size:13px; color:#6B6355}
body.skin-b .b-author-text{font-size:14px; line-height:1.55; color:#4A4438}
body.skin-b .b-author-all{
	font-size:14px; color:#557D03; text-decoration:none;
	display:inline-block; min-height:24px; line-height:24px; align-self:flex-start;
}
body.skin-b .b-author-all:hover{text-decoration:underline}

/* --- разделы ниже ----------------------------------------------------- */
body.skin-b .b-sect{margin-top:52px; max-width:680px}
body.skin-b .b-more{max-width:none}
body.skin-b .b-sect.a-faq h3{font-size:16px}
body.skin-b .b-sect.a-faq p{font-size:15px}
body.skin-b .b-review-empty{
	border:1px dashed #D8CDB4; border-radius:6px; background:#FBFAF8;
	padding:22px; display:flex; flex-direction:column; gap:13px;
	font-size:15.5px; line-height:1.55; color:#4A4438;
}
body.skin-b .b-review-empty .a-review-form{margin-top:0}
body.skin-b .b-more-sub{font-size:14.5px; color:#6B6355; margin:-6px 0 20px}
body.skin-b .b-more-sub a{color:#557D03; text-decoration:none; display:inline-block; min-height:24px; line-height:24px}
body.skin-b .b-more-sub a:hover{text-decoration:underline}
body.skin-b .b-grid{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:30px 24px}

/* --- нижняя полоса на телефоне --------------------------------------- */
body.skin-b .b-stick{display:none}

/* ======================================================================
   Каталог: фильтр лентой над списком. Метка — ссылка-пилюля; отмеченная
   залита зелёным и закрывается крестиком. Хвосты длинных рядов лежат
   под «Ещё N» — это <details>, работает без скрипта.
   ====================================================================== */
body.skin-b .b-cat-head{margin-bottom:18px}
body.skin-b .b-cat-intro{
	font-size:15.5px; line-height:1.55; color:#6B6355; max-width:62ch;
	margin:8px 0 0; padding:0; text-indent:0;
}
body.skin-b .b-chips{display:flex; flex-direction:column; gap:10px}
body.skin-b .b-chips-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
body.skin-b .b-chips-cap{font-size:13px; color:#6B6355; margin-right:4px}
body.skin-b .b-chip{
	display:inline-flex; align-items:center; gap:6px;
	border:1px solid #DCD6C8; border-radius:16px; background:#FFFFFF;
	padding:6px 14px; font-size:14px; line-height:18px; min-height:32px;
	color:#1F1C18; text-decoration:none; white-space:nowrap;
}
body.skin-b .b-chip i{font-style:normal; color:#9A9384; font-size:12.5px}
body.skin-b .b-chip:hover{border-color:#557D03; color:#557D03; text-decoration:none}
body.skin-b .b-chip.is-on{background:#557D03; border-color:#557D03; color:#FFFFFF; font-weight:600}
body.skin-b .b-chip.is-on:hover{background:#3F5C02; border-color:#3F5C02; color:#FFFFFF}
body.skin-b .b-chip.is-on span{font-weight:400; font-size:17px; line-height:1}
body.skin-b .b-chips-sep{width:1px; height:22px; background:#DCD6C8; margin:0 6px}
body.skin-b .b-chips-more{flex:1 1 100%; display:block}
body.skin-b .b-chips-more summary{
	display:inline-flex; align-items:center; list-style:none; cursor:pointer;
	border:1px dashed #C6BFAF; border-radius:16px; background:#FFFFFF;
	padding:6px 14px; font-size:14px; line-height:18px; min-height:32px;
	color:#6B6355; margin:0 8px 0 0; vertical-align:top;
}
body.skin-b .b-chips-more summary::-webkit-details-marker{display:none}
body.skin-b .b-chips-more summary:hover{border-color:#557D03; color:#557D03}
body.skin-b .b-chips-more[open] summary{border-style:solid; color:#1F1C18; margin-bottom:8px}
body.skin-b .b-chips-tail{display:inline}
body.skin-b .b-chips-tail .b-chip{margin:0 8px 8px 0; vertical-align:top}
body.skin-b .b-chips-reset{
	font-size:13px; color:#6B6355; text-decoration:underline;
	display:inline-block; min-height:24px; line-height:24px; margin-left:6px;
}
body.skin-b .b-chips-reset:hover{color:#557D03}
body.skin-b .b-cat-bar{
	display:flex; justify-content:space-between; align-items:baseline;
	gap:12px 18px; flex-wrap:wrap; border-bottom:1px solid #E6E1D6;
	padding-bottom:12px; margin:22px 0 22px;
}
body.skin-b .b-cat-bar .a-list-count{margin:0}
body.skin-b .b-cat .b-grid{gap:30px 22px}
body.skin-b .b-cat .a-list-intro{margin-bottom:20px}
body.skin-b .b-cat .author-photo{border-radius:4px; box-shadow:0 8px 22px rgba(31,28,24,.14)}
/* алфавит на странице авторов — те же пилюли, что и метки */
body.skin-b .b-cat .azbuka{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px}
body.skin-b .b-cat .azbuka div{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:34px; min-height:34px; font-size:14px; color:#C6BFAF;
}
body.skin-b .b-cat .azbuka a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:34px; min-height:34px; padding:0 8px;
	border:1px solid #DCD6C8; border-radius:17px; background:#FFFFFF;
	color:#1F1C18; text-decoration:none; font-size:14px;
}
body.skin-b .b-cat .azbuka a:hover{border-color:#557D03; color:#557D03}
body.skin-b .b-cat .azbuka a[style]{background:#557D03; border-color:#557D03; color:#FFFFFF}

/* --- поиск в шапке на телефоне: кнопка-лупа --------------------------- */
body.skin-b .a-search-toggle{display:none}

/* --- узкие экраны ----------------------------------------------------- */
/* подборок по пять книг под пять колонок; там, где колонок четыре или
   две, пятая карточка осталась бы одна в ряду — её прячем */
@media (max-width:1100px){
	body.skin-b .b-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
	body.skin-b .b-grid-5 .a-card:nth-child(5){display:none}
}
@media (max-width:960px){
	body.skin-b .b-grid-5 .a-card:nth-child(5){display:flex}
	body.skin-b .b-hero{gap:32px}
	body.skin-b .b-title{font-size:34px}
	body.skin-b .b-about{flex-direction:column; gap:28px}
	body.skin-b .b-author{width:100%; flex-basis:auto; max-width:680px}
	body.skin-b .b-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width:767px){
	/* кегли заголовков для телефона: b.css идёт после a.css и без этого
	   блока перебивал бы его мобильные правила настольными кеглями */
	body.skin-b h1.page_head{font-size:26px}
	body.skin-b .a-book-title{font-size:26px}
	body.skin-b .a-hero-title{font-size:28px}
	body.skin-b .a-list-title{font-size:24px}
	body.skin-b h2.a-list-title{font-size:20px}
	body.skin-b .a-sect-title{font-size:20px}
	body.skin-b .a-newsitem-title{font-size:18px}
	body.skin-b .row.content{padding-top:18px}
	body.skin-b .a-head .a-wrap{padding-top:10px; padding-bottom:10px; gap:6px 10px}
	body.skin-b .a-search-toggle{
		display:inline-flex; align-items:center; justify-content:center; order:1;
		width:44px; height:44px; border:0; border-radius:3px; background:transparent;
		color:#FBFAF8; cursor:pointer; padding:0;
	}
	body.skin-b .a-search-toggle[aria-expanded="true"]{background:#2B2721}
	body.skin-b .a-search-toggle:focus{outline:2px solid #8FBF2A; outline-offset:-2px}
	body.skin-b .a-search.is-collapsed{display:none}
	body.skin-b .a-cart>a{padding:7px 10px; min-height:44px}
	body.skin-b .b-cat-head{margin-bottom:14px}
	body.skin-b .b-cat-intro{font-size:14.5px}
	body.skin-b .b-chips-row{gap:6px}
	body.skin-b .b-chips-cap{flex:1 1 100%; margin:0}
	body.skin-b .b-cat-bar{margin:16px 0 18px}
	body.skin-b .b-cat .b-grid{gap:20px 16px}
	body.skin-b .b-page.has-stick{padding-bottom:84px}
	body.skin-b .b-hero{flex-direction:column; gap:20px}
	body.skin-b .b-cover{width:196px; flex-basis:auto; margin:0 auto}
	body.skin-b .b-cover picture{box-shadow:0 10px 26px rgba(31,28,24,.14), 0 0 0 1px rgba(31,28,24,.06)}
	body.skin-b .b-lead{max-width:none; gap:18px}
	body.skin-b .b-title{font-size:28px; line-height:1.14; margin-bottom:8px}
	body.skin-b .b-byline{font-size:15.5px}
	body.skin-b .b-buy{padding:18px}
	body.skin-b .b-buy-head{flex-direction:column; align-items:flex-start; gap:10px}
	body.skin-b .b-buy-fmt{text-align:left}
	body.skin-b .b-buy-sum{font-size:32px}
	body.skin-b .b-buy-actions{flex-direction:column}
	body.skin-b .b-frag .a-btn{width:100%; min-height:48px}
	body.skin-b .b-about{margin-top:32px}
	body.skin-b .b-h2{font-size:22px}
	body.skin-b .b-anons p{font-size:15.5px; line-height:1.64}
	body.skin-b .b-author{padding:18px}
	body.skin-b .b-sect{margin-top:32px}
	body.skin-b .b-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 16px}
	body.skin-b .b-grid-5 .a-card:nth-child(5){display:none}

	body.skin-b .b-stick{
		display:flex; align-items:center; gap:14px;
		position:fixed; left:0; right:0; bottom:0; z-index:1030;
		background:#FFFFFF; border-top:1px solid #E6E1D6;
		padding:10px 16px; box-shadow:0 -6px 18px rgba(31,28,24,.08);
		transition:transform .2s, visibility .2s;
	}
	body.skin-b .b-stick.is-off{transform:translateY(110%); visibility:hidden}
	body.skin-b .b-stick-price{display:flex; flex-direction:column; gap:1px; flex:0 0 auto}
	body.skin-b .b-stick-sum{font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.1; color:#1F1C18; white-space:nowrap}
	body.skin-b .b-stick-sum.is-free{color:#557D03}
	body.skin-b .b-stick-once{font-size:12px; color:#6B6355}
	body.skin-b .b-stick .a-btn{flex:1 1 auto; width:auto; min-height:50px; font-size:16px}
}
@media (prefers-reduced-motion:reduce){
	body.skin-b .b-stick{transition:none}
}