/* ========================================================== */
/* _tpl\products.css  - page-specific styles, extracted from templates          */
/* ========================================================== */


/* ==================== products.tpl (block 1 of 1) - extracted from templates/products.tpl ==================== */

	/* ── Переменные ── */
	.empty-state {
		--ep:   #1a2744;
		--epl:  #253460;
		--ea:   #57a3dc;
		--ead:  #288ede;
		--es:   #f7f9fc;
		--em:   #718096;
		--ebd:  #e8edf5;
	}

	/* ════ HERO ════ */
	.empty-state__hero { 
		display: flex;
		align-items: flex-start;
		gap: 28px;
		padding: 10px 0px 0px;
		/* background: linear-gradient(135deg, #f0f5ff 0%, #e8f0fb 100%);
		border-radius: 18px;
		border: 1.5px solid var(--ebd);
		margin-bottom: 16px; */
	} 

	/* Иконка */
	.empty-state__icon-wrap {
		position: relative;
		flex-shrink: 0;
		width: 80px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.empty-state__icon-bg {
		position: absolute;
		inset: 0;
		border-radius: 22px;
		background: rgba(87, 163, 220, .13);
		border: 1.5px solid rgba(87, 163, 220, .25);
	}

	.empty-state__icon {
		font-size: 2rem;
		color: var(--ea);
		position: relative;
		z-index: 1;
	}

	/* Пульсирующие точки */
	.empty-state__icon-dot {
		position: absolute;
		border-radius: 50%;
		background: var(--ea);
		animation: emptyDotPulse 2.4s ease-in-out infinite;
	}

	.empty-state__icon-dot--1 {
		width: 6px; height: 6px;
		top: 8px; right: 10px;
		opacity: .5;
		animation-delay: 0s;
	}

	.empty-state__icon-dot--2 {
		width: 4px; height: 4px;
		bottom: 12px; right: 6px;
		opacity: .35;
		animation-delay: .6s;
	}

	.empty-state__icon-dot--3 {
		width: 5px; height: 5px;
		top: 14px; left: 6px;
		opacity: .3;
		animation-delay: 1.2s;
	}

	@keyframes emptyDotPulse {
		0%, 100% { transform: scale(1); opacity: .4; }
		50%       { transform: scale(1.6); opacity: .15; }
	}

	/* Сообщение */
	.empty-state__msg {
		flex: 1;
		min-width: 0;
	}

	.empty-state__alert {
		display: flex;
		align-items: center;
		gap: 8px;
		background: rgba(237,137,54,.1);
		border: 1px solid rgba(237,137,54,.3);
		border-radius: 10px;
		padding: 10px 14px;
		font-size: .82rem;
		color: #7b3f00;
		margin-bottom: 15px;
		line-height: 1.55;
	}

	.empty-state__alert i {
		color: #dd6b20;
		font-size: .95rem;
		flex-shrink: 0;
		margin-top: 1px;
	}

	.empty-state__title {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.25rem;
		font-weight: 600;
		color: var(--ep);
		margin-bottom: 8px;
		line-height: 1.3;
	}

	.empty-state__radius {
		display: inline-block;
		background: rgba(87,163,220,.14);
		color: var(--ead);
		font-size: .85rem;
		border-radius: 6px;
		padding: 1px 8px;
		font-weight: 600;
		margin-left: 4px;
	}

	.empty-state__sub {
		font-size: .88rem;
		color: var(--em);
		line-height: 1.65;
		margin-bottom: 15px;
	}

	/* ════ SUGGESTIONS ════ */
	.empty-state__suggestions {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 15px;
	}

	/* .empty-sugg-block {
		background: #fff;
		border: 1.5px solid var(--ebd);
		border-radius: 14px;
		padding: 14px 18px;
	} */

	.empty-sugg-block__label {
		display: flex;
		align-items: center;
		gap: 7px;
		font-family: 'Open Sans', sans-serif;
		font-size: .7rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--em);
		margin-bottom: 15px;
	}

	.empty-sugg-block__label i {
		color: var(--ea);
		font-size: .8rem;
	}

	/* Пилюли радиуса */
	.empty-sugg-block__pills {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.empty-radius-pill {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 6px 14px;
		border-radius: 50px;
		border: 1.5px solid var(--ebd);
		font-size: .8rem;
		font-weight: 600;
		color: var(--ep);
		text-decoration: none;
		transition: all .18s;
	}

	.empty-radius-pill:hover {
		border-color: var(--ea);
		color: var(--ead);
		background: rgba(87,163,220,.06);
		text-decoration: none;
	}

	.empty-radius-pill i {
		color: var(--ea);
		font-size: .75rem;
	}

	.empty-radius-pill--active {
		background: var(--ea);
		border-color: var(--ea);
		color: #fff;
	}

	.empty-radius-pill--active i {
		color: rgba(255,255,255,.8);
	}

	.empty-radius-pill--active:hover {
		background: var(--ead);
		border-color: var(--ead);
		color: #fff;
	}

	/* Ссылки «Попробуйте также» */
	.empty-sugg-block__links {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.empty-sugg-link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 10px;
		border: 1px solid var(--ebd);
		font-size: .85rem;
		color: var(--ep);
		text-decoration: none;
		transition: all .18s;
	}

	.empty-sugg-link:hover {
		border-color: var(--ea);
		background: rgba(87,163,220,.05);
		color: var(--ead);
		text-decoration: none;
	}

	.empty-sugg-link i:first-child {
		color: var(--ea);
		font-size: 1rem;
		flex-shrink: 0;
	}

	.empty-sugg-link span {
		flex: 1;
	}

	.empty-sugg-link__arr {
		color: var(--ea);
		opacity: .5;
		font-size: .8rem;
		transition: opacity .18s, transform .18s;
	}

	.empty-sugg-link:hover .empty-sugg-link__arr {
		opacity: 1;
		transform: translateX(3px);
	}

	/* ════ CTA БЛОКИ ════ */
	.empty-state__cta-area {
		margin-bottom: 5px;
	}

	.empty-cta-card {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		background: #fff;
		border: 1.5px solid var(--ebd);
		border-radius: 16px;
		padding: 20px 20px;
		margin-bottom: 15px;
		transition: box-shadow .2s, border-color .2s;
	}

	.empty-cta-card:hover {
		box-shadow: 0 6px 20px rgba(26,39,68,.08);
		border-color: rgba(87,163,220,.4);
	}

	/* Главная карточка — выделенная */
	.empty-cta-card--primary {
		background: linear-gradient(135deg, #f0f5ff 0%, #e8f0fb 100%);
		border-color: rgba(87,163,220,.3);
	}

	/* Маленькие карточки в ряд */
	.empty-cta-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.empty-cta-card--sm {
		margin-bottom: 0;
	}

	/* Иконка карточки */
	.empty-cta-card__icon {
		width: 46px;
		height: 46px;
		border-radius: 13px;
		background: linear-gradient(135deg, var(--ep), var(--epl));
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.15rem;
		flex-shrink: 0;
	}

	.empty-cta-card__icon--blue {
		background: linear-gradient(135deg, var(--ead), var(--ea));
	}

	.empty-cta-card__icon--gold {
		background: linear-gradient(135deg, #e7d39e, #e69e4c);
		color: #1a2744;
	}

	.empty-cta-card__body {
		flex: 1;
		min-width: 0;
	}

	.empty-cta-card__title {
		font-family: 'Open Sans', sans-serif;
		font-size: .92rem;
		font-weight: 600;
		color: var(--ep);
		margin-bottom: 5px;
	}

	.empty-cta-card__text {
		font-size: .8rem;
		color: var(--em);
		line-height: 1.55;
		margin-bottom: 15px;
	}

	/* Кнопки */
	.empty-cta-card__btns {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.empty-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 700;
		font-size: .78rem;
		padding: 8px 16px;
		border-radius: 8px;
		text-decoration: none;
		transition: all .18s;
		white-space: nowrap;
	}

	.empty-btn--accent {
		background: var(--ea);
		color: #fff !important;
		border: none;
	}

	.empty-btn--accent:hover {
		background: var(--ead);
		box-shadow: 0 4px 12px rgba(87,163,220,.4);
		text-decoration: none;
	}

	.empty-btn--ghost {
		background: transparent;
		color: var(--ep) !important;
		border: 1.5px solid var(--ep);
	}

	.empty-btn--ghost:hover {
		border-color: var(--ea);
		color: var(--ead) !important;
		text-decoration: none;
	}

	.empty-btn--outline {
		background: transparent;
		color: var(--ead) !important;
		border: 1.5px solid rgba(87,163,220,.35);
		padding: 6px 12px;
	}

	.empty-btn--outline:hover {
		background: rgba(87,163,220,.07);
		border-color: var(--ea);
		text-decoration: none;
	}

	/* ════ FEATURES ════ */
	.empty-features {
		margin-top: 4px;
	}

	.empty-features__label {
		font-family: 'Open Sans', sans-serif;
		font-size: .68rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .13em;
		color: var(--em);
		margin: 15px 10px;
	}

	.empty-features__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.empty-feat-card {
		display: flex; 
		align-items: center;
		gap: 12px;
		padding: 14px 14px;
		background: #fff;
		border: 1.5px solid var(--ebd);
		border-radius: 14px;
		transition: box-shadow .18s, border-color .18s;
		flex-wrap: wrap;
	}

	.empty-feat-card:hover {
		box-shadow: 0 4px 14px rgba(26,39,68,.07);
		border-color: rgba(87,163,220,.35);
	}

	.empty-feat-card__icon {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: linear-gradient(135deg, var(--ep), var(--epl));
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .9rem;
		flex-shrink: 0;
	}

	.empty-feat-card__icon--blue {
		background: linear-gradient(135deg, var(--ead), var(--ea));
	}

	.empty-feat-card__icon--green {
		background: linear-gradient(135deg, #276749, #38a169);
	}

	.empty-feat-card__title {
		font-family: 'Open Sans', sans-serif;
		font-size: .78rem;
		font-weight: 700;
		color: var(--ep);
		margin-bottom: 4px;
	}

	.empty-feat-card__text {
		font-size: .74rem;
		color: var(--em);
		line-height: 1.5;
		margin: 0;
	}

	/* ── Адаптив ── */
	@media (max-width: 767px) {
		.empty-state__hero {
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 16px;
			padding: 20px 16px;
		}

		.empty-cta-row {
			grid-template-columns: 1fr;
		}

		.empty-features__grid {
			grid-template-columns: 1fr;
		}

		.empty-cta-card {
			flex-direction: column;
		}
	}

	@media (max-width: 575px) {
		.empty-state__title {
			font-size: 1.05rem;
		}

		.empty-cta-card__btns {
			flex-direction: column;
		}
	}