/* Промо-страницы каталога «100 деталей» — /100parts/1 … /100parts/7.

   Вёрстка своя (wsn-100p-*), от Tilda ничего не осталось: на витрине это был
   zero-блок с абсолютными координатами под четыре ширины экрана, у нас обычный
   вертикальный стек по центру. Вид повторяет старую страницу — фон #ecf0f5,
   Montserrat, заголовок 50px, кнопки-таблетки 300×55.

   Шапки и футера сайта на этих страницах нет (условия в header.php и footer.php),
   поэтому раздел занимает весь экран целиком. */

.wsn-100p {
	min-height: 100vh;
	box-sizing: border-box;
	padding: 20px 20px 40px;
	background: #ecf0f5;
	font-family: 'Montserrat', Arial, sans-serif;
	color: #000;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.wsn-100p__logo {
	width: 124px;
	height: 46px;
	margin-bottom: 40px;
}

.wsn-100p__title {
	max-width: 923px;
	margin: 0 0 22px;
	font-size: var(--wsn-100p-size, 50px);
	line-height: 1.15;
	font-weight: 400;
}

/* Выделение в заголовке и подписи: на витрине это начертания 500 и 600. */
.wsn-100p__title b { font-weight: 500; }
.wsn-100p__sub b   { font-weight: 600; }

.wsn-100p__sub {
	max-width: 667px;
	margin: 0 0 30px;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 *  Картинки: три варианта
 * ------------------------------------------------------------------ */

.wsn-100p__media { margin-bottom: 34px; }

/* «До / после»: два снимка с лёгким наклоном в разные стороны и стрелка
   между ними — как на витрине (повороты 356° и 4°, стрелка 13°). */
.wsn-100p__ba {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.wsn-100p__shot { position: relative; }

.wsn-100p__shot img {
	display: block;
	width: 393px;
	height: 201px;
	object-fit: cover;
	border-radius: 20px;
}

.wsn-100p__shot_before img { transform: rotate(-4deg); }
.wsn-100p__shot_after img  { transform: rotate(4deg); }

/* Плашки «ДО» и «ПОСЛЕ» лежат поверх снимка в левом верхнем углу. */
.wsn-100p__tag {
	position: absolute;
	top: 16px;
	left: 6px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 34px;
	padding: 0 18px;
	border-radius: 30px;
	font-size: 14px;
	line-height: 1.55;
	font-weight: 500;
	color: #fff;
}

.wsn-100p__tag img { display: block; width: 16px; height: 16px; }

.wsn-100p__tag_before { background: #ff3636; transform: rotate(-4deg); }
.wsn-100p__tag_after  { background: #18be47; transform: rotate(4deg); }

.wsn-100p__arrow {
	width: 151px;
	height: 103px;
	transform: rotate(13deg);
	flex: none;
}

/* Обложка каталога и снимок детали: снимок заходит на обложку справа. */
.wsn-100p__cover {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wsn-100p__book { display: block; width: 321px; height: auto; }

.wsn-100p__hand {
	display: block;
	width: 286px;
	height: 188px;
	margin-left: -68px;
	object-fit: cover;
	border-radius: 16px;
}

.wsn-100p__collage { display: block; width: 444px; height: auto; }

/* ------------------------------------------------------------------ *
 *  Кнопки мессенджеров и подписи
 * ------------------------------------------------------------------ */

.wsn-100p__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-bottom: 20px;
}

.wsn-100p__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 300px;
	height: 55px;
	border-radius: 30px;
	border: 1px solid transparent;
	font-size: 14px;
	line-height: 1.55;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: opacity .2s ease-in-out;
}

.wsn-100p__btn:hover,
.wsn-100p__btn:focus { color: #fff; opacity: .88; }

.wsn-100p__btn img { display: block; height: 16px; width: auto; }

.wsn-100p__btn_max { background: #3d93ff; border-color: #3d93ff; }
.wsn-100p__btn_vk  { background: #0076ff; border-color: #0076ff; }
.wsn-100p__btn_tg  { background: #7994b7; border-color: #7994b7; }

.wsn-100p__hint {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 400;
	color: #000;
}

.wsn-100p__note {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	color: #000;
}

/* ------------------------------------------------------------------ *
 *  Узкие экраны
 * ------------------------------------------------------------------ */

@media (max-width: 1199px) {
	/* Витрина уменьшала заголовок с 50 до 40 и с 30 до 24 — та же пропорция. */
	.wsn-100p__title { font-size: calc(var(--wsn-100p-size, 50px) * .8); }
	.wsn-100p__sub   { font-size: 16px; }

	.wsn-100p__shot img { width: 320px; height: 164px; }
	.wsn-100p__arrow    { width: 120px; height: 82px; }
}

@media (max-width: 959px) {
	.wsn-100p__shot img { width: 260px; height: 133px; }
	.wsn-100p__arrow    { width: 90px; height: 61px; }
	.wsn-100p__book     { width: 260px; }
	.wsn-100p__hand     { width: 230px; height: 151px; margin-left: -54px; }
	.wsn-100p__collage  { width: 360px; }
}

@media (max-width: 767px) {
	.wsn-100p { padding: 20px 16px 32px; }

	.wsn-100p__logo  { margin-bottom: 28px; }
	.wsn-100p__title { font-size: calc(var(--wsn-100p-size, 50px) * .56); }
	.wsn-100p__sub   { font-size: 14px; }
	.wsn-100p__hint,
	.wsn-100p__note  { font-size: 13px; }

	/* Снимки становятся друг под другом, стрелка между ними разворачивается. */
	.wsn-100p__ba { flex-direction: column; gap: 12px; }

	.wsn-100p__shot img { width: 100%; max-width: 340px; height: auto; }

	.wsn-100p__arrow {
		width: 70px;
		height: 48px;
		transform: rotate(83deg);
	}

	.wsn-100p__tag        { height: 28px; padding: 0 14px; font-size: 11px; }
	.wsn-100p__tag img    { width: 13px; height: 13px; }

	.wsn-100p__cover { flex-direction: column; }
	.wsn-100p__book  { width: 100%; max-width: 280px; }
	.wsn-100p__hand  { width: 100%; max-width: 250px; height: auto; margin: -30px 0 0; }

	.wsn-100p__collage { width: 100%; max-width: 340px; }

	.wsn-100p__btns { gap: 12px; }
	.wsn-100p__btn  { width: 100%; max-width: 300px; }
}