/* Product catalog card overrides.
   Kept in a separate file: stylesheet.css is periodically rewritten by an
   external SFTP sync, which silently drops rules appended there. */

/* Compact cat-sidebar: tighter spacing/type than the stylesheet.css base
   (base rules live around line 31660+ there; keep both in sync when editing). */

.cat-sidebar {
	padding: 14px;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(31, 38, 135, .05);
}

.cat-sidebar__head {
	font-size: 11px;
	margin: 0 0 8px;
	padding: 0 10px;
}

.cat-sidebar__block {
	margin-bottom: 8px;
}

.cat-sidebar__nav {
	gap: 1px;
}

.cat-sidebar__link {
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.cat-sidebar__link.is-active {
	box-shadow: inset 1px 0 0 #2563ff;
}

.cat-sidebar__ocfilter .ocf-option-name,
.cat-sidebar__ocfilter .ocfilter-option .ocf-option-name {
	margin: 0 0 6px !important;
	padding: 0 10px !important;
	font-size: 11px !important;
}

.cat-sidebar__ocfilter .ocfilter-option,
.cat-sidebar__ocfilter .list-group-item2 {
	margin: 0 0 12px;
}

.cat-sidebar__ocfilter .ocf-option-values {
	gap: 1px;
}

.cat-sidebar__ocfilter .ocf-option-values label {
	gap: 8px;
	padding: 7px 10px;
	border-radius: 10px;
	font-size: 13px;
}

.cat-sidebar__ocfilter .ocf-option-values label input {
	width: 14px;
	height: 14px;
}

.cat-sidebar__ocfilter .ocf-option-values label .badge,
.cat-sidebar__ocfilter .ocf-option-values label small.badge {
	padding: 1px 7px;
	font-size: 10px;
}

.cat-sidebar__ocfilter #ocfilter-button {
	margin-top: 8px;
}

.cat-sidebar__ocfilter #ocfilter-button .btn,
.cat-sidebar__ocfilter .ocfilter-option .btn-block {
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
}

@media (max-width: 575px) {
	.cat-sidebar {
		padding: 12px;
		border-radius: 14px;
	}
}

.pc-hero__subtitle strong {
	font-weight: 700;
}

.pc-hero__subtitle {
	max-width: 780px;
}

figure {
	margin: 0;
	background: transparent !important;
}

.pc-product-card__consultation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 60px 60px;
	gap: 10px;
	align-items: stretch;
	width: 100%;
}

.pc-product-card__consultation .pc-btn {
	width: 100%;
	min-width: 0;
	margin: 0;
}

.pc-product-card__consultation .pc-btn--pay {
	padding: 0;
}

.pc-product-card__consultation i.fa.fa-telegram {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #356dff;
	font-size: 20px;
	line-height: 1;
}

.pc-btn--max img {
	display: block;
	width: 20px;
	height: 20px;
}

.pc-product-card__mockup-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed #e2e8f0;
	font-size: 14px;
	font-weight: 700;
	color: #2563ff;
	text-decoration: none;
	transition: color .2s ease, gap .2s ease;
}

.pc-product-card__mockup-link:hover {
	color: #1547c2;
	text-decoration: none;
	gap: 11px;
}

.pc-product-card__mockup-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	display: block;
}

/* pc-variants carousel ("Другие эксклюзивные сайты"): dots + a peeked-next-card
   hint on mobile so it visibly reads as swipeable, not a single static card. */
.pc-variants__viewport {
	overflow: hidden;
}

.pc-variants__carousel .owl-wrapper-outer {
	overflow: hidden;
}

.pc-variants__carousel .item {
	padding: 0 8px;
}

.pc-variants__carousel .owl-pagination {
	margin-top: 14px;
	text-align: center;
}

.pc-variants__carousel .owl-page span {
	width: 8px;
	height: 8px;
	margin: 0 4px;
	background: #cbd5e1;
	opacity: 1;
}

.pc-variants__carousel .owl-page.active span {
	background: #2563ff;
}

@media (max-width: 479px) {
	#pc-variants-carousel.pc-variants__carousel {
		width: 88%;
	}

	/* !important needed here: footer.twig loads owl.carousel.css *after*
	   this file, and its unscoped ".owl-carousel .owl-wrapper-outer { overflow:
	   hidden }" rule has equal class-specificity, so it would otherwise win
	   on source order alone regardless of this media query. */
	.pc-variants__carousel .owl-wrapper-outer {
		overflow: visible !important;
	}
}

.pc-variants__thumb {
	position: relative;
}

.pc-variants__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	background: #64748b;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.pc-variants__name {
	font-weight: 800;
}

.pc-variants__status {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

.pc-variants__status--available {
	background: #eef5ff;
	color: #356dff;
}

.pc-variants__status--sold {
	background: #f1f5f9;
	color: #64748b;
}

.pc-cases {
	margin-top: 56px;
	padding-top: 36px;
	border-top: 1px solid #e2e8f0;
}

.pc-cases__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.pc-cases__title {
	margin: 0;
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 800;
	color: #0f172a;
	text-transform: none;
	letter-spacing: 0;
}

.pc-cases__carousel {
	position: relative;
}

.pc-cases__carousel .owl-wrapper-outer {
	overflow: hidden;
}

.pc-cases__carousel .item {
	padding: 0 11px;
}

.pc-cases__carousel .cat-card {
	height: 100%;
	margin: 0;
}

.pc-cases__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pc-cases__client {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pc-cases__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.pc-cases__client-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.pc-cases__name {
	font-size: 14px;
	font-weight: 700;
	color: #1c1c1c;
}

.pc-cases__domain {
	font-size: 12px;
	color: #8a94a6;
}

.pc-cases__date {
	flex: 0 0 auto;
	font-size: 12px;
	color: #8a94a6;
	white-space: nowrap;
}

.pc-cases__review {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
	color: #4a5468;
	font-style: italic;
}

.pc-cases__carousel .owl-controls {
	margin-top: 20px;
}

.pc-cases__carousel .owl-buttons {
	position: absolute;
	top: 38%;
	left: 0;
	right: 0;
	pointer-events: none;
}

.pc-cases__carousel .owl-prev,
.pc-cases__carousel .owl-next {
	pointer-events: auto;
	position: absolute;
	top: 0;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid #dbe3ef;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
	opacity: 1;
	transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.pc-cases__carousel .owl-prev {
	left: 8px;
}

.pc-cases__carousel .owl-next {
	right: 8px;
}

.pc-cases__carousel .owl-prev:hover,
.pc-cases__carousel .owl-next:hover {
	border-color: #93c5fd;
	background: #eff6ff;
	color: #2563ff;
	box-shadow: 0 0 0 3px rgba(37, 99, 255, .1);
}

.pc-cases__carousel .owl-prev .pc-similar__nav-icon {
	transform: rotate(-135deg);
	margin-left: 18px;
}

.pc-cases__carousel .owl-next .pc-similar__nav-icon {
	transform: rotate(45deg);
	margin-left: 14px;
}

.pc-cases__carousel .owl-pagination {
	text-align: center;
}

.pc-cases__carousel .owl-page span {
	width: 8px;
	height: 8px;
	margin: 0 4px;
	background: #cbd5e1;
	opacity: 1;
}

.pc-cases__carousel .owl-page.active span {
	background: #2563ff;
}

.pc-product-preview .pc-zoom-hint,
.pc-product-preview__mobile .pc-zoom-hint {
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	translate: -50% -50%;
}

/* The floating lens used to stand in for a hidden cursor; keep the real one instead. */
.pc-browser .pc-progressive-frame,
.pc-phone .pc-progressive-frame,
.pc-product-preview [data-pc-demo-open] {
	cursor: zoom-in !important;
}

.pc-zoom-lens {
	display: none !important;
}

.pc-product-preview [data-pc-demo-open].is-zoom-hover .pc-zoom-hint {
	opacity: 1;
	transform: scale(1.06);
	box-shadow: 0 14px 28px rgba(53, 109, 255, .48);
}

.pc-btn__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-right: 9px;
}

.main-footer__deadline-note {
	max-width: 1040px;
	margin: 0 0 18px;
	color: #64748b;
	font-size: 12px;
	line-height: 1.55;
}

.pc-page .doubt-answer ul {
	margin: 0 0 10px;
	padding-left: 1.15em;
}

.pc-page .doubt-answer li {
	margin: 0 0 4px;
}

.pc-page .doubt-answer li:last-child {
	margin-bottom: 0;
}

.pc-page .doubt-item.active .doubt-answer {
	max-height: 1200px;
}

.pc-founder {
	margin: 54px 0;
}

.pc-founder__card {
	position: relative;
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr) 92px;
	gap: 42px;
	align-items: center;
	padding: 42px;
	overflow: hidden;
	border-radius: 32px;
	background:
		radial-gradient(circle at 12% 22%, rgba(72, 120, 255, .08), transparent 34%),
		radial-gradient(circle at 94% 10%, rgba(83, 130, 255, .06), transparent 30%),
		#fff;
	box-shadow: 0 24px 65px rgba(56, 95, 255, .09);
}

.pc-founder__photo {
	position: relative;
	width: 260px;
}

.pc-founder__photo > img {
	position: relative;
	z-index: 3;
	display: block;
	width: 240px;
	height: 240px;
	object-fit: cover;
	border-radius: 50%;
}

.pc-founder__circle {
	position: absolute;
	z-index: 1;
	top: 28px;
	right: 0;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: linear-gradient(135deg, #dce7ff, #eef3ff);
}

.pc-founder__chat {
	position: absolute;
	z-index: 5;
	top: 18px;
	left: -14px;
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: #4d73ff;
	box-shadow: 0 15px 38px rgba(46, 93, 255, .16);
}

.pc-founder__chat svg {
	width: 27px;
	height: 27px;
}

.pc-founder__dots {
	position: absolute;
	z-index: 4;
	bottom: 30px;
	left: 3px;
	width: 70px;
	height: 48px;
	background-image: radial-gradient(#4b74ff 1.5px, transparent 1.5px);
	background-size: 13px 13px;
}

.pc-founder__badge {
	position: absolute;
	z-index: 6;
	right: -10px;
	bottom: 6px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 38px rgba(43, 91, 255, .14);
}

.pc-founder__badge-icon {
	display: grid;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	place-items: center;
	border-radius: 13px;
	background: #f3f7ff;
	color: #4c73ff;
}

.pc-founder__badge-icon svg {
	width: 23px;
	height: 23px;
}

.pc-founder__badge strong,
.pc-founder__badge small {
	display: block;
	white-space: nowrap;
}

.pc-founder__badge strong {
	color: #20253a;
	font-size: 17px;
	line-height: 1.15;
}

.pc-founder__badge small {
	margin-top: 3px;
	color: #64708c;
	font-size: 12px;
}

.pc-founder__content {
	position: relative;
	z-index: 2;
}

.pc-founder__content h2 {
	margin: 0 0 18px;
	color: #18213a;
	font-size: clamp(34px, 3.3vw, 38px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1.5px;
}

.pc-founder__content h2 span {
	background: linear-gradient(90deg, #4b72ff, #69a0ff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pc-founder__text {
	margin: 0;
	color: #5e6a86;
	font-size: 17px;
	line-height: 1.65;
}

.pc-founder__divider {
	width: 100%;
	height: 1px;
	margin: 24px 0;
	background: #edf2ff;
}

.pc-founder__info h3 {
	margin: 0 0 6px;
	color: #1f2438;
	font-size: 25px;
	font-weight: 800;
}

.pc-founder__info p {
	margin: 0;
	color: #66738f;
	font-size: 15px;
	line-height: 1.55;
}

.pc-founder__info a {
	color: #4c73ff;
	font-weight: 600;
	text-decoration: none;
}

.pc-founder__contacts {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
}

.pc-founder__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #4a526d;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.pc-founder__contact:hover,
.pc-founder__contact:focus {
	color: #356dff;
	text-decoration: none;
}

.pc-founder__contact-icon {
	display: grid;
	width: 58px;
	height: 58px;
	margin-bottom: 7px;
	place-items: center;
	border-radius: 18px;
	background: #fff;
	color: #4d73ff;
	box-shadow: 0 12px 32px rgba(44, 92, 255, .13);
	transition: transform .25s ease, box-shadow .25s ease;
}

.pc-founder__contact:hover .pc-founder__contact-icon,
.pc-founder__contact:focus .pc-founder__contact-icon {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(44, 92, 255, .18);
}

.pc-founder__contact-icon svg,
.pc-founder__contact-icon img {
	display: block;
	width: 27px;
	height: 27px;
}

.pc-reviews {
	position: relative;
	margin: 58px 0;
	padding: 60px 0;
	overflow: hidden;
	border-radius: 50px;
	background:
		radial-gradient(circle at 100% 0, rgba(53, 109, 255, .12), transparent 34%),
		linear-gradient(145deg, #f4f8ff, #fbfdff);
}

.pc-reviews__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
}

.pc-reviews__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: #356dff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pc-reviews__eyebrow svg {
	width: 18px;
	height: 18px;
}

.pc-reviews__title {
	margin: 0 0 8px;
	color: #18213a;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -1px;
}

.pc-reviews__subtitle {
	margin: 0;
	color: #66738f;
	font-size: 16px;
	line-height: 1.55;
}

.pc-reviews__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}

.pc-reviews__arrow {
	display: grid;
	width: 48px;
	height: 48px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 15px;
	background: #fff;
	color: #356dff;
	box-shadow: 0 10px 28px rgba(44, 92, 255, .13);
	transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.pc-reviews__arrow:not(:disabled):hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(44, 92, 255, .2);
}

.pc-reviews__arrow:disabled {
	opacity: .35;
	cursor: default;
}

.pc-reviews__arrow svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pc-reviews__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}

.pc-reviews__viewport::-webkit-scrollbar {
	display: none;
}

.pc-reviews__viewport:focus {
	outline: 2px solid rgba(53, 109, 255, .35);
	outline-offset: 5px;
	border-radius: 18px;
}

.pc-reviews__track {
	display: flex;
	gap: 20px;
	width: max-content;
	padding: 3px 2px 18px;
}

.pc-reviews__slide {
	width: clamp(270px, 27vw, 330px);
	flex: 0 0 auto;
	overflow: hidden;
	scroll-snap-align: start;
	border: 1px solid rgba(74, 116, 255, .1);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 16px 42px rgba(48, 78, 145, .1);
	transition: transform .25s ease, box-shadow .25s ease;
}

.pc-reviews__slide:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 50px rgba(48, 78, 145, .16);
}

.pc-reviews__message-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 16px;
	border-bottom: 1px solid #edf2fa;
}

.pc-reviews__avatar {
	display: grid;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #dce8ff, #edf4ff);
	color: #4d73ff;
}

.pc-reviews__avatar svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

.pc-reviews__message-head strong,
.pc-reviews__message-head small {
	display: block;
}

.pc-reviews__message-head strong {
	color: #202a43;
	font-size: 14px;
	line-height: 1.2;
}

.pc-reviews__message-head small {
	margin-top: 3px;
	color: #8a95ab;
	font-size: 11px;
}

.pc-reviews__telegram {
	width: 21px;
	height: 21px;
	margin-left: auto;
	color: #3390ec;
}

.pc-reviews__image {
	position: relative;
	display: block;
	height: 570px;
	padding: 10px;
	background: linear-gradient(180deg, #e9f3fb, #dfeef8);
}

.pc-reviews__image > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.pc-reviews__hint {
	display: none;
	margin: 7px 0 0;
	color: #7a86a0;
	font-size: 12px;
	text-align: center;
}

.pc-reviews--static .pc-reviews__controls,
.pc-reviews--static .pc-reviews__hint {
	display: none;
}

.pc-page .pc-description {
	margin-top: 0;
}

@media (max-width: 991px) {
	.pc-page .pc-adapt-lead {
		margin: 0 0 36px;
	}

	.pc-founder {
		margin: 40px 0;
	}

	.pc-founder__card {
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 32px;
		padding: 34px;
	}

	.pc-founder__photo {
		width: 225px;
	}

	.pc-founder__photo > img {
		width: 210px;
		height: 210px;
	}

	.pc-founder__circle {
		width: 155px;
		height: 155px;
	}

	.pc-founder__badge {
		right: -4px;
	}

	.pc-founder__contacts {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: center;
		gap: 28px;
	}

	.pc-reviews {
		margin: 44px 0;
		padding: 32px 0;
	}

	.pc-reviews__slide {
		width: min(310px, 42vw);
	}

	.pc-breadcrumbs {
		display: none !important;
	}

	.pc-hero__badge {
		margin-bottom: 10px;
	}

	.pc-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.pc-main,
	.pc-hero,
	.pc-hero__grid {
		display: contents;
	}

	.pc-hero__content,
	.pc-hero__media {
		display: contents;
	}

	.pc-hero__head {
		order: 1;
	}

	.pc-product-preview {
		order: 2;
	}

	.pc-message {
		order: 3;
	}

	.pc-hero__description {
		order: 4;
	}

	.pc-layout > .pc-product-card {
		order: 5;
		width: 100%;
	}

	.pc-hero__advantages {
		order: 6;
		margin-top: 10px;
	}

	.pc-variants {
		order: 7;
	}

	.pc-hero__title,
	.pc-hero__subtitle,
	.pc-hero__head {
		text-align: left !important;
	}

	.pc-message,
	.pc-hero__description,
	.pc-hero__advantages {
		width: 100%;
		max-width: none;
	}

	.pc-product-preview {
		max-width: none;
		margin: 0;
	}

	.pc-product-preview__stage {
		position: relative;
		display: block;
		width: 100%;
		padding: 0 38px 48px 0;
	}

	.pc-product-preview__desktop {
		width: 100%;
	}

	.pc-product-preview__mobile {
		position: absolute;
		right: 0;
		bottom: 0;
		width: clamp(105px, 28%, 150px);
		margin: 0;
		z-index: 3;
		pointer-events: none;
	}
}

@media (max-width: 575px) {
	.pc-founder {
		margin: 32px 0;
	}

	.pc-founder__card {
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding: 28px 20px;
		border-radius: 24px;
		text-align: center;
	}

	.pc-founder__photo {
		width: 218px;
		margin: 0 auto;
	}

	.pc-founder__photo > img {
		width: 200px;
		height: 200px;
	}

	.pc-founder__chat {
		left: -5px;
		width: 50px;
		height: 50px;
	}

	.pc-founder__dots {
		left: 8px;
	}

	.pc-founder__badge {
		right: -4px;
		padding: 10px 12px;
	}

	.pc-founder__badge-icon {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
	}

	.pc-founder__badge strong {
		font-size: 15px;
	}

	.pc-founder__content h2 {
		font-size: 36px;
	}

	.pc-founder__text {
		font-size: 16px;
	}

	.pc-founder__divider {
		margin: 20px 0;
	}

	.pc-founder__contacts {
		flex-direction: row;
		gap: 18px;
	}

	.pc-founder__contact-icon {
		width: 54px;
		height: 54px;
	}

	.pc-reviews {
		margin: 34px 0;
		padding: 26px 0 20px;
	}

	.pc-reviews__head {
		align-items: center;
		margin-bottom: 22px;
	}

	.pc-reviews__title {
		font-size: 29px;
	}

	.pc-reviews__subtitle {
		font-size: 14px;
	}

	.pc-reviews__controls {
		display: none;
	}

	.pc-reviews__track {
		gap: 14px;
		padding-bottom: 12px;
	}

	.pc-reviews__slide {
		width: min(82vw, 310px);
	}

	.pc-reviews__hint {
		display: block;
	}

	.pc-product-card__consultation {
		grid-template-columns: minmax(0, 1fr) 54px 54px;
	}

	.pc-layout {
		gap: 22px;
	}

	.pc-product-preview__stage {
		display: block;
		align-items: initial;
		padding: 0 28px 38px 0;
	}

	.pc-product-preview__mobile {
		position: absolute;
		right: 0;
		bottom: 0;
		width: clamp(92px, 30%, 125px);
		margin: 0;
	}
}

/* Sold design card */
.pc-product-card--sold {
	background: linear-gradient(180deg, #f8fafc 0%, #fff 42%);
	border-color: #e2e8f0;
}

.pc-sold {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pc-sold__badge {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #64748b;
}

.pc-sold__title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	color: #0f172a;
}

.pc-sold__text {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.55;
	color: #475569;
}

.pc-sold .pc-product-card__actions {
	margin-top: 4px;
}

.cat-card__sold {
	display: block;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	color: #64748b;
}

.cat-card__label--sold {
	background: #64748b;
	color: #fff;
}

.cat-card--sold .cat-card__pic {
	opacity: .88;
}

/* Perf: advcta.png was a 436KB uncompressed render; advcta.webp is the same
   image re-encoded, ~13KB. Overrides the stylesheet.css rule (loaded after it). */
.adv-cta {
	background: url(/image/advcta.webp) 40% 10% no-repeat, linear-gradient(124deg, #0172f4, #005de4);
	background-size: contain;
}

/* Perf: .adv-img img / .guarantee-img img only set max-width in stylesheet.css,
   no height -- fine when the <img> had no width/height attributes (browser used
   the intrinsic ratio), but once width/height attributes were added (to fix CLS)
   the box used the raw height attribute unscaled, stretching the icon. */
.adv-img img,
.guarantee-img img {
	height: auto;
}

/* Free hero-mockup lead-gen CTA (product_catalog.twig, after "Как происходит запуск").
   Compact single-width band; the actual form lives in #sp-mockup-modal (.pc-order-modal),
   which is intentionally placed outside .container in the template -- see note there about
   .container's z-index:1 trapping fixed-position descendants under the site header. */
.sp-mockup-cta {
	position: relative;
	margin: 48px 0;
	padding: 34px 48px;
	border-radius: 28px;
	overflow: hidden;
	text-align: center;
	background: linear-gradient(135deg, #1747d4 0%, #2b6df3 40%, #4f8dfd 76%, #7ab0ff 100%);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 26px 60px rgba(20, 70, 200, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.sp-mockup-cta__texture {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0, 0, 0, .8) 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0, 0, 0, .8) 0%, transparent 72%);
}

.sp-mockup-cta__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .22) 0%, transparent 38%),
		radial-gradient(circle at 94% 92%, rgba(255, 255, 255, .16) 0%, transparent 42%);
}

.sp-mockup-cta__orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(2px);
}

.sp-mockup-cta__orb--a {
	width: 260px;
	height: 260px;
	right: -90px;
	top: -120px;
	background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, transparent 70%);
}

.sp-mockup-cta__orb--b {
	width: 220px;
	height: 220px;
	left: -80px;
	bottom: -110px;
	background: radial-gradient(circle, rgba(140, 190, 255, .3) 0%, transparent 70%);
}

.sp-mockup-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}

.sp-mockup-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.sp-mockup-cta__pulse {
	position: relative;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7bffb0;
	box-shadow: 0 0 0 rgba(123, 255, 176, .6);
	animation: sp-mockup-pulse 2.2s ease-out infinite;
}

@keyframes sp-mockup-pulse {
	0% { box-shadow: 0 0 0 0 rgba(123, 255, 176, .55); }
	70% { box-shadow: 0 0 0 8px rgba(123, 255, 176, 0); }
	100% { box-shadow: 0 0 0 0 rgba(123, 255, 176, 0); }
}

.sp-mockup-cta__title {
	margin: 16px 0 10px;
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.25;
	color: #fff;
}

.sp-mockup-cta__text {
	margin: 0 0 20px;
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
}

.sp-mockup-cta__points {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.sp-mockup-cta__points li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.sp-mockup-cta__check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 10px;
}

.sp-mockup-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 30px 0 36px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, #ffffff 0%, #f3f6ff 100%);
	color: #1d4ed8;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 18px 38px rgba(9, 24, 74, .32);
	transition: transform .2s ease, box-shadow .2s ease;
}

.sp-mockup-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 46px rgba(9, 24, 74, .4);
	color: #1d4ed8;
	text-decoration: none;
}

.sp-mockup-cta__btn:hover .sp-mockup-cta__btn-arrow {
	transform: translateX(3px);
}

.sp-mockup-cta__btn-arrow {
	width: 18px;
	height: 18px;
	transition: transform .2s ease;
}

.sp-mockup-cta__fineprint {
	margin: 12px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
}

.sp-mockup-cta__modal-note {
	margin-top: 8px;
	text-align: center;
}

@media (max-width: 991px) {
	.sp-mockup-cta {
		padding: 36px 32px;
		border-radius: 24px;
	}
}

@media (max-width: 575px) {
	.sp-mockup-cta {
		margin: 36px 0;
		padding: 30px 20px;
		border-radius: 22px;
	}

	.sp-mockup-cta__title {
		font-size: 22px;
	}

	.sp-mockup-cta__points {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.sp-mockup-cta__points li {
		white-space: normal;
		justify-content: center;
	}

	.sp-mockup-cta__btn {
		width: 100%;
		padding: 0 20px;
	}
}

/* Mobile-only floating tab that opens #sp-mockup-modal. Takes over the
   bottom-left corner from .scroll-to-top on mobile (hidden below) so there
   aren't three competing fixed buttons crammed into two corners. */
.sp-mockup-tab {
	display: none;
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 9997;
	align-items: center;
	gap: 8px;
	padding: 13px 18px 13px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #2563ff 0%, #4f7cff 100%);
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 14px 32px rgba(37, 99, 255, .38);
	animation: sp-mockup-tab-float 2.6s ease-in-out infinite;
}

.sp-mockup-tab:hover,
.sp-mockup-tab:active {
	color: #fff;
	text-decoration: none;
}

.sp-mockup-tab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 14px;
}

@keyframes sp-mockup-tab-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.sp-mockup-tab {
		animation: none;
	}
}

@media (max-width: 767px) {
	.sp-mockup-tab {
		display: inline-flex;
	}

	/* Only steal the corner on pages that actually have the mockup tab
	   (product cards) -- everywhere else .scroll-to-top should stay put. */
	body:has(.sp-mockup-tab) .scroll-to-top {
		display: none !important;
	}
}

@media (max-width: 340px) {
	.sp-mockup-tab__text {
		display: none;
	}

	.sp-mockup-tab {
		padding: 13px;
	}
}

@media (max-width: 767px) {
	/* Long titles (e.g. sp-mockup-modal's "Получите бесплатный макет первого
	   экрана") wrap to 2 lines on narrow dialogs and the 2nd line ran right
	   under the absolutely-positioned close button (top:12px; right:14px;
	   width:36px) -- reserve room for it instead of overlapping. */
	.pc-order-modal__title {
		padding-right: 46px;
	}
}

/* Pre-existing bug, unrelated to the mockup CTA work: on narrow cards the
   "Заказать сайт за <price>" button text didn't fit next to the arrow icon
   at the inherited padding/gap and wrapped mid-phrase. Tighten spacing so
   it reliably fits on one line instead. */
@media (max-width: 767px) {
	.adv-cards-scroll .adv-card.adv-cta .cta-btn {
		gap: 8px;
		padding: 0 14px;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.adv-cards-scroll .adv-card.adv-cta .cta-btn {
		font-size: 13px;
	}
}

/* Hero top badge row: the static "Эксклюзив / Один сайт — один владелец"
   info pill now carries a small icon, plus a second, clickable trigger that
   jumps to #free-mockup. Icons distinguish the two at a glance -- a lock for
   the static fact, a bolt for the actionable one. */
.pc-hero__badge-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pc-hero__badge-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: #356dff;
}

.pc-hero__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px 7px 10px;
	border-radius: 999px;
	background: #eef5ff;
	border: 1px solid #d6e4ff;
	color: #1d4ed8;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.pc-hero__trigger:hover {
	background: #dbe8ff;
	border-color: #b9d2ff;
	color: #1d4ed8;
	text-decoration: none;
	transform: translateY(-1px);
}

.pc-hero__trigger-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: #f59e0b;
}

@media (max-width: 480px) {
	.pc-hero__trigger span {
		white-space: normal;
	}
}

/* Нишевые блоки-уникализация на странице товара (вкладка «Уникализация» в
   admin/controller/catalog/product_quickfill.php::generateUniqueness()). */

.pc-uniqueness {
	margin-top: 56px;
	padding: 30px 32px 32px;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba(31, 38, 135, .06);
}

.pc-uniqueness__title {
	margin: 0 0 24px;
	color: #111827;
	font-size: clamp(23px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.2;
}

.pc-uniqueness__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pc-uniqueness__block {
	padding: 24px 26px;
	background: #f8fafc;
	border-radius: 18px;
}

.pc-uniqueness__block--wide {
	grid-column: 1 / -1;
}

.pc-uniqueness__block-title {
	margin: 0 0 12px;
	color: #1e293b;
	font-size: 19px;
	font-weight: 750;
	line-height: 1.3;
}

.pc-uniqueness__text {
	margin: 0 0 12px;
	color: #475569;
	font-size: 15.5px;
	line-height: 1.65;
}

.pc-uniqueness__text:last-child {
	margin-bottom: 0;
}

.pc-uniqueness__note {
	margin: 12px 0 0;
	color: #7a86a0;
	font-size: 14px;
	line-height: 1.6;
}

.pc-uniqueness__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pc-uniqueness__list li {
	position: relative;
	padding-left: 26px;
	color: #334155;
	font-size: 15.5px;
	line-height: 1.55;
}

.pc-uniqueness__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2b6df3;
}

.pc-uniqueness__list--tags {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.pc-uniqueness__list--tags li {
	padding: 8px 16px 8px 16px;
	background: #eef3ff;
	color: #2b6df3;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
}

.pc-uniqueness__list--tags li::before {
	display: none;
}

.pc-uniqueness__list--quotes li {
	padding-left: 0;
	font-style: italic;
	color: #475569;
}

.pc-uniqueness__list--quotes li::before {
	display: none;
}

.pc-uniqueness__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 4px;
}

.pc-uniqueness__page-chip {
	padding: 9px 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	color: #334155;
	font-size: 14px;
	font-weight: 600;
}

.pc-uniqueness__table {
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	overflow: hidden;
}

.pc-uniqueness__table-head,
.pc-uniqueness__table-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 16px;
	padding: 14px 20px;
}

.pc-uniqueness__table-head {
	background: #eef3ff;
	color: #2b6df3;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.pc-uniqueness__table-row {
	background: #fff;
	color: #334155;
	font-size: 15px;
	line-height: 1.5;
}

.pc-uniqueness__table-row:nth-child(even) {
	background: #f8fafc;
}

.pc-uniqueness__table-row + .pc-uniqueness__table-row {
	border-top: 1px solid #e2e8f0;
}

@media (max-width: 767px) {
	.pc-uniqueness {
		padding: 24px 20px 26px;
	}

	.pc-uniqueness__grid {
		grid-template-columns: 1fr;
	}

	.pc-uniqueness__table-head,
	.pc-uniqueness__table-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.pc-uniqueness__table-head span:last-child {
		margin-top: 6px;
	}

	.pc-uniqueness__table-row span:first-child {
		font-weight: 700;
		color: #1e293b;
	}
}

/* Модалка одной функции из "Полного списка возможностей сайта"
   (extension/module/store.twig). Тот же надёжный паттерн, что и у
   pc-order-modal/pc-demo-modal: показ/скрытие через [hidden], без
   Bootstrap .modal('show') и fade-переходов — та реализация иногда
   не долетала до opacity:1 и модалка оставалась невидимой. */

body.pc-feature-modal-open {
	overflow: hidden;
}

.pc-feature-modal {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.pc-feature-modal[hidden] {
	display: none !important;
}

.pc-feature-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 27, 61, 0.28);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.pc-feature-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 520px);
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 24px 64px rgba(15, 27, 61, .16), 0 8px 24px rgba(64, 129, 253, .12);
}

.pc-feature-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: #f4f8fe;
	color: #64748b;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.pc-feature-modal__close svg {
	width: 18px;
	height: 18px;
}

.pc-feature-modal__close:hover {
	background: #eef3ff;
	color: #2b6df3;
}

.pc-feature-modal__body {
	padding: 28px 24px 24px;
}

.pc-feature-modal__title {
	margin: 0 0 12px;
	padding-right: 44px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #0f172a;
}

.pc-feature-modal__text {
	font-size: 15px;
	line-height: 1.6;
	color: #334155;
}

.pc-feature-modal__text p {
	margin: 0;
}

/* Блок "На какой CMS работает сайт" — карусель скринов админ-панели на странице товара.
   Пока используются плейсхолдеры (screen.image пуст в product_catalog.twig) — как
   только появятся реальные скриншоты, достаточно проставить путь в cms_screens, и
   карточка сама переключится на реальное фото с увеличением по клику (fancybox). */

.pc-cms {
	margin-top: 56px;
	padding-top: 36px;
	border-top: 1px solid #e2e8f0;
}

.pc-cms__head {
	margin-bottom: 24px;
}

.pc-cms__title {
	margin: 0 0 8px;
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 800;
	color: #0f172a;
}

.pc-cms__sub {
	margin: 0;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.55;
	color: #64748b;
}

.pc-cms__carousel {
	position: relative;
}

.pc-cms__carousel .owl-wrapper-outer {
	overflow: hidden;
}

.pc-cms__carousel .item {
	padding: 0 11px;
}

.pc-cms__card {
	height: 100%;
}

.pc-cms__shot {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: #eef2f9;
	border: 1px solid #e2e8f0;
	aspect-ratio: 4 / 3;
}

.pc-cms__shot img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.pc-cms__shot-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	gap: 5px;
	padding: 9px 10px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.pc-cms__shot-bar span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #cbd5e1;
}

.pc-cms__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(15, 23, 42, .55);
	color: #fff;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.pc-cms__zoom svg {
	width: 17px;
	height: 17px;
}

.pc-cms__shot:hover .pc-cms__zoom {
	opacity: 1;
	transform: translateY(0);
}

.pc-cms__shot:hover .pc-cms__zoom {
	background: #2b6df3;
}

.pc-cms__shot--placeholder {
	cursor: default;
}

.pc-cms__skeleton {
	position: absolute;
	inset: 0;
	top: 26px;
	display: flex;
	gap: 8px;
	padding: 12px;
}

.pc-cms__skeleton-side {
	flex: 0 0 26%;
	border-radius: 8px;
	background: linear-gradient(180deg, #e2e8f0, #eef2f9);
}

.pc-cms__skeleton-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pc-cms__skeleton-main span {
	display: block;
	height: 16%;
	border-radius: 6px;
	background: linear-gradient(180deg, #e2e8f0, #eef2f9);
}

.pc-cms__skeleton-main span:first-child {
	width: 60%;
}

.pc-cms__card-title {
	margin: 14px 0 4px;
	font-size: 16px;
	font-weight: 750;
	color: #0f172a;
}

.pc-cms__card-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #64748b;
}

.pc-cms__carousel .owl-controls {
	margin-top: 20px;
}

.pc-cms__carousel .owl-buttons {
	position: absolute;
	top: 38%;
	left: 0;
	right: 0;
	pointer-events: none;
}

.pc-cms__carousel .owl-prev,
.pc-cms__carousel .owl-next {
	pointer-events: auto;
	position: absolute;
	top: 0;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid #dbe3ef;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
	opacity: 1;
	transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.pc-cms__carousel .owl-prev {
	left: 8px;
}

.pc-cms__carousel .owl-next {
	right: 8px;
}

.pc-cms__carousel .owl-prev:hover,
.pc-cms__carousel .owl-next:hover {
	border-color: #93c5fd;
	background: #eff6ff;
	color: #2563ff;
	box-shadow: 0 0 0 3px rgba(37, 99, 255, .1);
}

.pc-cms__carousel .owl-prev .pc-similar__nav-icon {
	transform: rotate(-135deg);
	margin-left: 18px;
}

.pc-cms__carousel .owl-next .pc-similar__nav-icon {
	transform: rotate(45deg);
	margin-left: 14px;
}

@media (max-width: 767px) {
	.pc-cms {
		padding-top: 28px;
	}
}

/* Заставка "хотите продолжить?" — синтетический последний экран в pc-demo-modal для
   товаров с 1-2 готовыми экранами (product_catalog.twig, show_screen_teaser). Десктоп-
   вариант — с блёклым фоном из первого (hero) экрана, телефонный — без фона. */

.pc-screen-teaser {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 460px;
	padding: 40px 24px;
	background: #f8fafc;
}

.pc-screen-teaser--bg {
	min-height: 620px;
	background-size: cover;
	background-position: center top;
}

.pc-screen-teaser--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
}

.pc-screen-teaser__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .55);
}

.pc-screen-teaser__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	padding: 28px 26px 26px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 64px rgba(15, 23, 42, .2);
}

.pc-screen-teaser__tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 20px;
	background: #f1f5f9;
	border-radius: 12px;
}

.pc-screen-teaser__tab {
	flex: 1 1 0;
	padding: 10px 8px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #64748b;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.pc-screen-teaser__tab.is-active {
	background: #fff;
	color: #0f172a;
	box-shadow: 0 6px 16px rgba(15, 23, 42, .1);
}

.pc-screen-teaser__title {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.25;
}

.pc-screen-teaser__lead {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: #2b6df3;
}

.pc-screen-teaser__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: #64748b;
}

.pc-screen-teaser__list-title {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #94a3b8;
}

.pc-screen-teaser__list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-height: 190px;
	overflow-y: auto;
}

.pc-screen-teaser__list li {
	padding: 10px 12px;
	background: #f8fafc;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
}

.pc-screen-teaser__list li strong {
	display: block;
	color: #0f172a;
	font-weight: 700;
}

.pc-screen-teaser__list li span {
	display: block;
	margin-top: 2px;
	color: #7a86a0;
}

.pc-screen-teaser__form-row {
	display: flex;
	gap: 8px;
}

.pc-screen-teaser__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 14px;
	color: #0f172a;
}

.pc-screen-teaser__input:focus {
	outline: none;
	border-color: #2b6df3;
}

.pc-screen-teaser__submit {
	flex: 0 0 auto;
	padding: 12px 16px;
	border: 0;
	border-radius: 10px;
	background: #2b6df3;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s ease;
}

.pc-screen-teaser__submit:hover {
	background: #1d4ed8;
}

.pc-screen-teaser__submit:disabled {
	opacity: .6;
	cursor: default;
}

.pc-screen-teaser__submit--custom {
	width: 100%;
	white-space: normal;
	padding: 14px 16px;
}

.pc-screen-teaser__agree {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 11.5px;
	line-height: 1.4;
	color: #94a3b8;
	cursor: pointer;
}

.pc-screen-teaser__agree input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.pc-screen-teaser__agree a {
	color: #64748b;
	text-decoration: underline;
}

.pc-screen-teaser__note {
	margin: 10px 0 0;
	font-size: 12px;
	color: #94a3b8;
	text-align: center;
}

.pc-screen-teaser__status {
	margin-top: 10px;
	font-size: 13px;
}

.pc-screen-teaser__status.is-ok {
	color: #16a34a;
}

.pc-screen-teaser__status.is-error {
	color: #dc2626;
}

/* Панель "Телефон" в pc-demo-modal всегда узкая (.pc-demo-modal__phone — max 350px), даже
   когда сам сайт открыт на широком десктопе — поэтому компактность табов здесь завязана
   на контекст (родитель .pc-demo-modal__phone-screen), а не на ширину окна браузера. */
.pc-demo-modal__phone-screen .pc-screen-teaser__tabs {
	gap: 3px;
}

.pc-demo-modal__phone-screen .pc-screen-teaser__tab {
	padding: 8px 5px;
	font-size: 11px;
	line-height: 1.25;
}

.pc-demo-modal__phone-screen .pc-screen-teaser__content {
	padding: 20px 16px 18px;
}

.pc-demo-modal__phone-screen .pc-screen-teaser__title {
	font-size: 18px;
}

.pc-demo-modal__phone-screen .pc-screen-teaser__form-row {
	flex-direction: column;
}

.pc-demo-modal__phone-screen .pc-screen-teaser__submit {
	width: 100%;
}

@media (max-width: 480px) {
	.pc-screen-teaser {
		min-height: 0;
		padding: 28px 16px;
	}

	.pc-screen-teaser--bg {
		min-height: 0;
	}

	.pc-screen-teaser__content {
		padding: 22px 18px 20px;
		box-shadow: none;
	}

	.pc-screen-teaser__tabs {
		gap: 3px;
	}

	.pc-screen-teaser__tab {
		padding: 8px 5px;
		font-size: 11px;
		line-height: 1.25;
	}

	.pc-screen-teaser__form-row {
		flex-direction: column;
	}

	.pc-screen-teaser__submit {
		width: 100%;
	}
}