/* Інформаційні сторінки (поки «Доставка та оплата», id 16): розмітка .yx-info у контенті сторінки.
   Підключення — functions.php (yonex_is_info_page()). Тема сірить і вирівнює по ширині p сторінок, підкреслює h2/h3 — тут скинуто. */

.yx-info {
	max-width: 980px;
	margin: 8px auto 64px;
	color: #1F2427;
	font-size: 16px;
	line-height: 1.55;
}

body.page-template-default .yx-info p,
.yx-info p,
.yx-info li {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
	color: #3D4449;
}

.yx-info h2 {
	margin: 48px 0 18px;
	padding: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	color: #1F2427;
	scroll-margin-top: 130px;
}

.yx-info h3 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	color: #1F2427;
}

.yx-info a {
	color: #1F2427;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yx-info a:hover {
	color: #009A3E;
}

/* Три картки зверху */
.yx-info-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.yx-info .yx-info-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	color: #1F2427;
	text-decoration: none;
	background: #F6F6F6;
	transition: background .2s;
}

.yx-info .yx-info-card:hover {
	color: #1F2427;
	background: #EDEDED;
}

.yx-info-card strong {
	font-size: 17px;
	line-height: 1.3;
}

.yx-info-card span:not(.yx-info-ico) {
	font-size: 14px;
	line-height: 1.45;
	color: #6C757D;
}

.yx-info-ico {
	width: 28px;
	height: 28px;
	margin-bottom: 8px;
	background: #009A3E;
	-webkit-mask: var(--yx-ico) center / contain no-repeat;
	mask: var(--yx-ico) center / contain no-repeat;
}

.yx-ico-truck { --yx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='6' cy='17.5' r='1.8' fill='white'/%3E%3Ccircle cx='17' cy='17.5' r='1.8' fill='white'/%3E%3C/svg%3E"); }
.yx-ico-store { --yx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 10l8-6 8 6v10H4z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
.yx-ico-card { --yx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='1.5'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }

/* Список доставки */
.yx-info-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yx-info .yx-info-list li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 28px;
	border-bottom: 1px solid #ECECEC;
}

.yx-info-list li::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 4px;
	width: 10px;
	height: 10px;
	background: #009A3E;
}

.yx-info-list strong {
	color: #1F2427;
}

/* Шоу-руми */
.yx-info-shops {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 20px;
}

.yx-info-shop {
	display: flex;
	flex-direction: column;
	border: 1px solid #E5E5E5;
}

.yx-info .yx-info-shop img {
	display: block;
	width: 100%;
	height: 320px !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
	background: #F6F6F6;
}

.yx-info-shop-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 22px;
}

.yx-info .yx-info-shop-body p {
	margin: 0 0 10px;
}

.yx-info .yx-info-addr {
	font-weight: 700;
	color: #1F2427;
}

.yx-info .yx-info-shop-body p:last-child {
	margin: auto 0 0;
	padding-top: 8px;
}

.yx-info a.yx-info-btn {
	display: inline-block;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: #1F2427;
	transition: background .2s;
}

.yx-info a.yx-info-btn:hover {
	color: #fff;
	background: #000;
}

/* Оплата */
.yx-info-pay {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.yx-info-pay-item {
	padding: 20px 22px;
	border: 1px solid #E5E5E5;
}

.yx-info .yx-info-pay-item p {
	margin: 0;
}

.yx-info-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	font-size: 14px;
	line-height: 1.4;
	vertical-align: 2px;
	color: #fff;
	background: #009A3E;
}

.yx-info-help {
	margin-top: 40px;
	padding: 20px 22px;
	background: #F6F6F6;
}

.yx-info .yx-info-help p {
	margin: 0;
}

@media (max-width: 767px) {
	.yx-info {
		margin-bottom: 40px;
	}

	.yx-info h2 {
		margin-top: 36px;
		font-size: 23px;
	}

	.yx-info h3 {
		font-size: 18px;
	}

	.yx-info-cards,
	.yx-info-shops,
	.yx-info-pay {
		grid-template-columns: 1fr;
	}

	.yx-info-cards {
		gap: 10px;
	}

	.yx-info .yx-info-card {
		display: grid;
		grid-template-columns: 28px 1fr;
		column-gap: 14px;
		padding: 14px 16px;
	}

	.yx-info-card .yx-info-ico {
		grid-row: span 2;
		margin: 0;
		align-self: center;
	}

	.yx-info .yx-info-shop img {
		height: 240px !important;
	}

	.yx-info p,
	.yx-info li,
	body.page-template-default .yx-info p {
		font-size: 15px;
	}
}