/**
 * Блок товара «Ответы на часто задаваемые вопросы» (block-good-faq.php).
 * Своя вёрстка (15.11.2026). Размеры сняты с прежней вёрстки:
 *  - фон #ecf0f5; заголовок по центру 40/48 (от 1200), 30/36 (640–1199,
 *    на 640–959 в две строки), на телефоне 26/31 и растягивается по ширине;
 *  - список: 960 (от 1200), 780 (960–1199), 600 (640–959), на телефоне во всю
 *    ширину с полями 20; карточки белые, радиус 20 (на ≤480 — 18), зазор 10;
 *  - вопрос 18/24.3 600 (на ≤480 — 14/18.9), синий кружок 40 с плюсом справа;
 *  - ответ 16/24.8 (от 1200), 14/21.7 (640–1199), 12/17.4 (уже 640);
 *  - открытие 0,3 с (высота + прозрачность), плюс поворачивается на −45°.
 */

.wsn-gfaq {
	background: #ecf0f5;
	font-family: var(--t-text-font, 'Montserrat'), Arial, sans-serif;
	color: #222937;
	padding-bottom: 120px;
}

.wsn-gfaq * { box-sizing: border-box; }

/* общий CSS Tilda ставит h2 «text-wrap: pretty» — переносы были бы другие */
.wsn-gfaq h2 { text-wrap: wrap; }

.wsn-gfaq__head { padding: 120px 20px 50px; text-align: center; }

.wsn-gfaq__title {
	margin: 0 auto;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	letter-spacing: -.5px;
	color: #222937;
}

.wsn-gfaq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 960px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
}

.wsn-gfaq__item {
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
}

.wsn-gfaq__q {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 20px 30px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: #222937;
}

.wsn-gfaq__qtext {
	display: block;
	padding-right: 30px;
	font-size: 18px;
	font-weight: 600;
	line-height: 24.3px;
	color: #222937;
}

/* кружок стоит в поле кнопки: 18px от правого края карточки, по центру высоты */
.wsn-gfaq__icon {
	position: absolute;
	top: 50%;
	right: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 50%;
	background: #3d93ff;
	transition: background-color .3s ease-in-out;
}

.wsn-gfaq__q:hover .wsn-gfaq__icon { background: #3a8aee; }

.wsn-gfaq__icon svg {
	display: block;
	width: 24px;
	height: 24px;
	transition: transform .3s ease-in-out;
}

/* открыт — плюс поворачивается в крестик */
.wsn-gfaq__item.is-open .wsn-gfaq__icon svg { transform: rotate(-45deg); }

.wsn-gfaq__a {
	max-height: 0;
	padding: 0 30px;
	overflow: hidden;
	opacity: 0;
	transition: max-height .3s ease-in-out, opacity .3s ease-in-out;
}

.wsn-gfaq__item.is-open .wsn-gfaq__a { opacity: 1; }

.wsn-gfaq__atext {
	padding-bottom: 20px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24.8px;
	letter-spacing: -.1px;
	color: #222937;
}

/* ---------- 960–1199 ---------- */

@media (max-width: 1199px) {
	.wsn-gfaq__title { font-size: 30px; line-height: 36px; }
	.wsn-gfaq__list { width: 780px; }
	.wsn-gfaq__atext { font-size: 14px; line-height: 21.7px; }
}

/* ---------- 640–959 ---------- */

@media (max-width: 959px) {
	.wsn-gfaq__title { max-width: 382px; }
	.wsn-gfaq__list { width: 600px; }
}

/* ---------- уже 640 ---------- */

@media (max-width: 639px) {
	/* заголовок — макет 360px, растянутый по ширине (--u = 1/360 ширины шапки);
	   отступы — у самого заголовка, шапка свою ширину в cqw не видит */
	.wsn-gfaq__head {
		container-type: inline-size;
		--u: calc(100cqw / 360);
		padding: 0;
	}
	.wsn-gfaq__title {
		max-width: calc(324 * var(--u));
		margin: calc(100 * var(--u)) auto calc(40 * var(--u));
		font-size: calc(26 * var(--u));
		line-height: calc(31 * var(--u));
	}

	.wsn-gfaq__list { width: auto; }
	.wsn-gfaq__q { padding: 20px; }
	.wsn-gfaq__icon { right: 8px; }
	.wsn-gfaq__a { padding: 0 20px; }
	.wsn-gfaq__atext { font-size: 12px; line-height: 17.4px; }
}

@media (max-width: 480px) {
	.wsn-gfaq { padding-bottom: 90px; }
	.wsn-gfaq__item { border-radius: 18px; }
	.wsn-gfaq__qtext { font-size: 14px; line-height: 18.9px; }
}