@charset "UTF-8";
/* Generated bundle. Source order: style.css, main-theme.css, async.css, critical.css, add.css, quick-search.css, archive-currency-page.css. */

/* === Theme base style.css === */

/*
Theme Name: NarxTop
Theme URI: https://narxtop.local
Author: Denis
Description: Custom theme for NarxTop project (HTML/CSS/JS frontend + Crocoblock logic)
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: narxtop
*/

/* === main-theme.css === */

/* Main Styles Placeholder */

.site-header, .site-footer {
    padding:20px 0;
    background:#f5f5f5;
}

.hero {
    padding:80px 0;
    text-align:center;
}

/* === async.css === */

.icon {
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center
}

.icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block
}

header {
	background-color: var(--color-L100);
	position: relative;
	z-index: 1040
}

.header-menu__item:hover .header-submenu {
	display: block
}

@media ( max-width :1200px) {
	.header-submenu {
		display: block !important;
		height: 0;
		overflow: hidden;
		transition: height .25s linear
	}
	.header-submenu .container {
		padding: 0
	}
}

@media ( min-width :1200px) {
	.header-submenu {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		padding: 2rem 0 2.5rem;
		overflow: hidden;
		border-top: .0625rem solid var(--color-D10);
		border-bottom-right-radius: 1rem;
		border-bottom-left-radius: 1rem;
		background-color: var(--color-L100);
		box-shadow: 0 .75rem 1rem rgba(20, 36, 56, .06);
		cursor: default
	}
}

.header-submenu__main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem
}

@media ( max-width :1200px) {
	.header-submenu__main {
		display: flex;
		flex-direction: column;
		gap: 1rem
	}
}

.header-submenu__items {
	display: flex;
	flex-direction: column;
	gap: 1.25rem
}

@media ( max-width :1200px) {
	.header-submenu__items {
		gap: 1rem
	}
}

.header-submenu__link {
	display: flex;
	position: relative;
	flex-flow: column nowrap;
	align-items: start;
	justify-content: center;
	width: auto;
	line-height: 1.25rem;
	gap: .125rem;
	min-height: 2.25rem;
	padding-left: 3rem;
	font-size: .875rem;
	font-weight: 600
}

.header-submenu__link:hover {
	color: var(--color-B100)
}

.header-submenu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1.1875rem;
	width: auto;
	height: auto;
	border-radius: .75rem;
	padding: 0;
	background: none
}

.show-menu-desktop .blackout {
	opacity: 1;
	pointer-events: auto
}

.search-button {
	background-color: var(--color-D10);
	transition: all .25s linear
}

.search-button:hover {
	background: var(--color-D20)
}

.header-search__input {
	width: 100%;
	display: flex;
	align-items: center;
	position: relative
}

.header-search__input .input {
	padding-left: 3rem
}

.header-search {
	z-index: 1043;
	position: fixed;
	top: 0;
	width: 36.5rem;
	left: calc(50% - 18.25rem);
	display: flex !important;
	box-sizing: border-box;
	align-items: center;
	border-radius: 0 0 .5rem .5rem;
	margin-top: 0;
	padding: 1rem;
	column-gap: .5rem;
	background: #fff;
	transition: all .25s linear
}

@media ( max-width :767px) {
	.header-search {
		left: 0;
		width: 100%
	}
}

.header-search__input-icon {
	position: absolute;
	left: 1rem;
	color: var(--color-D30);
	z-index: 2;
	width: 1.25rem;
	height: 1.25rem;
	pointer-events: none
}

.search-active .blackout {
	z-index: 1041;
	opacity: 1;
	pointer-events: auto
}

.search-active .header-search {
	opacity: 1;
	pointer-events: auto
}

@media ( max-width :1200px) {
	.header-menu {
		display: none;
		background: #fff;
		position: absolute;
		top: 3.75rem;
		overflow: auto;
		height: calc(100vh - 3.75rem);
		left: 0;
		margin: 0 !important;
		width: 100%
	}

	.header-menu__items {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		padding: .75rem 1.875rem !important;
		width: 100%
	}
}

@media ( max-width :767px) {
	.header-menu__items {
		padding: .75rem 1rem !important
	}
}

@media ( max-width :1200px) {
	.header-menu__item {
		width: 100%
	}
	.header-menu__item.active .header-menu__link svg {
		transform: rotate(180deg)
	}

	.header-menu__link {
		padding: .75rem 0 !important;
		font-size: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: auto !important
	}

	.menu-active {
		overflow: hidden
	}
	.menu-active .hamburger-hidden {
		display: none
	}
	.menu-active .hamburger-show {
		display: block
	}
	.menu-active .header-menu {
		display: block
	}
}

.blackout {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s linear
}

.bg-white {
	background: #fff
}

.button-black {
	color: var(--color-L100) !important;
	background: var(--color-B300) !important
}

.button-black:hover {
	border-color: var(--color-L100) !important;
	background: var(--color-D100) !important
}

.button-black-border {
	border: .0625rem solid var(--color-D20) !important;
	color: var(--color-D100);
	background: 0 0 !important
}

.button-black-border:hover {
	color: var(--color-D100);
	border: .0625rem solid var(--color-D30) !important
}

.button-white-border {
	color: #fff !important;
	border: .0625rem solid #fff !important;
	background: 0 0 !important
}

.button-white-border:hover {
	background: #fff !important;
	color: #000 !important
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .5);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	overflow: hidden
}

.modal-main {
	display: flex;
	position: fixed;
	z-index: 1040;
	align-items: flex-start;
	height: 100%;
	justify-content: center;
	width: 100%
}

.modal-content {
	backface-visibility: hidden;
	animation-duration: .3s;
	animation-timing-function: cubic-bezier(.46, 0, .03, .99);
	border-radius: 1.25rem;
	background-color: #fff;
	display: flex;
	position: relative;
	z-index: 1050;
	flex-direction: column;
	box-shadow: 0 .75rem 1rem rgba(0, 0, 0, .06);
	max-width: 50rem;
	align-self: center;
	width: 100%;
	max-height: calc(100% - 3.75rem);
	margin-bottom: 0
}

@media ( max-width :767px) {
	.modal-content {
		height: 100%;
		border-radius: 0;
		max-height: 100%
	}
}

.close-modal {
	position: absolute;
	z-index: 910;
	top: 0;
    display: flex;
	right: 0;
	box-sizing: initial;
	flex-shrink: 0;
	align-items: center;
	padding: .75rem;
	cursor: pointer
}

.close-modal svg {
	width: 1rem;
	height: 1rem
}

.modal-head {
	padding: 2rem 2rem 2.5rem
}

@media ( max-width :768px) {
	.modal-head {
		padding: 1.5rem 1rem 1.75rem
	}
}

.modal.show {
	display: flex;
	animation: fadeIn .3s ease-out
}

@keyframes fadeIn { 
	0% { opacity: 0 }	
	100% { opacity: 1 }
}

.modal-main-block {
	padding: .5rem 2rem 2rem;
	overflow-y: auto
}

.modal-main-block::-webkit-scrollbar {
	display: none
}

@media ( max-width :767px) {
	.modal-main-block {
		padding: .5rem 1rem 1rem
	}
}

.modal-main-service {
	margin-top: 1.875rem
}

.modal-main-service:first-child {
	margin-top: 0
}

.modal-main-service-row {
	display: grid;
	grid-row-gap: 1.25rem;
	row-gap: 1.25rem;
	justify-content: space-between;
	align-items: flex-start;
	grid-template-columns: repeat(6, 3.75rem)
}

@media ( max-width :768px) {
	.modal-main-service-row {
		grid-template-columns: repeat(4, 3.75rem)
	}
}

.modal-main-service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--color-D100)
}

.modal-main-service-item:hover {
	color: var(--color-B100)
}

.modal-main-service-item-text {
	font-size: .625rem;
	line-height: 1.5;
	position: relative;
	left: 50%;
	min-width: 3.75rem;
	letter-spacing: .5px;
	text-transform: uppercase;
	transform: translateX(-50%);
	font-weight: 600;
	margin: .375rem auto 0;
	width: min-content
}

.modal-main-service-item-icon {
	width: 3.75rem;
	height: 3.75rem;
	margin: 0 auto;
	padding: .75rem;
	background-color: var(--color-D06);
	border-radius: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: color .3s ease
}

.modal-main-service-item-icon svg {
	width: 1.75rem;
	height: 1.75rem
}

@keyframes ss-valueIn { 
	0% { transform: scale(0); opacity: 0 }
	100% { transform: scale(1); opacity: 1 }
}

@keyframes ss-valueOut { 
	0% { transform: scale(1); opacity: 1 }
	100% {transform: scale(0); opacity:0
}

}
.ss-hide {
	display: none !important
}

.ss-main {
	display: flex;
	flex-direction: row;
	position: relative;
	user-select: none;
	color: var(--ss-font-color);
	min-height: var(--ss-main-height);
	width: 100%;
	padding: var(--ss-spacing-s);
	cursor: pointer;
	border: .0625rem solid var(--ss-border-color);
	border-radius: var(--ss-border-radius);
	background-color: var(--ss-bg-color);
	outline: 0;
	box-sizing: border-box;
	transition: background-color var(--ss-animation-timing);
	overflow: hidden
}

.ss-main.ss-disabled {
	background-color: var(--ss-disabled-color);
	cursor: not-allowed
}

.ss-main.ss-disabled .ss-values .ss-disabled {
	color: var(--ss-font-color)
}

.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete {
	cursor: not-allowed
}

.ss-main.ss-dir-above {
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.ss-main.ss-dir-below {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

.ss-main .ss-values {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ss-spacing-m);
	flex: 1 1 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden
}

.ss-main .ss-values .ss-placeholder {
	display: block;
	width: 100%;
	min-width: 0;
	padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s)
		var(--ss-spacing-m);
	margin: auto 0 auto 0;
	line-height: 1em;
	color: var(--ss-placeholder-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.ss-main .ss-values .ss-max {
	display: flex;
	user-select: none;
	align-items: center;
	width: fit-content;
	font-size: .75rem;
	color: var(--ss-bg-color);
	line-height: 1;
	padding: var(--ss-spacing-s) var(--ss-spacing-m);
	background-color: var(--ss-primary-color);
	border-radius: var(--ss-border-radius)
}

.ss-main .ss-values .ss-single {
	display: flex;
    align-items: center;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 auto;
	max-width: calc(100% - 1.25rem)
}

.ss-main .ss-values .ss-value {
	display: flex;
	user-select: none;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	background-color: var(--ss-primary-color);
	border-radius: var(--ss-border-radius);
	animation-name: ss-valueIn;
	animation-duration: var(--ss-animation-timing);
	animation-timing-function: ease-out;
	animation-fill-mode: both
}

.ss-main .ss-values .ss-value.ss-value-out {
	animation-name: ss-valueOut;
	animation-duration: var(--ss-animation-timing);
	animation-timing-function: ease-out
}

.ss-main .ss-values .ss-value .ss-value-text {
	flex: 1;
	min-width: 0;
	font-size: .75rem;
	line-height: 1;
	color: var(--ss-bg-color);
	padding: var(--ss-spacing-s) var(--ss-spacing-m);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.ss-main .ss-values .ss-value .ss-value-delete {
	display: flex;
	align-items: center;
	height: var(--ss-spacing-l);
	width: var(--ss-spacing-l);
	padding: var(--ss-spacing-s) var(--ss-spacing-m);
	cursor: pointer;
	border-left: solid .0625rem var(--ss-bg-color);
	box-sizing: content-box
}

.ss-main .ss-values .ss-value .ss-value-delete svg {
	height: var(--ss-spacing-l);
	width: var(--ss-spacing-l)
}

.ss-main .ss-values .ss-value .ss-value-delete svg path {
	fill: none;
	stroke: var(--ss-bg-color);
	stroke-width: 18;
	stroke-linecap: round;
	stroke-linejoin: round
}

.ss-main .ss-deselect {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: auto;
	padding: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m)
}

.ss-main .ss-deselect svg {
	width: .5rem;
	height: .5rem
}

.ss-main .ss-deselect svg path {
	fill: none;
	stroke: var(--ss-font-color);
	stroke-width: 20;
	stroke-linecap: round;
	stroke-linejoin: round
}

.ss-main .ss-arrow {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: .75rem;
	height: .75rem;
	margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m)
}

.ss-main .ss-arrow path {
	fill: none;
	stroke: var(--ss-font-color);
	stroke-width: 18;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition-timing-function: ease-out;
	transition: var(--ss-animation-timing)
}

.ss-content {
	position: absolute;
	display: flex;
	height: auto;
	flex-direction: column;
	width: auto;
	max-height: var(--ss-content-height);
	box-sizing: border-box;
	border: solid .0625rem var(--ss-border-color);
	background-color: var(--ss-bg-color);
	transition: transform var(--ss-animation-timing), opacity
		var(--ss-animation-timing);
	opacity: 0;
	transform: scaleY(0);
	overflow: hidden;
	z-index: 10000
}

.ss-content.ss-relative {
	position: relative;
	height: 100%
}

.ss-content.ss-fixed {
	position: fixed
}

.ss-content.ss-dir-above {
	transform-origin: center bottom;
	flex-direction: column-reverse;
	border-top-left-radius: var(--ss-border-radius);
	border-top-right-radius: var(--ss-border-radius)
}

.ss-content.ss-dir-below {
	transform-origin: center top;
	border-bottom-left-radius: var(--ss-border-radius);
	border-bottom-right-radius: var(--ss-border-radius)
}

.ss-content.ss-open {
	opacity: 1;
	transform: scaleY(1)
}

.ss-content.form-apply-input{
    height: auto;
    padding: 0;
}

.ss-content .ss-search {
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	border-bottom: .0625rem solid var(--ss-border-color)
}

.ss-content .ss-search input {
	display: inline-flex;
	font-size: inherit;
	line-height: inherit;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: var(--ss-search-height);
	padding: var(--ss-spacing-m) var(--ss-spacing-l);
	margin: 0;
	border: none;
	background-color: var(--ss-bg-color);
	outline: 0;
	text-align: left;
	box-sizing: border-box
}

.ss-content .ss-search input::placeholder {
	color: var(--ss-placeholder-color);
	vertical-align: middle
}

.ss-content .ss-search .ss-addable {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	flex: 0 0 auto;
	height: auto;
	margin: 0 0 0 var(--ss-spacing-m);
	border: .0625rem solid var(--ss-border-color);
	border-radius: var(--ss-border-radius)
}

.ss-content .ss-search .ss-addable svg {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 1 auto;
	width: .75rem;
	height: .75rem;
	margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m)
}

.ss-content .ss-search .ss-addable svg path {
	fill: none;
	stroke: var(--ss-font-color);
	stroke-width: 18;
	stroke-linecap: round;
	stroke-linejoin: round
}

.ss-content.ss-dir-above .ss-search {
	border-bottom: none;
	border-top: .0625rem solid var(--ss-border-color)
}

.ss-content .ss-list {
	flex: 1 1 auto;
	height: auto;
	overflow-x: hidden;
	overflow-y: auto;
    background: white;
}

.ss-content .ss-list .ss-error {
	color: var(--ss-error-color);
	padding: var(--ss-spacing-l)
}

.ss-content .ss-list .ss-searching {
	color: var(--ss-font-color);
	padding: var(--ss-spacing-l)
}

.ss-content .ss-list .ss-optgroup .ss-option {
	transition: max-height var(--ss-animation-timing) ease, opacity
		var(--ss-animation-timing) ease, padding-top
		var(--ss-animation-timing) ease, padding-bottom
		var(--ss-animation-timing) ease, margin-top var(--ss-animation-timing)
		ease, margin-bottom var(--ss-animation-timing) ease
}

.ss-content .ss-list .ss-optgroup.ss-open .ss-option {
	max-height: 6.25rem;
	opacity: 1;
	overflow: visible
}

.ss-content .ss-list .ss-optgroup.ss-close .ss-option {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	max-height: 0;
	opacity: 0;
	overflow: hidden
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
		var(--ss-spacing-l)
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text
	{
	flex: 1 1 auto;
	font-weight: 700;
	color: var(--ss-font-color)
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) {
	cursor: pointer
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions
	{
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--ss-spacing-m)
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall
	{
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	cursor: pointer
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover
	{
	opacity: .5
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path
	{
	stroke: var(--ss-error-color)
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span
	{
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 60%;
	text-align: center;
	padding: 0 var(--ss-spacing-s) 0 0
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg
	{
	flex: 0 1 auto;
	width: .8125rem;
	height: .8125rem
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path
	{
	fill: none;
	stroke: var(--ss-success-color);
	stroke-linecap: round;
	stroke-linejoin: round
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child
	{
	stroke-width: 5
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child
	{
	stroke-width: 11
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable
	{
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	cursor: pointer
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow
	{
	flex: 1 1 auto;
	width: .625rem;
	height: .625rem
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path
	{
	fill: none;
	stroke: var(--ss-font-color);
	stroke-width: 18;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition-timing-function: ease-out;
	transition: var(--ss-animation-timing)
}

.ss-content .ss-list .ss-optgroup .ss-option {
	padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s)
		calc(var(--ss-spacing-l)* 3)
}

.ss-content .ss-list .ss-option {
	display: flex;
	align-items: center;
	min-height: var(--ss-option-height);
	padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
		var(--ss-spacing-l);
	white-space: normal;
	color: var(--ss-font-color);
	cursor: pointer;
	user-select: none
}

.ss-content .ss-list .ss-option:hover:not(.ss-disabled) {
	color: var(--ss-bg-color);
	background-color: var(--ss-primary-color);
	border-left: .3125rem solid var(--ss-primary-color);
	transition: border-left var(--ss-animation-timing) ease
}

.ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected
	{
	color: var(--ss-bg-color);
	background-color: var(--ss-primary-color)
}

.ss-content .ss-list .ss-option.ss-disabled {
	cursor: not-allowed;
	background-color: var(--ss-disabled-color)
}

.ss-content .ss-list .ss-option.ss-disabled:hover {
	color: var(--ss-font-color)
}

.ss-content .ss-list .ss-option .ss-search-highlight {
	display: inline-block;
	background-color: var(--ss-highlight-color)
}

.ss-content .ss-list .ss-search {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
		var(--ss-spacing-l)
}

/* === critical.css === */

*, ::after, ::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

a {
	text-decoration: none;
	color: inherit
}

ol, ul {
	list-style: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

button, input, select, textarea {
	border: none;
	outline: 0
}

button {
	background: 0 0;
	cursor: pointer;
	color: var(--color-B100)
}

form {
	display: block
}

fieldset {
	margin: 0;
	padding: 0
}

input[type=number] {
	-moz-appearance: textfield;
	-webkit-appearance: none
}

img {
	max-width: 100%;
	height: auto;
	display: block
}

iframe {
	border: none
}

a:focus, a:hover {
	outline: 0
}

@font-face {
	font-family: OpenSans;
	src: url(../fonts/OpenSans-Bold.woff2) format("woff2"),
		url(../fonts/OpenSans-Bold.woff) format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: OpenSans;
	src: url(../fonts/OpenSans-Light.woff2) format("woff2"),
		url(../fonts/OpenSans-Light.woff) format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: OpenSans;
	src: url(../fonts/OpenSans-Medium.woff2) format("woff2"),
		url(../fonts/OpenSans-Medium.woff) format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: OpenSans;
	src: url(../fonts/OpenSans-Regular.woff2) format("woff2"),
		url(../fonts/OpenSans-Regular.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: OpenSans;
	src: url(../fonts/OpenSans-SemiBold.woff2) format("woff2"),
		url(../fonts/OpenSans-SemiBold.woff) format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap
}

:root {
	--ss-primary-color: #4e10ae;
	--ss-bg-color: #ffffff;
	--ss-font-color: #4d4d4d;
	--ss-placeholder-color: #8d8d8d;
	--ss-disabled-color: #dcdee2;
	--ss-border-color: #dcdee2;
	--ss-highlight-color: #fffb8c;
	--ss-focus-color: var(--ss-primary-color);
	--ss-success-color: #00b755;
	--ss-error-color: #dc3545;
	--ss-main-height: 2.5rem;
	--ss-content-height: 22rem;
	--ss-search-height: 2.5rem;
	--ss-option-height: auto;
	--ss-spacing-l: 0.5625rem;
	--ss-spacing-m: 0.4375rem;
	--ss-spacing-s: 0.3125rem;
	--ss-animation-timing: 0.2s;
	--ss-border-radius: 0.25rem;
	--color-background: #FFF;
	--color-L100: #FFF;
	--color-static-light: #FFFFFF;
	--color-static-grey: #E0E3E8;
	--color-static-dark: #171D23;
	--color-D100: #171D23;
	--color-D80: #002A3A;
	--color-D60: #636F7D;
	--color-D50: #707B88;
	--color-D40: #7E8894;
	--color-D30: #99A1AB;
	--color-D20: #B3BAC3;
	--color-D15: #DADDE2;
	--color-D10: #F5F5F5;
	--color-D06: #F6F5F4;
	--color-G300: #11693F;
	--color-G200: #0F9D44;
	--color-G100: #0DD149;
	--color-G30: #C3F4D3;
	--color-G06: #EEFCF2;
	--color-B300: #4e10ae;
	--color-B200: #0685C3;
	--color-B100: #7001ff;
	--color-B30: #B6E6FC;
	--color-B06: #F0FAFF;
	--color-O300: #725122;
	--color-O200: #B97311;
	--color-O100: #FF9500;
	--color-O30: #FFE1B8;
	--color-O06: #FFF9F0;
	--color-V300: #2C3278;
	--color-V200: #3E3DA7;
	--color-V100: #5047D7;
	--color-V30: #CBC9F3;
	--color-V06: #F3F2FC;
	--color-R300: #59212D;
	--color-R200: #8D1F25;
	--color-R100: #C11D1D;
	--color-R30: #F4BEBE;
	--color-R06: #FDF2F2;
	--dialog-backdrop-bgColor: #f5f5f5
}

.size-50 {
	font-size: 3.125rem
}

@media ( max-width :1240px) {
	.size-50 {
		font-size: 1.875rem
	}
}

@media ( max-width :991px) {
	.size-50 {
		font-size: 1.875rem
	}
}

.size-28 {
	font-size: 1.75rem
}

@media ( max-width :1240px) {
	.size-28 {
		font-size: 1.5rem
	}
}

@media ( max-width :991px) {
	.size-28 {
		font-size: 1.3125rem
	}
}

.size-22 {
	font-size: 1.375rem
}

@media ( max-width :1240px) {
	.size-22 {
		font-size: 1.25rem
	}
}

@media ( max-width :991px) {
	.size-22 {
		font-size: 1.125rem
	}
}

.size-20 {
	font-size: 1.25rem
}

@media ( max-width :1240px) {
	.size-20 {
		font-size: 1.25rem
	}
}

@media ( max-width :991px) {
	.size-20 {
		font-size: 1.125rem
	}
}

.size-16 {
	font-size: 1rem
}

@media ( max-width :1240px) {
	.size-16 {
		font-size: 1rem
	}
}

@media ( max-width :991px) {
	.size-16 {
		font-size: 1rem
	}
}

.size-14 {
	font-size: .875rem
}

@media ( max-width :1240px) {
	.size-14 {
		font-size: .875rem
	}
}

@media ( max-width :991px) {
	.size-14 {
		font-size: .8125rem
	}
}

.size-13 {
	font-size: .8125rem
}

@media ( max-width :1240px) {
	.size-13 {
		font-size: .8125rem
	}
}

@media ( max-width :991px) {
	.size-13 {
		font-size: .75rem
	}
}

.size-12 {
	font-size: .75rem
}

@media ( max-width :1240px) {
	.size-12 {
		font-size: .75rem
	}
}

@media ( max-width :991px) {
	.size-12 {
		font-size: .75rem
	}
}

.size-10 {
	font-size: .625rem
}

@media ( max-width :1240px) {
	.size-10 {
		font-size: .625rem
	}
}

@media ( max-width :991px) {
	.size-10 {
		font-size: .625rem
	}
}

.pt-40 {
	padding-top: 2.5rem
}

@media ( max-width :1240px) {
	.pt-40 {
		padding-top: 1.875rem
	}
}

@media ( max-width :991px) {
	.pt-40 {
		padding-top: 1.25rem
	}
}

.pr-40 {
	padding-right: 2.5rem
}

@media ( max-width :1240px) {
	.pr-40 {
		padding-right: 1.875rem
	}
}

@media ( max-width :991px) {
	.pr-40 {
		padding-right: 1.25rem
	}
}

.pb-40 {
	padding-bottom: 2.5rem
}

@media ( max-width :1240px) {
	.pb-40 {
		padding-bottom: 1.875rem
	}
}

@media ( max-width :991px) {
	.pb-40 {
		padding-bottom: 1.25rem
	}
}

.pl-40 {
	padding-left: 2.5rem
}

@media ( max-width :1240px) {
	.pl-40 {
		padding-left: 1.875rem
	}
}

@media ( max-width :991px) {
	.pl-40 {
		padding-left: 1.25rem
	}
}

.p-40 {
	padding: 2.5rem
}

@media ( max-width :1240px) {
	.p-40 {
		padding: 1.875rem
	}
}

@media ( max-width :991px) {
	.p-40 {
		padding: 1.25rem
	}
}

.pt-32 {
	padding-top: 2rem
}

@media ( max-width :1240px) {
	.pt-32 {
		padding-top: 1.5rem
	}
}

@media ( max-width :991px) {
	.pt-32 {
		padding-top: 1.5rem
	}
}

.pr-32 {
	padding-right: 2rem
}

@media ( max-width :1240px) {
	.pr-32 {
		padding-right: 1.5rem
	}
}

@media ( max-width :991px) {
	.pr-32 {
		padding-right: 1.5rem
	}
}

.pb-32 {
	padding-bottom: 2rem
}

@media ( max-width :1240px) {
	.pb-32 {
		padding-bottom: 1.5rem
	}
}

@media ( max-width :991px) {
	.pb-32 {
		padding-bottom: 1.5rem
	}
}

.pl-32 {
	padding-left: 2rem
}

@media ( max-width :1240px) {
	.pl-32 {
		padding-left: 1.5rem
	}
}

@media ( max-width :991px) {
	.pl-32 {
		padding-left: 1.5rem
	}
}

.p-32 {
	padding: 2rem
}

@media ( max-width :1240px) {
	.p-32 {
		padding: 1.5rem
	}
}

@media ( max-width :991px) {
	.p-32 {
		padding: 1.5rem
	}
}

.pt-24 {
	padding-top: 1.5rem
}

@media ( max-width :1240px) {
	.pt-24 {
		padding-top: 1rem
	}
}

@media ( max-width :991px) {
	.pt-24 {
		padding-top: 1rem
	}
}

.pr-24 {
	padding-right: 1.5rem
}

@media ( max-width :1240px) {
	.pr-24 {
		padding-right: 1rem
	}
}

@media ( max-width :991px) {
	.pr-24 {
		padding-right: 1rem
	}
}

.pb-24 {
	padding-bottom: 1.5rem
}

@media ( max-width :1240px) {
	.pb-24 {
		padding-bottom: 1rem
	}
}

@media ( max-width :991px) {
	.pb-24 {
		padding-bottom: 1rem
	}
}

.pl-24 {
	padding-left: 1.5rem
}

@media ( max-width :1240px) {
	.pl-24 {
		padding-left: 1rem
	}
}

@media ( max-width :991px) {
	.pl-24 {
		padding-left: 1rem
	}
}

.p-24 {
	padding: 1.5rem
}

@media ( max-width :1240px) {
	.p-24 {
		padding: 1rem
	}
}

@media ( max-width :991px) {
	.p-24 {
		padding: 1rem
	}
}

.pt-12 {
	padding-top: .75rem
}

@media ( max-width :1240px) {
	.pt-12 {
		padding-top: .75rem
	}
}

@media ( max-width :991px) {
	.pt-12 {
		padding-top: .75rem
	}
}

.pr-12 {
	padding-right: .75rem
}

@media ( max-width :1240px) {
	.pr-12 {
		padding-right: .75rem
	}
}

@media ( max-width :991px) {
	.pr-12 {
		padding-right: .75rem
	}
}

.pb-12 {
	padding-bottom: .75rem
}

@media ( max-width :1240px) {
	.pb-12 {
		padding-bottom: .75rem
	}
}

@media ( max-width :991px) {
	.pb-12 {
		padding-bottom: .75rem
	}
}

.pl-12 {
	padding-left: .75rem
}

@media ( max-width :1240px) {
	.pl-12 {
		padding-left: .75rem
	}
}

@media ( max-width :991px) {
	.pl-12 {
		padding-left: .75rem
	}
}

.p-12 {
	padding: .75rem
}

@media ( max-width :1240px) {
	.p-12 {
		padding: .75rem
	}
}

@media ( max-width :991px) {
	.p-12 {
		padding: .75rem
	}
}

.pt-8 {
	padding-top: .5rem
}

@media ( max-width :1240px) {
	.pt-8 {
		padding-top: .5rem
	}
}

@media ( max-width :991px) {
	.pt-8 {
		padding-top: .5rem
	}
}

.pr-8 {
	padding-right: .5rem
}

@media ( max-width :1240px) {
	.pr-8 {
		padding-right: .5rem
	}
}

@media ( max-width :991px) {
	.pr-8 {
		padding-right: .5rem
	}
}

.pb-8 {
	padding-bottom: .5rem
}

@media ( max-width :1240px) {
	.pb-8 {
		padding-bottom: .5rem
	}
}

@media ( max-width :991px) {
	.pb-8 {
		padding-bottom: .5rem
	}
}

.pl-8 {
	padding-left: .5rem
}

@media ( max-width :1240px) {
	.pl-8 {
		padding-left: .5rem
	}
}

@media ( max-width :991px) {
	.pl-8 {
		padding-left: .5rem
	}
}

.p-8 {
	padding: .5rem
}

@media ( max-width :1240px) {
	.p-8 {
		padding: .5rem
	}
}

@media ( max-width :991px) {
	.p-8 {
		padding: .5rem
	}
}

.pt-4 {
	padding-top: .25rem
}

@media ( max-width :1240px) {
	.pt-4 {
		padding-top: .25rem
	}
}

@media ( max-width :991px) {
	.pt-4 {
		padding-top: .25rem
	}
}

.pr-4 {
	padding-right: .25rem
}

@media ( max-width :1240px) {
	.pr-4 {
		padding-right: .25rem
	}
}

@media ( max-width :991px) {
	.pr-4 {
		padding-right: .25rem
	}
}

.pb-4 {
	padding-bottom: .25rem
}

@media ( max-width :1240px) {
	.pb-4 {
		padding-bottom: .25rem
	}
}

@media ( max-width :991px) {
	.pb-4 {
		padding-bottom: .25rem
	}
}

.pl-4 {
	padding-left: .25rem
}

@media ( max-width :1240px) {
	.pl-4 {
		padding-left: .25rem
	}
}

@media ( max-width :991px) {
	.pl-4 {
		padding-left: .25rem
	}
}

.p-4 {
	padding: .25rem
}

@media ( max-width :1240px) {
	.p-4 {
		padding: .25rem
	}
}

@media ( max-width :991px) {
	.p-4 {
		padding: .25rem
	}
}

.mt-40 {
	margin-top: 2.5rem
}

@media ( max-width :1240px) {
	.mt-40 {
		margin-top: 1.875rem
	}
}

@media ( max-width :991px) {
	.mt-40 {
		margin-top: 1.25rem
	}
}

.mr-40 {
	margin-right: 2.5rem
}

@media ( max-width :1240px) {
	.mr-40 {
		margin-right: 1.875rem
	}
}

@media ( max-width :991px) {
	.mr-40 {
		margin-right: 1.25rem
	}
}

.mb-40 {
	margin-bottom: 2.5rem
}

@media ( max-width :1240px) {
	.mb-40 {
		margin-bottom: 1.875rem
	}
}

@media ( max-width :991px) {
	.mb-40 {
		margin-bottom: 1.25rem
	}
}

.ml-40 {
	margin-left: 2.5rem
}

@media ( max-width :1240px) {
	.ml-40 {
		margin-left: 1.875rem
	}
}

@media ( max-width :991px) {
	.ml-40 {
		margin-left: 1.25rem
	}
}

.mt-32 {
	margin-top: 2rem
}

@media ( max-width :1240px) {
	.mt-32 {
		margin-top: 1.5rem
	}
}

@media ( max-width :991px) {
	.mt-32 {
		margin-top: 1.5rem
	}
}

.mr-32 {
	margin-right: 2rem
}

@media ( max-width :1240px) {
	.mr-32 {
		margin-right: 1.5rem
	}
}

@media ( max-width :991px) {
	.mr-32 {
		margin-right: 1.5rem
	}
}

.mb-32 {
	margin-bottom: 2rem
}

@media ( max-width :1240px) {
	.mb-32 {
		margin-bottom: 1.5rem
	}
}

@media ( max-width :991px) {
	.mb-32 {
		margin-bottom: 1.5rem
	}
}

.ml-32 {
	margin-left: 2rem
}

@media ( max-width :1240px) {
	.ml-32 {
		margin-left: 1.5rem
	}
}

@media ( max-width :991px) {
	.ml-32 {
		margin-left: 1.5rem
	}
}

.mt-24 {
	margin-top: 1.5rem
}

@media ( max-width :1240px) {
	.mt-24 {
		margin-top: 1rem
	}
}

@media ( max-width :991px) {
	.mt-24 {
		margin-top: 1rem
	}
}

.mr-24 {
	margin-right: 1.5rem
}

@media ( max-width :1240px) {
	.mr-24 {
		margin-right: 1rem
	}
}

@media ( max-width :991px) {
	.mr-24 {
		margin-right: 1rem
	}
}

.mb-24 {
	margin-bottom: 1.5rem
}

@media ( max-width :1240px) {
	.mb-24 {
		margin-bottom: 1rem
	}
}

@media ( max-width :991px) {
	.mb-24 {
		margin-bottom: 1rem
	}
}

.ml-24 {
	margin-left: 1.5rem
}

@media ( max-width :1240px) {
	.ml-24 {
		margin-left: 1rem
	}
}

@media ( max-width :991px) {
	.ml-24 {
		margin-left: 1rem
	}
}

.mt-12 {
	margin-top: .75rem
}

@media ( max-width :1240px) {
	.mt-12 {
		margin-top: .75rem
	}
}

@media ( max-width :991px) {
	.mt-12 {
		margin-top: .75rem
	}
}

.mr-12 {
	margin-right: .75rem
}

@media ( max-width :1240px) {
	.mr-12 {
		margin-right: .75rem
	}
}

@media ( max-width :991px) {
	.mr-12 {
		margin-right: .75rem
	}
}

.mb-12 {
	margin-bottom: .75rem
}

@media ( max-width :1240px) {
	.mb-12 {
		margin-bottom: .75rem
	}
}

@media ( max-width :991px) {
	.mb-12 {
		margin-bottom: .75rem
	}
}

.ml-12 {
	margin-left: .75rem
}

@media ( max-width :1240px) {
	.ml-12 {
		margin-left: .75rem
	}
}

@media ( max-width :991px) {
	.ml-12 {
		margin-left: .75rem
	}
}

.mt-8 {
	margin-top: .5rem
}

@media ( max-width :1240px) {
	.mt-8 {
		margin-top: .5rem
	}
}

@media ( max-width :991px) {
	.mt-8 {
		margin-top: .5rem
	}
}

.mr-8 {
	margin-right: .5rem
}

@media ( max-width :1240px) {
	.mr-8 {
		margin-right: .5rem
	}
}

@media ( max-width :991px) {
	.mr-8 {
		margin-right: .5rem
	}
}

.mb-8 {
	margin-bottom: .5rem
}

@media ( max-width :1240px) {
	.mb-8 {
		margin-bottom: .5rem
	}
}

@media ( max-width :991px) {
	.mb-8 {
		margin-bottom: .5rem
	}
}

.ml-8 {
	margin-left: .5rem
}

@media ( max-width :1240px) {
	.ml-8 {
		margin-left: .5rem
	}
}

@media ( max-width :991px) {
	.ml-8 {
		margin-left: .5rem
	}
}

.mt-4 {
	margin-top: .25rem
}

@media ( max-width :1240px) {
	.mt-4 {
		margin-top: .25rem
	}
}

@media ( max-width :991px) {
	.mt-4 {
		margin-top: .25rem
	}
}

.mr-4 {
	margin-right: .25rem
}

@media ( max-width :1240px) {
	.mr-4 {
		margin-right: .25rem
	}
}

@media ( max-width :991px) {
	.mr-4 {
		margin-right: .25rem
	}
}

.mb-4 {
	margin-bottom: .25rem
}

@media ( max-width :1240px) {
	.mb-4 {
		margin-bottom: .25rem
	}
}

@media ( max-width :991px) {
	.mb-4 {
		margin-bottom: .25rem
	}
}

.ml-4 {
	margin-left: .25rem
}

@media ( max-width :1240px) {
	.ml-4 {
		margin-left: .25rem
	}
}

@media ( max-width :991px) {
	.ml-4 {
		margin-left: .25rem
	}
}

.h-60 {
	height: 3.75rem
}

@media ( max-width :1240px) {
	.h-60 {
		height: 3.5rem
	}
}

@media ( max-width :991px) {
	.h-60 {
		height: 3rem
	}
}

.flex {
	display: flex
}

.inline-flex {
	display: inline-flex
}

.flex-column {
	flex-direction: column
}

.align-center {
	align-items: center
}

.align-start {
	align-items: flex-start
}

.align-end {
	align-items: flex-end
}

.justify-center {
	justify-content: center
}

.justify-between {
	justify-content: space-between
}

.w-full {
	width: 100%
}

@media ( min-width :991px) {
	.hidden-desktop {
		display: none !important
	}
}

@media ( max-width :991px) {
	.hidden-mobile {
		display: none !important
	}
}

body {
	margin: 0;
	font-family: OpenSans, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-D100);
	background-color: var(--color-D06)
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: inherit
}

a {
	text-decoration: none;
	color: inherit;
	transition: all .25s linear
}

strong {
	font-weight: 700
}

em {
	font-style: italic
}

picture {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.w-16 {
	width: 1rem
}

.color-gray {
	color: var(--color-D60)
}

.color-green {
	color: var(--color-G100)
}

.link-blue {
	color: var(--color-B100)
}

.link-blue:hover {
	color: var(--color-B200)
}

.gap-24 {
	gap: 1.5rem
}

@media ( max-width :991px) {
	.no-br-tablet br {
		display: none
	}
}

.container {
	width: 100%;
	margin: 0 auto;
	max-width: 82.5rem;
	padding: 0 1.875rem
}

@media ( max-width :767px) {
	.container {
		padding: 0 1rem
	}
}

.text-center {
	text-align: center
}

.text-left {
	text-align: left
}

.text-right {
	text-align: right
}

.fw-300 {
	font-weight: 300
}

.fw-500 {
	font-weight: 500
}

.fw-600 {
	font-weight: 600
}

.fw-700 {
	font-weight: 700
}

.line-h-1-1 {
	line-height: 1.1
}

.line-h-1-2 {
	line-height: 1.2
}

.text-uppercase {
	text-transform: uppercase
}

@media ( max-width :991px) {
	.flex-column-mobile {
		flex-direction: column;
		gap: .75rem;
		align-items: flex-start
	}
}

.gap-4 {
	gap: .25rem
}

.gap-12 {
	gap: .75rem
}

.gap-16 {
	gap: 1rem
}

.h-46 {
	height: 2.875rem !important
}

.button {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	transition: all .3s cubic-bezier(.46, 0, .03, .99);
	outline: 0;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	border-color: transparent;
	height: 2.25rem;
	padding: 0 .75rem;
	border-radius: .5rem;
	font-size: .875rem;
	background-color: var(--color-D10);
	color: var(--color-D100)
}

.button.h-60 {
	height: 3.75rem
}

.button.h-44 {
	height: 2.75rem
}

@media ( min-width :991px) {
	.button:hover {
		background: var(--color-D20);
		color: var(--color-D100)
	}
}

header {
	min-height: 5.5rem;
	border-bottom: .0625rem solid var(--color-D10)
}

@media ( max-width :1280px) {
	header {
		min-height: 3.75rem
	}
}

.header-logo {
	gap: .5rem;
	width: 8.25rem
}

.header-logo picture {
	width: auto;
	flex-shrink: 0
}

.header-logo svg {
	margin-top: .375rem
}

.header-menu {
	margin-left: 2.25rem
}

@media ( max-width :1300px) {
	.header-menu {
		margin-left: 1.25rem
	}
}

@media ( max-width :1200px) {
	.header-menu {
		display: none
	}
}

.header-menu__link {
	height: 5.5rem;
	padding: 0 1.375rem;
	font-size: .875rem;
	font-weight: 600;
	display: flex;
	align-items: center
}

.header-menu__link:hover {
	color: var(--color-B100)
}

.header-menu__link svg {
	display: none
}

@media ( max-width :1200px) {
	.header-menu__link svg {
		display: block;
		color: var(--color-static-dark);
		width: 1.25rem;
		height: 1.25rem;
		transition: all .25s linear
	}
}

@media ( max-width :1300px) {
	.header-menu__link {
		padding: 0 .9375rem
	}
}

.header-submenu {
	display: none
}

.header-event {
	gap: .75rem
}

.search-button {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: .75rem;
	padding: .625rem
}

.header-search {
	opacity: 0;
	pointer-events: none
}

.button-entry svg {
	display: none
}

@media ( max-width :1200px) {
	.button-entry {
		font-size: 0 !important;
		padding: .625rem;
		width: 2.25rem;
		height: 2.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		background: 0 0 !important
	}
	.button-entry svg {
		display: block
	}
}

.hamburger {
	display: none
}

@media ( max-width :1200px) {
	.hamburger {
		width: 2.25rem;
		padding: 0 .4375rem;
		border-radius: .75rem;
		flex-shrink: 0;
		margin-right: .75rem;
		background: var(--color-D10);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center
	}
}

.hamburger-show {
	display: none
}

.input {
	width: 100%;
	background: var(--color-D10);
	height: 3.625rem;
	font-family: inherit;
	font-size: inherit;
	border-radius: .5rem;
	padding: 0 1.25rem
}

.button-search {
	transition: all .3s cubic-bezier(.46, 0, .03, .99);
	border: .0625rem solid transparent;
	outline: 0;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	height: 3.625rem;
	width: 3.625rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	background: var(--color-B300);
	padding: 1.125rem;
	border-radius: .5rem;
	color: #fff
}

section {
	padding: 2rem 0
}

body.home main {
    --home-section-space: 2rem;
    --home-heading-space: 1.5rem;
}

body.home main > section {
    padding-top: var(--home-section-space);
    padding-bottom: var(--home-section-space);
}

body.home main > section > .container > .flex.align-center.justify-between.mb-24,
body.home main > section > .container > h3.mb-24,
body.home main > section > .container > h1.mb-24 {
    margin-bottom: var(--home-heading-space);
}

body.home main > section > .container > .flex.align-center.justify-between.mb-24 + .card-credit,
body.home main > section > .container > .flex.align-center.justify-between.mb-24 + .car-grid,
body.home main > section > .container > .flex.align-center.justify-between.mb-24 + .credit-item-blocks,
body.home main > section > .container > .flex.align-center.justify-between.mb-24 + .result-items {
    margin-top: 0;
}

body.home .car-grid,
body.home .result-items {
    margin-top: 0;
}

@media (max-width: 767px) {
    body.home main {
        --home-section-space: 1.5rem;
        --home-heading-space: 1rem;
    }
}

/* ==========================================================================
   ПЛИТКИ КАТЕГОРИЙ НА ГЛАВНОЙ (.grid-product) — порядок и легенда
   --------------------------------------------------------------------------
   Раскладка реализована через CSS Grid + grid-template-areas. Чтобы
   ПЕРЕСТАВИТЬ плитки — меняй имена областей внутри строк grid-template-areas
   ниже (3 объявления: mobile / tablet ≥768px / desktop ≥1024px).
   HTML в front-page.php (BLOCK-1.1 / BLOCK-1.2) трогать НЕ нужно — позиция
   плитки на экране определяется только CSS.

   ── Соответствие областей и плиток ──────────────────────────────────────
     Имя области              CSS-класс           Что за плитка / куда ведёт
     ─────────────────────── ─────────────────── ───────────────────────────
     banner                   .grid-product-one     Quick-search «первый займ»
     osago                    .grid-product-two     Ипотека
     loans                    .grid-product-three   Автокредит
     deposits                 .grid-product-four    Микрокредит
     credit                   .grid-product-five    Кредиты
     mortgageInsurance        .grid-product-six     Кредитные карты
     creditsRating            .grid-product-seven   Потребительский кредит
     strahovanieNedvizhimosti .grid-product-eight   Бизнес-кредит
     vzr                      .grid-product-nine    Вклады
     kasko                    .grid-product-ten     Новостройки
     mortgage                 .grid-product-eleven  Овердрафт
     sportInsurance           .grid-product-twelve  Интернет-провайдеры
     serviceMenu              .grid-product-thirteen Все услуги (модалка)

   Имена областей — наследие старого шаблона (osago, kasko, vzr и т.п.).
   На семантику смотреть не нужно — это просто слоты сетки.

   ── Как читать grid-template-areas ──────────────────────────────────────
   Каждая строка в кавычках — один РЯД сетки (сверху вниз).
   Слова через пробел — КОЛОНКИ слева направо.
   Одно и то же имя в соседних клетках = плитка занимает обе клетки (слитно).
   Каждое имя ОБЯЗАНО присутствовать в карте, иначе плитка не отрендерится.

   ── Текущие 3 карты (mobile / tablet / desktop) ─────────────────────────
   • mobile (по умолчанию): 3 колонки × 6 рядов
   • tablet ≥768px:         8 колонок × 2 ряда
   • desktop ≥1024px:       8 колонок × 2 ряда (та же раскладка, что tablet)
   ========================================================================== */
.grid-product {
	display: grid;
	grid-column-gap: .5rem;
	grid-row-gap: .5rem;
	flex-grow: 1;
	grid-template-areas: "banner banner banner"
						 "osago loans credit"
						 "osago loans mortgageInsurance"
						 "vzr deposits deposits"
						 "creditsRating sportInsurance mortgage"
						 "strahovanieNedvizhimosti kasko serviceMenu"
}

@media ( min-width :1024px) {
	.grid-product {
		grid-template-areas:
			"banner osago loans mortgageInsurance deposits strahovanieNedvizhimosti kasko sportInsurance"
			"banner osago loans credit creditsRating vzr mortgage serviceMenu"
	}
}

@media ( min-width :768px) {
	.grid-product {
		grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"banner osago loans mortgageInsurance deposits strahovanieNedvizhimosti kasko sportInsurance"
			"banner osago loans credit creditsRating vzr mortgage serviceMenu";
		grid-template-rows: repeat(2, 1.5fr);
		height: 12.875rem
	}
}

@media ( max-width :1280px) {
	.grid-product {
		min-width: 90rem
	}
}

@media ( max-width :767px) {
	.grid-product {
		min-width: auto
	}
}

@media ( max-width :1280px) {
	.grid-product-container {
		overflow: auto;
		margin-left: -1.875rem;
		margin-right: -1.875rem;
		padding-left: 1.875rem;
		padding-right: 1.875rem
	}
	.grid-product-container::-webkit-scrollbar {
		display: none
	}
}

@media ( max-width :767px) {
	.grid-product-container {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0
	}
}

.grid-product__item {
	height: 100%;
	min-height: 5.75rem;
	min-width: 6.375rem;
	position: relative;
	overflow: hidden;
	padding: .75rem !important;
	transition: all .1s linear;
	border-color: var(--color-D10);
	border-radius: 1rem;
	background: var(--color-D10);
	line-height: 1.3
}

@media ( min-width :768px) {
	.grid-product__item {
		min-width: 9.375rem
	}
}

.grid-product__item:hover {
	filter: brightness(93%)
}

.grid-product__item div {
	position: relative;
	z-index: 1
}

.grid-product-one {
	grid-area: banner;
	background: linear-gradient(180deg, #5047d7, #3e3da7);
	height: 100%;
	min-height: 5.75rem;
	min-width: 6.375rem;
	position: relative;
	overflow: hidden;
	padding: .75rem !important;
	transition: all .1s linear;
	color: var(--color-L100)
}

.cat-pic {
	height: 100%;
	position: absolute;
	z-index: 0 !important;
	bottom: 0;
	right: 0;
	display: flex
}

@media ( min-width :768px) {
	.cat-pic {
		height: 6.875rem
	}
}

.cat-pic img {
	max-height: 100%
}

.grid-product-pic {
	height: 7.1875rem;
	position: absolute;
	z-index: 0;
	bottom: 0;
	right: 0;
	display: flex
}

@media ( min-width :768px) {
	.grid-product-pic {
		height: 7.5rem
	}
}

.grid-product-pic img {
	max-height: 100%
}

.grid-product-two {
	grid-area: osago
}

.grid-product-three {
	grid-area: loans
}

.grid-product-four {
	grid-area: deposits
}

@media ( max-width :768px) {
	.grid-product-four .grid-product-pic {
		height: 6.25rem
	}
}

.grid-product-five {
	grid-area: credit
}

.grid-product-five .grid-product-pic {
	height: 4.3125rem
}

@media ( min-width :768px) {
	.grid-product-five .grid-product-pic {
		height: 6.125rem
	}
}

.grid-product-six {
	grid-area: mortgageInsurance
}

.grid-product-six .grid-product-pic {
	height: 5rem
}

@media ( min-width :768px) {
	.grid-product-six .grid-product-pic {
		height: 4.6875rem
	}
}

.grid-product-seven {
	grid-area: creditsRating
}

.grid-product-seven .grid-product-pic {
	height: 3.4375rem
}

@media ( min-width :768px) {
	.grid-product-seven .grid-product-pic {
		height: 4.6875rem
	}
}

.grid-product-eight {
	grid-area: strahovanieNedvizhimosti
}

.grid-product-eight .grid-product-pic {
	height: 5.625rem
}

@media ( min-width :768px) {
	.grid-product-eight .grid-product-pic {
		height: 6.5625rem
	}
}

.grid-product-nine {
	grid-area: vzr
}

@media ( max-width :768px) {
	.grid-product-nine .grid-product-pic {
		height: 6.25rem
	}
}

.grid-product-ten {
	grid-area: kasko
}

@media ( max-width :768px) {
	.grid-product-ten .grid-product-pic {
		height: 5.625rem
	}
}

.grid-product-eleven {
	grid-area: mortgage
}

@media ( max-width :768px) {
	.grid-product-eleven .grid-product-pic {
		height: 5.3125rem
	}
}

.grid-product-twelve {
	grid-area: sportInsurance
}

@media ( max-width :768px) {
	.grid-product-twelve .grid-product-pic {
		height: 5.9375rem
	}
}

.grid-product-thirteen {
	grid-area: serviceMenu
}

.prize {
	background: var(--color-V100);
	height: 1rem;
	border-radius: 1.25rem;
	padding: 0 .1875rem;
	margin-top: .25rem;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content
}

.home-main {
	display: flex;
	flex-wrap: nowrap;
	align-items: normal;
	width: 100%;
	column-gap: 1.5rem;
	row-gap: 1.5rem
}

@media ( max-width :1024px) {
	.home-main {
		flex-wrap: wrap
	}
}

.home-main__item {
	flex-basis: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: normal;
	width: 100%;
	flex-direction: column;
	gap: 1rem
}

@media ( min-width :768px) {
	.home-main__item {
		flex-basis: calc(50% - .75rem)
	}
}

@media ( min-width :1024px) {
	.home-main__item {
		gap: 1.5rem;
		flex-basis: calc(33.3333333333% - 1rem)
	}
}

.card {
	padding: 1rem;
	border-radius: 1rem;
	background: #fff;
	min-height: 13rem;
	height: 100%;
	display: flex;
	flex-direction: column
}

.course-container {
	margin-left: -1rem;
	margin-right: -1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	border-top: .0625rem solid var(--color-D10);
	padding-top: .5rem;
	margin-top: .5rem
}

.curse-row {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.course-column_main {
	display: flex;
	padding: .5rem 0;
	gap: .5rem
}

.course-column_main img {
	flex-shrink: 0;
	width: 1.75rem;
	border-radius: 50%
}

.rotate-45 svg {
	transform: rotate(-45deg);
	width: 1.375rem
}

.course-direction {
	display: flex;
	align-items: center
}

.home-main-reviews {
	position: relative;
	padding: 1rem;
	border-radius: 1rem;
	display: flex;
	width: 100%;
	border: .0625rem solid var(--color-B30);
	height: 6.25rem;
	background-color: var(--color-B06)
}

.home-main-reviews:hover {
	color: var(--color-B200)
}

.home-main-reviews-pic {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%
}

.home-main-reviews-pic img {
	height: 100%
}

.home-main-content {
	display: flex;
	flex-wrap: nowrap;
	align-items: normal;
	width: 100%;
	flex-direction: column;
	gap: .25rem
}

.home-main__tile {
	display: flex;
	flex-wrap: nowrap;
	align-items: normal;
	width: 100%;
	gap: .5rem
}

.home-main__tile-item {
	flex-basis: calc(33.33333333% - 1rem);
	flex-grow: 1;
	height: 6.25rem;
	padding: 1rem;
	border-radius: 1rem;
	background: #fff;
	position: relative
}

.home-main__tile-item:hover {
	color: var(--color-B200)
}

.home-main__tile-item-icon {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	width: 1.5rem
}

.home-main__item-service {
	align-items: flex-end;
	justify-content: space-around;
	flex-flow: row wrap;
	padding-top: 1.875rem
}

@media ( min-width :1024px) {
	.home-main__item-service {
		height: 17.25rem
	}
}

@media ( max-width :1024px) {
	.home-main__item-service {
		flex-basis: 100%;
		padding-top: 0
	}
}

@media ( max-width :768px) {
	.home-main__item-service {
		display: grid;
		grid-template-columns: repeat(3, 1fr)
	}
}

.home-main-service {
	padding: .25rem;
	position: relative;
	min-height: .0625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .5rem
}

.home-main-service svg {
	width: 1.5rem
}

.home-main-service svg path {
	stroke: var(--color-B100)
}

.home-main-service:nth-child(1) svg path {
	stroke: transparent;
	fill: var(--color-B100)
}

@media ( max-width :768px) {
	.home-main-service {
		flex-basis: auto;
		width: 100%
	}
}

.tag-period {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s cubic-bezier(.46, 0, .03, .99);
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
	user-select: none;
	gap: .375rem;
	font-size: .625rem;
	line-height: 1rem;
	background: var(--color-D100);
	color: var(--color-L100);
	padding: 0 .375rem;
	height: 1rem;
	border-radius: 1.25rem;
	margin-left: 1rem
}

.card-icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .75rem;
	padding: .75rem
}

.tabs {
	display: flex;
	gap: .75rem
}

.tabs-main {
	flex: 1
}

.tab {
	padding: .375rem .75rem;
	transition: color .3s cubic-bezier(.46, 0, .03, .99);
	border-radius: .5rem;
	color: var(--color-D100);
	font-weight: 600;
	cursor: pointer;
	background: var(--color-D10);
	user-select: none
}

.tab:hover {
	background: var(--color-D15);
	color: var(--color-D100)
}

.tab.active {
	background: var(--color-B100);
	color: var(--color-L100)
}

.tab-content {
	display: none
}

.tab-content.active {
	display: block
}

.tab-content__main {
	display: flex;
	flex-wrap: nowrap;
	align-items: normal;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 14.25rem;
	margin-top: 2.25rem;
	gap: .5rem
}

.bid-item {
	font-size: .625rem;
	position: relative;
	display: flex;
	gap: .75rem;
	height: 100%;
	align-items: flex-end;
	justify-content: center
}

.bid-item-bar {
	background-color: var(--color-B06);
	border: .0625rem solid var(--color-B30);
	border-radius: .75rem;
	display: flex;
	width: 2.25rem;
	justify-content: center;
	position: relative
}

.bid-item-bar-number {
	padding: .75rem;
	line-height: 1.25rem;
	font-size: .875rem;
	font-weight: 600;
	position: absolute;
	color: var(--color-D100);
	top: -2.75rem
}

@media ( max-width :991px) {
	.bid-item-bar-number {
		top: -2.125rem
	}
}

.bid-item-avatar {
	position: absolute;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: .75rem;
	padding: 0;
	overflow: hidden;
	left: 0;
	bottom: 0;
	background: var(--color-D10)
}

.tab-content__main.flex-column {
	flex-direction: column;
	margin-top: 1.25rem;
	gap: 1rem
}

.tab-content__main.flex-column .bid-item {
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	height: auto;
	width: 100%;
	position: relative;
	display: flex;
	gap: .75rem
}

.tab-content__main.flex-column .bid-item-bar {
	display: flex;
	height: 2.25rem !important;
	align-items: center;
	justify-content: end;
	width: 100%;
	min-width: fit-content
}

.tab-content__main.flex-column .bid-item-bar-number {
	top: auto !important;
	color: var(--color-B100)
}

.ipoteka-home {
	flex: 1;
	display: flex;
	flex-direction: column
}

.ipoteka-home-pic {
	width: 4.5rem
}

.ipoteka-home-insurance {
	padding: 1rem;
	background: var(--color-G06);
	border-radius: 1rem
}

.ipoteka-bar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem
}

@media ( max-width :1023px) {
	.ipoteka-bar {
		gap: .75rem
	}
}

.ipoteka-bar__item {
	display: flex;
	align-items: center;
	gap: .75rem
}

.ipoteka-bar__value {
	width: 50%
}

.ipoteka-bar__line {
	background-color: var(--color-B06);
	border: .0625rem solid var(--color-B30);
	border-radius: .75rem;
	display: flex;
	height: 2.25rem;
	align-items: center;
	justify-content: end;
	min-width: fit-content;
	margin-right: 0;
	margin-left: auto
}

.ipoteka-bar__number {
	padding: .75rem;
	line-height: 1.25rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--color-B100)
}

@media ( max-width :1023px) {
	.home-main-monitor {
		flex-wrap: inherit;
		overflow: auto;
		margin-left: -1rem;
		margin-right: -1rem;
		padding-left: 1rem;
		width: auto;
		padding-right: 1rem
	}
	.home-main-monitor .home-main__item {
		flex-basis: 18.75rem;
		flex-shrink: 0
	}
	.home-main-monitor .mt-24.flex {
		flex-direction: column;
		gap: .5rem;
		align-items: flex-start
	}
}

.fast-tag {
	display: flex;
	white-space: nowrap;
	gap: 1.25rem;
	overflow: auto;
	margin-left: -1rem;
	margin-right: -1rem;
	padding-left: 1rem;
	padding-right: 1rem
}

.fast-tag::-webkit-scrollbar {
	display: none
}

.fast-tag__item {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: var(--color-D100)
}

.fast-tag__item:hover {
	color: var(--color-B100)
}

.fast-tag__icon {
	width: auto;
	height: auto;
	border-radius: .75rem;
	padding: 0;
	background: none
}

.material-content-like {
	display: flex;
	gap: .125rem;
	align-items: center
}

.material-content-like svg {
	width: 1rem
}

.materials {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem
}

@media ( max-width :1023px) {
	.materials {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media ( max-width :600px) {
	.materials {
		grid-template-columns: repeat(1, 1fr)
	}
}

.material {
	background: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	overflow: hidden
}

.material:hover .material-pic picture {
	transform: scale(1.08)
}

.material-pic {
	position: relative;
	display: block;
	width: 100%;
	will-change: transform;
	overflow: hidden;
	flex: 0 0 8.75rem;
	height: 8.75rem;
	padding: 1.25rem
}

.material-pic picture {
	position: absolute;
	top: -.0625rem;
	left: 0;
	display: block;
	width: 100%;
	height: calc(100% + .0625rem);
	object-fit: cover;
	transition: transform .5s ease
}

.material-pic img {
	height: 100%;
	object-fit: cover
}

.material-content {
	padding: .875rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.material-content-title {
	flex: 1
}

.safety-home-head {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	gap: .25rem
}

.safety-home {
	color: var(--color-B100);
	display: inline-flex;
	align-items: center
}

.safety-home svg {
	width: 1.5rem;
	margin-right: .25rem
}

.safety-home a {
	text-decoration: underline
}

.safety-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem
}

@media ( max-width :900px) {
	.safety-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media ( max-width :600px) {
	.safety-grid {
		display: flex;
		flex-direction: column
	}
}

.safety-grid-item {
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--color-D10);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: .875rem;
	line-height: 1.3
}

.safety-grid-item svg {
	width: 1.25rem;
	flex-shrink: 0;
	margin-right: 1rem
}

.safety-grid-item picture {
	margin-right: 1rem;
	flex-shrink: 0;
	width: auto
}

@media ( max-width :900px) {
	.safety-grid-item {
		padding: 1rem
	}
	.safety-grid-item:nth-child(3) {
		grid-column: 1/-1
	}
}

.safety-grid-item-time {
	padding: .75rem;
	border-radius: 1rem;
	width: 100%;
	background: var(--color-L100)
}

.search-menu {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 2rem;
	font-size: .875rem;
	column-gap: 1rem;
	line-height: 1.2
}

@media ( max-width :991px) {
	.search-menu {
		display: flex;
		white-space: nowrap;
		overflow: auto;
		margin-left: -1rem;
		margin-right: -1rem;
		padding-left: 1rem;
		padding-right: 1rem
	}
	.search-menu::-webkit-scrollbar {
		display: none
	}
}

.search-menu__column {
	display: flex;
	flex-direction: column;
	gap: 1.25rem
}

.search-menu__items {
	display: flex;
	flex-direction: column;
	gap: .75rem
}

.search-menu__items a:hover {
	color: var(--color-B100)
}

footer {
	background: #fff;
	padding: 2rem 0
}

.footer-card-text {
	max-width: 15.625rem
}

@media ( max-width :991px) {
	.footer-card-text {
		max-width: 10rem
	}
}

.footer-row {
	display: flex;
	gap: 2rem
}

@media ( max-width :1300px) {
	.footer-row {
		flex-flow: row wrap
	}
}

@media ( max-width :991px) {
	.footer-row {
		flex-direction: column;
		gap: 1rem
	}
}

.footer-card {
	background-color: #f5f5f5;
	padding: 1.5rem;
	border-radius: 1.5rem;
	position: relative;
	overflow: hidden;
	flex-grow: 1;
	width: 18.4375rem
}

@media ( max-width :991px) {
	.footer-card {
		width: 100% !important;
		padding: 1rem;
		border-radius: 1rem
	}
}

.footer-card__qr {
	width: 6rem;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #fff;
	border-radius: .25rem
}

@media ( max-width :991px) {
	.footer-card__qr {
		display: none
	}
}

.footer-card_one {
	width: 37.875rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-shrink: 0
}

.footer-card-pic {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 9.375rem;
	display: flex
}

.footer-card-application {
	padding: 1rem;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem
}

.application-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem
}

.application-item {
	background: #fff;
	border-radius: .375rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center
}

.chat-link {
	display: flex;
	align-items: center;
	gap: .25rem;
	color: var(--color-B100)
}

.chat-link svg {
	width: 1rem
}

.chat-link:hover {
	color: var(--color-B200)
}

.footer-menu {
	display: flex;
	flex-flow: row wrap;
	gap: .75rem;
	max-width: 61.5625rem;
	font-size: .875rem;
	line-height: 1.2
}

.footer-menu a {
	color: var(--color-D60)
}

.footer-menu a:hover {
	color: var(--color-D50)
}

.footer-logo {
	width: 8.25rem;
	display: flex;
	align-items: center;
	gap: .5rem
}

.footer-logo picture {
	flex-shrink: 0;
	width: auto
}

.footer-end {
	width: 65%;
	max-width: 57.8125rem;
	font-size: .75rem;
	line-height: 1.2
}

.social {
	display: flex;
	align-items: center;
	margin-left: 2.5rem;
	gap: 2.25rem
}

@media ( max-width :991px) {
	.social {
		margin-left: 0
	}
}

.social-item {
	color: var(--color-D30)
}

.social-item svg {
	width: 1.25rem;
	height: 1.25rem
}

@media ( max-width :991px) {
	.footer-flex-end {
		flex-direction: column;
		gap: 1.5rem
	}
}

.grid-product__item-service {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	gap: .375rem
}

.grid-product__item-service svg {
	width: 1.25rem;
	height: 1.25rem
}

.card-credit {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem
}

@media ( max-width :991px) {
	.card-credit {
		gap: .625rem;
		overflow: auto;
		margin-left: -.9375rem;
		margin-right: -1rem;
		padding-left: 1rem;
		padding-right: 1rem
	}
	.card-credit::-webkit-scrollbar {
		display: none
	}
}

.card-credit-item {
	transition: .3s ease-in-out;
	border-radius: 1.25rem
}

.card-credit-item img {
	border-radius: 1.25rem
}

.card-credit-item:hover {
	box-shadow: 0 .5rem .75rem .375rem rgba(0, 0, 0, .1), 0 .25rem .25rem 0
		rgba(0, 0, 0, .2)
}

@media ( max-width :991px) {
	.card-credit-item {
		min-width: 13.75rem
	}
}

.credit-item-block {
	padding: 1rem;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	background-color: var(--color-D06);
	gap: .75rem
}

@media ( max-width :991px) {
	.credit-item-block {
		min-width: 13.75rem
	}
}

.credit-item-block-bank img {
	width: 2.25rem;
	border-radius: .75rem;
	flex-shrink: 0;
	margin-right: .625rem
}

.credit-item-block_white {
	background: #fff
}

.credit-item-blocks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem
}

@media ( max-width :991px) {
	.credit-item-blocks {
		gap: .625rem;
		overflow: auto;
		margin-left: -.9375rem;
		margin-right: -1rem;
		padding-left: 1rem;
		padding-right: 1rem
	}
	.credit-item-blocks::-webkit-scrollbar {
		display: none
	}
}

.calculator-column {
	display: flex;
	flex-direction: column;
	gap: 2rem
}

.calculator-block {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1.5rem;
	border-radius: 2rem;
	background: var(--color-L100)
}

.calculator-block.gap-24 {
	gap: 1.5rem
}

@media ( max-width :991px) {
	.calculator-block {
		border-radius: 1rem;
		padding: 1rem;
		margin-left: -1.875rem;
		margin-right: -1.875rem
	}
}

@media ( max-width :767px) {
	.calculator-block {
		margin-left: -1rem;
		margin-right: -1rem;
		gap: 1.5rem
	}
}

.form-item {
	display: flex;
	flex-direction: column;
	gap: .75rem
}

.select-search-container {
	position: relative
}

.select-search-container.show [data-qa=ArrowDown] {
	transform: rotate(180deg)
}

.select-search-container.show .select-search-relative {
	background: var(--color-L100);
	border: .0625rem solid var(--color-B100)
}

.select-search-container.show .select-search-items-container {
	opacity: 1;
	pointer-events: auto
}

.select-search-container.show-cross [data-qa=ArrowDown] {
	opacity: 0
}

.select-search-container.show-cross [data-qa=Cross] {
	opacity: 1
}

.select-search-relative {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--color-D10);
	width: 100%;
	height: 3.75rem;
	font-size: 1rem;
	border-radius: .75rem;
	line-height: 1.25rem;
	border: .0625rem solid transparent;
	padding: 1.1875rem 3.25rem 1.1875rem .6875rem;
	transition: all .25s linear
}

.select-search-relative:hover {
	border: .0625rem solid var(--color-D20)
}

.select-search-input {
	background: 0 0;
	width: 100%;
	font-size: inherit;
	font-family: inherit
}

.select-search-icon {
	position: absolute;
	cursor: pointer;
	right: .75rem;
	display: flex;
	align-items: center;
	width: 1.25rem;
	height: 1.25rem;
	justify-content: center
}

.select-search-icon path {
	stroke: var(--color-D40)
}

.select-search-icon [data-qa=ArrowDown] {
	transition: all .25s linear
}

.select-search-icon [data-qa=Cross] {
	position: absolute;
	transition: all .25s linear;
	opacity: 0
}

.select-search-items-container {
	overflow: hidden;
	border-radius: .75rem;
	position: absolute;
	z-index: 2;
	top: calc(100% + .125rem);
	box-shadow: 0 .75rem 1rem rgba(0, 0, 0, .06);
	width: 100%;
	max-height: 13.125rem;
	opacity: 0;
	pointer-events: none;
	transition: all .25s linear
}

.select-search-items {
	background: var(--color-L100);
	max-height: 13.125rem;
	overflow: auto;
	height: 100%
}

.select-search-items::-webkit-scrollbar {
	background: #fff;
	width: .125rem
}

.select-search-items::-webkit-scrollbar-thumb {
	background: var(--color-D40)
}

.select-search-item {
	cursor: pointer;
	padding: .75rem 1rem;
	transition: background-color .3s cubic-bezier(.46, 0, .03, .99);
	display: flex;
	align-items: center;
	gap: .5rem
}

.select-search-item img {
	width: 1.25rem
}

.select-search-item.active, .select-search-item:hover {
	background: var(--color-D10)
}

.select-search-none {
	text-align: center;
	padding: .625rem;
	color: var(--color-D40);
	font-weight: 700;
	display: none
}

.input-absolute {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0
}

.form-radio {
	position: relative
}

.form-radio input:checked+.form-radio-label {
	border-color: var(--color-B30);
	background-color: var(--color-B06);
	color: var(--color-B100)
}

.form-item-flex {
	display: flex;
	flex-flow: row wrap;
	gap: .5rem
}

.form-radio-label {
	background: var(--color-D10);
	border: .0625rem solid transparent;
	color: var(--color-D100);
	height: 2.25rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0 .75rem;
	transition: all .3s cubic-bezier(.46, 0, .03, .99);
	border-radius: 2rem
}

.form-radio-label:hover {
	border: .0625rem solid var(--color-D20)
}

.form-radio-label.is-active {
	border-color: var(--color-B30);
	background-color: var(--color-B06);
}

@media ( max-width :991px) {
	.form-radio-label {
		font-size: .875rem
	}
}

.input-form {
	font-family: inherit;
	font-size: inherit;
	background: 0 0;
	width: auto
}

/* Нативный <select class="input-form"> (калькулятор: Валюта, Зарплатный банк) —
   в отличие от <input>, для <select> браузер использует собственный background
   ещё и при отрисовке выпадающего списка опций. Прозрачный background: 0 0 из
   правила выше даёт закрытому полю нужный вид (сквозь него виден фон обёртки
   .form-item-relative), но делает сам выпадающий список прозрачным. Возвращаем
   непрозрачный фон именно для <select>, тем же цветом, что и у обёртки — вид
   закрытого поля не меняется, а список опций перестаёт быть прозрачным. */
select.input-form {
	background-color: var(--color-D10);
}

.input-form::placeholder {
	color: var(--color-D60) !important
}

.form-item-relative {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--color-D10);
	width: 100%;
	height: 3.75rem;
	font-size: 1rem;
	border-radius: .75rem;
	line-height: 1.25rem;
	border: .0625rem solid transparent;
	padding: 1.1875rem 3.25rem 1.1875rem .6875rem;
	transition: all .25s linear
}

.form-item-relative:hover {
	border: .0625rem solid var(--color-D20)
}

.flex-60 {
	display: flex;
	flex-direction: column;
	gap: 3.75rem
}

@media ( max-width :991px) {
	.flex-60 {
		gap: 1.875rem
	}
}

.calculator-grafic {
	padding: .75rem 1rem;
	background: #fff;
	border-radius: 1.25rem
}

@media ( max-width :767px) {
	.calculator-grafic {
		margin-left: -1rem;
		margin-right: -1rem
	}
}

.calculator-grafic-head {
	display: flex;
	align-items: center;
	padding: .75rem 1rem;
	justify-content: space-between;
	cursor: pointer
}

.calculator-grafic-head svg {
	width: 1.25rem;
	height: 1.25rem;
	transition: all .25s linear
}

.calculator-grafic-head path {
	stroke: var(--color-D100)
}

.calculator-grafic-head.active svg {
	transform: rotate(180deg)
}

@media ( max-width :767px) {
	.calculator-grafic-head {
		padding: .75rem 0
	}
}

.calculator-grafic-body {
	height: 0;
	overflow: hidden;
	transition: height .4s ease
}

.calculator-grafic-body-container {
	overflow-x: auto
}

.calculator-grafic-body-table {
	width: 100%;
	font-size: .875rem;
	line-height: 1.3;
	min-width: 55.25rem
}

.calculator-grafic-body-table th {
	text-align: left;
	color: var(--color-D30);
	font-size: .625rem
}

.calculator-grafic-body-table tr {
	padding: 1rem 1.25rem;
	border-radius: 1rem;
	display: grid;
	grid-gap: .5rem;
	grid-template-columns: 2.5rem repeat(5, 1fr)
}

.calculator-grafic-body-table tbody tr:nth-child(odd) {
	background-color: var(--color-D10)
}

.calculator-grafic-body-table tfoot {
	font-weight: 700
}

.seoText {
	background-color: var(--color-L100);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.875rem
}

.content {
	font-size: .875rem;
	line-height: 1.3
}

.content>:last-child {
	margin-bottom: 0
}

.content h3 {
	font-size: medium;
	margin-bottom: .875rem
}

.content p {
	margin-bottom: .875rem
}

.content ol {
	padding-left: 1.25rem;
	margin-bottom: .875rem;
	list-style-type: decimal
}

.content ol li {
	line-height: unset;
	padding-top: .5rem
}

.content ol li:first-child {
	padding-top: 0
}

.content a {
	color: var(--color-B100);
	text-decoration: underline
}

.content ul {
	padding-left: 1.25rem;
	margin-bottom: .875rem;
	list-style-type: disc
}

.content ul li {
	line-height: unset;
	padding-top: .5rem
}

.content ul li:first-child {
	padding-top: 0
}

@media ( max-width :991px) {
	.button-flex-main {
		display: flex;
		flex-direction: column;
		gap: 1rem
	}
	.button-flex-main .button {
		width: 100%
	}
}

.form-item-percent {
	position: absolute;
	right: .625rem;
	color: var(--color-D40);
	font-weight: 600;
	font-size: 1rem
}

.calculator-block-calculation {
	display: flex;
	gap: .9375rem
}

.calculator-block-calculation>div {
	min-width: 13.625rem
}

@media ( max-width :767px) {
	.calculator-block-calculation>div {
		min-width: auto
	}
}

.calculator-block-info {
	padding-top: .75rem;
	border-top: .0625rem solid var(--color-D10)
}

.offer-banks {
	display: flex;
	flex-direction: column;
	gap: .5rem
}

.offer-bank {
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--color-D06);
	transition: border .2s ease-in-out;
	padding: 1rem;
	border: .0625rem solid transparent;
	border-radius: 1.25rem
}

.offer-bank:hover {
	border: .0625rem solid var(--color-B100)
}

.offer-bank .button {
	flex-shrink: 0
}

.offer-bank .button svg {
	display: none
}

@media ( max-width :1023px) {
	.offer-bank .button svg {
		display: flex;
		width: 1.25rem;
		height: 1.25rem;
		margin-left: -.25rem
	}

	.offer-bank .button {
		font-size: 0;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0
	}

	.offer-bank {
		padding: .75rem;
		border-radius: 1rem
	}
	.offer-bank .size-12 {
		font-size: .625rem
	}
	.offer-bank .size-16 {
		font-size: .75rem
	}
}

.offer-bank-pay {
	flex-shrink: 0;
	width: 7.125rem
}

/* .offer-bank-pay--type — поле «Тип кредита» (микрозаймы): .result-item-info
   задаёт white-space:nowrap на весь блок параметров, из-за чего длинные значения
   («Потребительский микрозайм» и т.п.) не помещаются в фикс. ширину 7.125rem и
   раздвигают строку карточки — .result-item-button («Отправить заявку») из-за
   flex-wrap на .result-item перескакивает на строку ниже. Возвращаем перенос
   текста только для этого поля — ширина строки остаётся прежней, кнопка не
   сдвигается, а длинное значение просто занимает 2 строки внутри своей колонки. */
.offer-bank-pay--type {
	white-space: normal;
}

@media ( max-width :1023px) {
	.offer-bank-pay {
		width: 4.4375rem
	}
}

.offer-bank-name {
	display: flex;
	align-items: center;
	width: 12.5rem;
	gap: .75rem
}

@media ( max-width :1023px) {
	.offer-bank-name {
		width: 8.75rem;
		gap: .5rem
	}
}

.offer-bank-name-avatar {
	flex-shrink: 0
}

.offer-bank-name-avatar img {
	border-radius: .5rem
}

@media ( max-width :1023px) {
	.offer-bank-name-avatar {
		width: 2.25rem
	}
}

.offer-bank-name-head {
	width: calc(100% - 4.375rem)
}

.offer-bank-name-head>div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

@media ( max-width :1023px) {
	.offer-bank-name-head {
		width: calc(100% - 3.125rem)
	}
}

.section-picture {
	min-height: 18em;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	padding-bottom: 3.75rem;
	align-items: flex-end;
	color: #000;
	position: relative
}

.section-picture:before {
	content: "";
	background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.section-picture .container {
	position: relative;
	z-index: 1
}

.button-bg {
	height: 3.375rem;
	padding: 0 1.875rem
}

.section-calculator {
	margin-top: -3.125rem;
	z-index: 1;
	position: relative
}

.calculator-main {
	background: #fff;
	gap: 1rem;
	display: grid;
	grid-template-columns: 1fr 14.9375rem;
	box-shadow: .0625rem .0625rem .0625rem rgba(0, 0, 0, .1);
	padding: 1rem;
	border-radius: 1rem
}

.calculator-main .form-item-relative {
	padding: 1.1875rem .9375rem
}

.calculator-main .input-form {
	width: 100% !important
}

@media ( max-width :1200px) {
	.calculator-main {
		grid-template-columns: 1fr 11.25rem
	}
}

@media ( max-width :991px) {
	.calculator-main {
		flex-direction: column;
		display: flex
	}
}

.calculator-main-right {
	display: flex;
	flex-direction: column;
	gap: .75rem
}

.calculator-main-right .button {
	width: 100%;
	height: 3.75rem
}

.calculator-main-left-flex {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	flex-flow: row wrap;
	gap: .125rem
}

@media ( max-width :991px) {
	.calculator-main-left-flex {
		display: flex;
		flex-direction: column;
		gap: .5rem
	}
}

.calculator-main-left {
	display: flex;
	flex-direction: column;
	gap: .75rem
}

.form-item-absolute {
	font-size: .75rem;
	color: #636f7d;
	top: .3125rem;
	left: .9375rem;
	pointer-events: none;
	position: absolute;
	letter-spacing: 0
}

.form-item-relative-m {
	padding: 0 !important
}

.form-item-relative-m .ss-main {
	height: 100%;
	background: 0 0;
	border: none;
	outline: 0;
	padding: 1.4375rem .9375rem .625rem;
	display: flex;
	align-items: center
}

.form-item-relative-m .ss-arrow {
	margin: 0
}

.all-filter {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	cursor: pointer
}

.all-filter svg {
	width: .75rem;
	height: .75rem;
	fill: transparent;
	stroke: #000
}

.all-filter.active svg {
	transform: rotate(180deg)
}

.calculator-main-filter-main {
	display: flex;
	flex-flow: row wrap;
	gap: .625rem
}

.form-item-50 {
	width: calc(50% - .3125rem)
}

@media ( max-width :991px) {
	.form-item-50 {
		width: 100%
	}
}

.form-item-33 {
	width: calc(33.3% - .4375rem)
}

@media ( max-width :991px) {
	.form-item-33 {
		width: 100%
	}
}

.form-item-25 {
	width: calc(25% - .5rem)
}

@media ( max-width :991px) {
	.form-item-25 {
		width: 100%
	}
}

.calculator-main-filter {
	height: 0;
	overflow: hidden;
	transition: height .25s linear
}

.result-items {
	margin-top: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.result-item {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 1.25rem;
	background: #fff;
	border-radius: 1rem;
	width: 100%
}

@media ( max-width :1023px) {
	.result-item {
		flex-direction: column;
		gap: 1rem
	}
}

.result-item-company {
	width: calc(100% - 40.8125rem)
}

.result-item-company .offer-bank-name {
	width: 100%
}

@media ( max-width :1023px) {
	.result-item-company {
		width: 100%
	}
}

.result-item-info {
	display: flex;
	flex-shrink: 0;
	gap: 1.25rem;
	width: 31.25rem
}

.result-item-info .offer-bank-pay {
	width: auto
}

@media ( max-width :1023px) {
	.result-item-info {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: .625rem;
		width: 100%
	}
}

.result-item-button {
	flex-shrink: 0;
	width: 9.5625rem
}

.result-item-button .button {
	height: 2.75rem
}

@media ( max-width :1023px) {
	.result-item-button .button {
		width: 100%
	}

	.result-item-button {
		width: 100%
	}
}

.credit-item-block .result-item-info {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: .625rem
}

.credit-item-block .result-item-company, .credit-item-block .result-item-info
	{
	width: 100%
}

.credit-item-block .result-item-button {
	width: 100%
}

.credit-item-block .result-item-button .button {
	width: 100%
}

@media ( max-width :991px) {
	.credit-item-block .size-16 {
		font-size: .9375rem
	}

	.credit-item-blocks-t .credit-item-block {
		width: 16.875rem
	}
}

.calculation-block {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem
}

.table {
	border-collapse: collapse;
	display: block;
	margin-top: 1.25rem;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	font-size: .875rem
}

.table tbody {
	display: table;
	width: 100%
}

.table tr {
	border-top: .0625rem solid var(--color-D10)
}

.table th {
	color: var(--color-D30);
	font-size: .625rem;
	letter-spacing: .5px;
	line-height: 1rem;
	text-transform: uppercase;
	padding: .9375rem .625rem;
	text-align: left;
	border: none;
	min-width: 9.375rem
}

.table th:first-child {
	min-width: 8.75rem;
	padding-left: 0
}

.table td {
	border: none;
	padding: .9375rem .625rem;
	text-align: left;
	min-width: 9.375rem
}

.table td:first-child {
	min-width: 8.75rem;
	padding-left: 0
}

.calculation-block-avatar {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: .75rem;
	margin-right: .75rem;
	border: .0625rem solid var(--color-D06);
	overflow: hidden
}

.calculation-block-link {
	color: var(--color-B100);
	font-size: .875rem
}

.calculator-trigger {
	padding: 1rem 1.5rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #fff
}

.calculator-trigger:hover {
	box-shadow: .0625rem .0625rem .3125rem rgba(0, 0, 0, .1)
}

@media ( max-width :600px) {
	.calculator-trigger {
		padding: .75rem;
		gap: .75rem
	}
}

.calculator-trigger-pic {
	flex-shrink: 0
}

@media ( max-width :600px) {
	.calculator-trigger-pic {
		width: 3.75rem
	}
	.calculator-trigger-pic svg {
		width: 100%;
		height: auto
	}
}

.calculator-trigger-arrow {
	flex-shrink: 0;
	background-color: var(--color-D80);
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	padding: .375rem
}

.calculator-trigger-content {
	width: 100%
}

.result-item-trigger {
	display: flex;
	align-items: center;
	margin-top: .625rem;
	width: 100%;
	justify-content: flex-end
}

.result-item-button-trigger {
	display: flex;
	align-items: center;
	gap: .25rem
}

.result-item-button-trigger svg {
	width: .625rem;
	transition: all .25s linear
}

.result-item-block {
	border-radius: 1rem;
	overflow: hidden;
	background: #fff
}

.result-item-block.open .result-item-button-trigger svg {
	transform: rotate(180deg)
}

.result-item-hidden {
	height: 0;
	transition: height .25s linear;
	overflow: hidden
}

.result-item-hidden .result-item {
	position: relative;
	transition: all .25s linear
}

.result-item-hidden .result-item:before {
	content: "";
	letter-spacing: 1rem;
	width: calc(100% - 2rem);
	background-color: var(--color-D10);
	position: absolute;
	top: 0;
	height: .0625rem
}

.developers-container {
	background-color: #002a3a;
	border-radius: 1.5rem;
	padding: 0 2rem;
	height: 7.75rem;
	overflow: hidden
}

@media ( max-width :1017px) {
	.developers-container {
		padding: 0 1.25rem
	}
}

@media ( max-width :629px) {
	.developers-container {
		display: flex;
		justify-content: center;
		padding: .75rem 1rem 0
	}
}

.developers-container .content {
	display: flex;
	align-items: center;
	justify-content: center
}

@media ( max-width :629px) {
	.developers-container .content {
		flex-direction: column;
		justify-content: flex-start;
		max-width: 18rem;
		width: 100%
	}
}

.developers-container .content-text {
	width: 100%;
	max-width: 45.4375rem;
	display: flex;
	flex-direction: column;
	gap: .625rem
}

@media ( max-width :1017px) {
	.developers-container .content-text {
		max-width: 35.625rem
	}
}

@media ( max-width :773px) {
	.developers-container .content-text {
		max-width: 26.625rem
	}
}

@media ( max-width :629px) {
	.developers-container .content-text {
		gap: 0
	}
}

.developers-container .content-text-title {
	font-size: 1.375rem;
	line-height: 1.625rem;
	color: #fff
}

@media ( max-width :773px) {
	.developers-container .content-text-title {
		font-size: 1.125rem;
		line-height: 1.5rem
	}
}

@media ( max-width :629px) {
	.developers-container .content-text-title {
		font-size: .875rem;
		line-height: 1.125rem
	}
}

.developers-container .content-text-link {
	display: flex;
	align-items: center;
	gap: .25rem;
	color: #7001ff;
	font-size: .875rem;
	line-height: 1.25rem;
	width: max-content
}

@media ( max-width :629px) {
	.developers-container .content-text-link {
		font-size: .75rem;
		line-height: 1rem
	}
}

.developers-container .content-img-container {
	height: 7.625rem;
	width: 7.625rem;
	margin: .0625rem 1.3125rem;
	flex-shrink: 0
}

@media ( max-width :629px) {
	.developers-container .content-img-container {
		width: 4.75rem;
		height: 3.875rem;
		margin: -1.375rem 0 0;
		align-self: flex-end
	}
}

.developers-container .content-img-container img {
	width: 100%;
	height: 100%
}

@media ( max-width :1017px) {
	.content-text-title-part {
		display: block
	}
}

/* === add.css === */

/* ==========================================================================
   SINGLE-MORTGAGES — страница одного ипотечного предложения
   ========================================================================== */

/* ── Хлебные крошки ─────────────────────────────────────────────────────── */
.section-breadcrumb {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: #999;
}

.breadcrumb-item {
    color: #999;
    text-decoration: none;
    white-space: nowrap;
}

.breadcrumb-item:hover {
    color: #333;
    text-decoration: underline;
}

.breadcrumb-sep {
    color: #ccc;
    user-select: none;
}

.breadcrumb-current {
    color: #333;
}

/* ── Hero-блок ──────────────────────────────────────────────────────────── */
.section-single-hero {
    padding: 32px 0;
}

.single-hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.single-hero-bank {
    display: flex;
    align-items: center;
    gap: 16px;
}

.single-hero-bank-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.single-hero-bank-name {
    color: #999;
    text-decoration: none;
    transition: color .15s;
}

.single-hero-bank-name:hover {
    color: #333;
}

.single-hero-title {
    margin: 0;
}

.single-hero-params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    padding: 24px;
    background: #f8f8f8;
    border-radius: 12px;
}

.single-hero-param {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.single-hero-param-label {
    line-height: 1.3;
}

.single-hero-param-value {
    line-height: 1.1;
}

.single-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Таблица условий ────────────────────────────────────────────────────── */
.section-single-conditions {
    padding: 32px 0;
}

.single-conditions-table {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
}

.single-conditions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.single-conditions-row:last-child {
    border-bottom: none;
}

.single-conditions-label {
    flex: 0 1 50%;
    padding-right: 12px;
}

.single-conditions-value {
    text-align: right;
}

/* ── Сетка условий (модификатор --grid) ─────────────────────────────────────
   Применяется на страницах кредитов (авто/потреб/микро/бизнес). Вместо списка
   «метка ↔ значение» — адаптивная сетка ячеек-карточек: метка сверху, значение
   снизу. Колонок: 3 на десктопе → 2 на планшете → 1 на смартфоне. Длинную
   текстовую строку можно растянуть на всю ширину классом --wide на строке. */
.single-conditions-table--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;              /* соседние ячейки не растягиваются под самую высокую */
    gap: 12px;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.single-conditions-table--grid .single-conditions-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #f0f0f0;       /* каждая ячейка — карточка с рамкой */
    border-radius: 12px;
}
.single-conditions-table--grid .single-conditions-label {
    flex: 0 0 auto;
    padding-right: 0;
}
.single-conditions-table--grid .single-conditions-value {
    text-align: left;
}
.single-conditions-table--grid .single-conditions-row--wide {
    grid-column: 1 / -1;             /* строка на всю ширину сетки */
}
@media (max-width: 1024px) {
    .single-conditions-table--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .single-conditions-table--grid { grid-template-columns: 1fr; }
}


/* ── CTA-блок заявки ────────────────────────────────────────────────────── */
.section-single-apply {
    padding: 32px 0;
    background: #f8f8f8;
}

.single-apply-block {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.single-apply-bank {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.single-apply-text {
    flex: 1;
    min-width: 180px;
}

/* ── Другие предложения банка ───────────────────────────────────────────── */
.section-single-other {
    padding: 32px 0;
}

/* ── Кнопка с рамкой (вторичное действие) ───────────────────────────────── */
.button-border {
    background: transparent;
    border: 1.5px solid #333;
    color: #333;
}

.button-border:hover {
    background: #f0f0f0;
}

/* ── Переключатель языка в шапке ─────────────────────────────────────────── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
}

.lang-switcher__btn {
    font-size: 13px;
    font-weight: 600;
    color: #aaa;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s;
    line-height: 1;
}

.lang-switcher__btn.is-active {
    color: #111;
}

.lang-switcher__btn:hover {
    color: #111;
}

.lang-switcher__sep {
    color: #ddd;
    font-size: 11px;
    line-height: 1;
}

/* На мобильных — убираем разделитель, делаем кнопки чуть крупнее для tap-target */
@media (max-width: 767px) {
    .lang-switcher {
        gap: 2px;
        margin-right: 8px;
    }

    .lang-switcher__btn {
        font-size: 12px;
        padding: 4px 6px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ШИРИНА И ВЫСОТА БЛОКА КАРУСЕЛИ STORIES
   • flex: 0 0 XX% — ширина блока (30% узкая, 40% средняя, 60% широкая, 80% по умолчанию).
   • height       — ЖЁСТКАЯ высота всего блока (заголовок + белая панель).
                    Закомментируй строку, если хочешь, чтобы высота определялась
                    содержимым / соседями по строке (вариант 1 ниже —
                    регулируется через min-height на .web-stories-list).
   ───────────────────────────────────────────────────────────────────────────── */
.home-main__item--carousel {
    flex: 0 0 50%; /* ← меняй ширину здесь (Stories теперь делит строку с BLOCK-3.1 и BLOCK-3.2) */
    overflow: hidden; /* обрезает слайды, выходящие за границу блока */
    min-width: 0;
    min-height: var(--block3-h, 22rem); /* высоту меняй на .home-main--block-3 → --block3-h */
}
/* ─────────────────────────────────────────────────────────────────────────────
   ВЫСОТА БЕЛОЙ ПАНЕЛИ STORIES
   Меняй значение min-height ниже (например, 13rem / 16rem / 20rem).
   Для синхронизации с блоком курсов валют — выставь такое же min-height
   у правила .card в assets/css/critical.css (сейчас там 13rem).
   ───────────────────────────────────────────────────────────────────────────── */
.home-main__item--carousel .web-stories-list {
    background: var(--color-D06); /* ← цвет фона сайта (critical.css:131 → #F6F5F4) */
    padding: 1rem;
    border-radius: 1rem !important; /* скруглённые углы белой панели BLOCK-4.2 */
    overflow: hidden !important; /* чтобы скругление работало на всех 4 углах */
    box-sizing: border-box;
    min-height: calc(var(--block3-h, 22rem) - 3rem); /* белая панель = высота строки минус h1 + mb-24 (~3rem); регулируется через --block3-h */
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center; /* карточки по центру панели по вертикали (было flex-start — прижато к верху) */
    /* ↑↑ ПОДНЯТЬ БЕЛЫЙ БЛОК STORIES ВВЕРХ ↑↑
       Между заголовком "Stories" и белой панелью есть зазор от mb-24 у h1 (24px = 1.5rem).
       Уменьшай отрицательное значение margin-top, чтобы поднять панель ближе к заголовку.
       Примеры:  0  — без сдвига (зазор 1.5rem),
                -0.75rem — поднять на половину зазора,
                -1.5rem — вплотную к заголовку,
                -2rem  — заехать под заголовок. */
    margin-top: 0rem; /* ← меняй отступ здесь, чтобы поднять/опустить белую панель */
}
.home-main__item--carousel .web-stories-list__inner-wrapper,
.home-main__item--carousel .web-stories-list__carousel,
.home-main__item--carousel .glider,
.home-main__item--carousel .glider-contain,
.home-main__item--carousel .glider-track {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
}
.web-stories-list.is-carousel .web-stories-list__carousel.narxtop-stories-draggable {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.web-stories-list.is-carousel .web-stories-list__carousel.narxtop-stories-draggable.is-dragging {
    cursor: grabbing;
}
.web-stories-list.is-carousel .web-stories-list__carousel.narxtop-stories-draggable a,
.web-stories-list.is-carousel .web-stories-list__carousel.narxtop-stories-draggable img {
    -webkit-user-drag: none;
    user-select: none;
}
.web-stories-list.is-carousel .web-stories-list__carousel::scroll-button(*) {
    display: none !important;
}
.home-main__item--carousel .web-stories-list.is-carousel .glider-prev,
.home-main__item--carousel .web-stories-list.is-carousel .glider-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20;
}
.home-main__item--carousel .web-stories-list.is-carousel .glider-prev {
    left: 0 !important;
    right: auto !important;
    transform: translateY(-50%) rotate(180deg) !important;
}
.home-main__item--carousel .web-stories-list.is-carousel .glider-next {
    left: auto !important;
    right: 0 !important;
}
.home-main__item:not(.home-main__item--carousel):not(.home-main__item--wide):not(.home-main__item--rates) {
    flex: 1 1 auto; /* остальные блоки заполняют оставшееся место */
    min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ГОРИЗОНТАЛЬНЫЙ ЗАЗОР МЕЖДУ BLOCK-3.1 и BLOCK-3.2
   В critical.css:1867 у .home-main стоит column-gap: 1.5rem — это и есть
   зазор между колонками. Здесь переопределяем его ТОЛЬКО для BLOCK-3
   (на BLOCK-4 не повлияет).
   Примеры:  1.5rem — по умолчанию,
             0.75rem — половина,
             0.25rem — узкий зазор,
             0      — без зазора (BLOCK-3.1 и BLOCK-3.2 вплотную). */
.home-main--block-3 {
    /* ════════════════════════════════════════════════════════════════════
       ЕДИНСТВЕННЫЙ РЕГУЛЯТОР ВЫСОТЫ СТРОКИ BLOCK-3 (курсы / калькуляторы / Stories)
       Меняй значение здесь — оно распространится на все 3 колонки строки.
       ════════════════════════════════════════════════════════════════════ */
    --block3-h: 20rem; /* ← ЕДИНСТВЕННАЯ ручка высоты BLOCK-3 (например, 18rem / 22rem / 26rem) */

    column-gap: 0rem; /* ← меняй горизонтальный зазор здесь */
}

/* ─────────────────────────────────────────────────────────────────────────────
   ↑↑ ПОДТЯНУТЬ СЕКЦИЮ BLOCK-4 (курсы валют + Stories) К BLOCK-3 ВВЕРХ ↑↑
   Между BLOCK-3 и BLOCK-4 зазор складывается из:
     • padding-bottom: 2rem у BLOCK-3 (общее правило section в critical.css:1585),
     • padding-top:    2rem у BLOCK-4 (то же правило).
   Итого ~4rem. Чтобы уменьшить зазор, обнуляем верхний padding и при необходимости
   тянем секцию вверх отрицательным margin-top.
   Примеры:
       margin-top:  0;     padding-top: 2rem  — без сдвига (по умолчанию),
       margin-top:  0;     padding-top: 0     — экономия 2rem (внутренний отступ),
       margin-top: -2rem;  padding-top: 0     — экономия 4rem (вплотную к BLOCK-3),
       margin-top: -4rem;  padding-top: 0     — заехать на BLOCK-3 на 2rem сверху.
   ───────────────────────────────────────────────────────────────────────────── */
.section--block-4 {
    margin-top: 0rem;  /* ← тянет ВСЮ секцию вверх (отрицательное — выше) */
    padding-top: 0;     /* ← обнуляет верхний внутренний отступ секции */
}

/* ─────────────────────────────────────────────────────────────────────────────
   ШИРИНА И ВЫСОТА BLOCK-3.1 — БЛОК КУРСОВ ВАЛЮТ (home-main__item--rates)
   • flex: 0 0 XX% — ширина блока (20% узкая, 30% средняя, 50% широкая).
   • height       — ЖЁСТКАЯ высота всего блока (заголовок + белая панель).
                    Закомментируй строку, если хочешь, чтобы высота определялась
                    содержимым / соседями по строке.
   ───────────────────────────────────────────────────────────────────────────── */
.home-main__item.home-main__item--rates {
    flex: 0 0 20%; /* ← меняй ширину здесь */
    min-width: 0;
    min-height: var(--block3-h, 22rem); /* высоту меняй на .home-main--block-3 → --block3-h */
}
/* ↑↑ ПОДНЯТЬ ОБЛАСТЬ КУРСОВ ВАЛЮТ (currency-rates) ВВЕРХ ↑↑
   Между заголовком и белой панелью курсов есть зазор от mb-24 у h1 (1.5rem).
   Уменьшай отрицательное значение margin-top, чтобы поднять панель ближе
   к заголовку.
   Примеры:  0  — без сдвига (зазор 1.5rem),
            -0.75rem — поднять на половину зазора,
            -1.5rem — вплотную к заголовку,
            -2rem  — заехать под заголовок. */
.home-main__item--rates .cbu-rates-card {
    margin-top: 0rem; /* ← меняй отступ здесь */
}

/* ─────────────────────────────────────────────────────────────────────────────
   ШИРИНА И ВЫСОТА BLOCK-3.2 — СЕТКА ССЫЛОК (home-main__item--wide)
   • flex: 0 0 XX% — ширина блока (50% узкая, 70% средняя, 80% по умолчанию).
   • height       — ЖЁСТКАЯ высота всего блока (заголовок + белая панель).
                    Закомментируй строку, если хочешь, чтобы высота определялась
                    содержимым / соседями по строке (тогда плитки не будут
                    обрезаться при добавлении).
   ───────────────────────────────────────────────────────────────────────────── */
.home-main__item.home-main__item--wide {
    flex: 1 1 50%; /* ← занимает всё свободное место справа от BLOCK-3.1 */
    min-width: 0;
    /* При ширине 25% плитки идут по 1–2 в ряд, и при жёсткой высоте 24rem +
       overflow: hidden часть плиток (например, grid-product-nine) обрезается.
       Поэтому используем min-height — блок не короче 24rem, но растёт под
       контент. Если нужно вернуть жёсткую высоту — поменяй min-height на
       height и верни overflow: hidden. */
    min-height: var(--block3-h, 22rem); /* высоту меняй на .home-main--block-3 → --block3-h */
}
/* В critical.css на экранах ≤1280px у .grid-product-container стоит
   overflow: auto (горизонтальный скролл), а у .grid-product — min-width: 90rem.
   В узкой колонке BLOCK-3.2 это прячет часть плиток за горизонтальный скролл.
   Здесь переопределяем — позволяем сетке переноситься по ширине колонки. */
.home-main__item--wide .grid-product-container {
    overflow: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.home-main__item--wide .grid-product {
    min-width: 0 !important;
}
/* ─────────────────────────────────────────────────────────────────────────────
   СМЕЩЕНИЕ ЗАГОЛОВКА BLOCK-3.2 (fp_calcs_title) ВПРАВО
   Внутри BLOCK-3.2 заголовок <h1> сидит на уровне .home-main__item--wide,
   а белая панель — внутри ещё одного <div class="container">, у которого
   padding: 0 1.875rem (critical.css:1306). Поэтому h1 виден левее белой
   области. Выравниваем заголовок по левому краю белой области через
   padding-left = padding контейнера (1.875rem).
   Примеры:  0       — без смещения (по умолчанию, h1 у левого края колонки),
            1.875rem — выравнивание с левым краем белой панели,
            3rem     — глубже внутрь от белой панели. */
.home-main__item--wide > h1 {
    padding-left: 1.875rem; /* ← смещение заголовка BLOCK-3.2 вправо (0 — к левому краю, 1.875rem — вровень с белой панелью, 3rem — глубже внутрь) */
}
/* На мобильных вложенный <div class="container"> внутри BLOCK-3.2 не имеет
   собственного горизонтального padding (он уже растянут страницей), поэтому
   сдвиг заголовка на 1.875rem делает его «длиннее» соседней колонки.
   Убираем padding-left на мобильных. */
@media (max-width: 767px) {
    .home-main__item--wide > h1 {
        padding-left: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   СМЕЩЕНИЕ ЗАГОЛОВКА BLOCK-3.3 (fp_services_title) ВПРАВО
   Аналогично BLOCK-3.2: <h1> сидит на уровне .home-main__item--carousel,
   а сама карусель Stories — внутри .web-stories-list с собственным
   padding: 1rem. Выравниваем заголовок относительно белой панели Stories.
   Примеры:  0       — без смещения (h1 у левого края колонки),
            1rem    — вровень с padding-ом панели Stories,
            1.875rem — глубже внутрь панели. */
.home-main__item--carousel > h1 {
    padding-left: 1rem; /* ← смещение заголовка BLOCK-3.3 вправо */
}
@media (max-width: 767px) {
    .home-main__item--carousel > h1 {
        padding-left: 0;
    }
}

/* ↑↑ ПОДНЯТЬ ОБЛАСТЬ СЕТКИ ССЫЛОК (.container > .grid-product-container) ВВЕРХ ↑↑
   Между заголовком и белой панелью сетки есть зазор от mb-24 у h1 (1.5rem).
   Уменьшай отрицательное значение margin-top, чтобы поднять панель ближе
   к заголовку.
   Примеры:  0  — без сдвига (зазор 1.5rem),
            -0.75rem — поднять на половину зазора,
            -1.5rem — вплотную к заголовку,
            -2rem  — заехать под заголовок. */
.home-main__item--wide > .container {
    margin-top: 0rem; /* ← меняй отступ здесь */
}
.home-main__item--wide .grid-product-container.bg-white {
    background: #fff;
    padding: 1rem;
    border-radius: 1rem !important; /* скруглённые углы белой панели BLOCK-3.2 */
    overflow: hidden !important;
    box-sizing: border-box;
    min-height: 16.5rem; /* совпадает с .web-stories-list (BLOCK-4.2) */
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}
/* BLOCK-3.2: внутренний .grid-product тоже со скруглением, чтобы дочерние
   ссылки не «съедали» углы белой панели. */
.home-main__item--wide .grid-product {
    border-radius: 1rem;
    /* overflow: hidden убран — плитки 3–6 переносились flex-wrap-ом ниже
       и обрезались. Сейчас сетка показывает все плитки, скругление углов
       на белой панели достигается классом .grid-product-container.bg-white
       у внешнего контейнера. */
    /* Высота элементов .grid-product__item должна совпадать с BLOCK-1:
       в BLOCK-1 grid-template-rows: repeat(2, 1.5fr) растягивает строки
       по высоте родителя; внутри BLOCK-3.2 родитель жёстко 24rem, поэтому
       строки получаются непропорционально высокими. Переходим на flex-вёрстку
       с wrap — плитки получают свой натуральный размер и упаковываются
       к левому краю белой области. */
    display: flex !important;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center; /* ← плитки калькуляторов центрируются по горизонтали внутри белой панели */
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
/* Сбрасываем grid-area-привязки и фикс. высоту у плиток BLOCK-3.2,
   чтобы они шли потоком слева направо и не растягивались. */
.home-main__item--wide .grid-product__item {
    grid-area: auto !important;
    flex: 0 0 auto;
    width: 9.375rem;
    height: auto;
    min-height: 5.75rem;
    background: var(--color-D06);       /* ← фон плитки = цвет фона сайта (critical.css:131 → #F6F5F4) */
    border: 1px solid var(--color-D06); /* ← рамка под цвет фона (чтобы при ховере 1px solid #7001ff не сдвигал размеры) */
    /* Картинка сверху, текст снизу: в HTML-разметке порядок (текст, картинка),
       поэтому используем column-reverse — последний элемент (.grid-product-pic)
       поднимется на верх, первый (текстовый <div>) уйдёт вниз. */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-align: center;     /* ← текст по центру по горизонтали */
}
/* Дочерний текст-<div> может растягиваться flex-ом по ширине — выравниваем
   по центру и его внутренний текст. */
.home-main__item--wide .grid-product__item > div {
    text-align: center;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   РАЗМЕР ИКОНКИ внутри плиток BLOCK-3.2 (.home-main__item--wide)
   Меняй height/width здесь независимо от BLOCK-1.2.
   Аспект сохраняется через object-fit: contain. */
.home-main__item--wide .grid-product-pic {
    height: 2rem; /* ← высота иконки в BLOCK-3.2 */
    width: 2rem;  /* ← ширина иконки в BLOCK-3.2 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* В critical.css:1714 у .grid-product-pic стоит position:absolute; bottom:0; right:0 —
       поэтому картинка вылетает из flex-потока и не реагирует на column-reverse.
       Возвращаем её в обычный поток внутри плитки BLOCK-3.2. */
    position: static;
    bottom: auto;
    right: auto;
}
.home-main__item--wide .grid-product-pic img,
.home-main__item--wide .grid-product-pic picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   РАЗМЕР ИКОНКИ внутри плиток BLOCK-1.2
   BLOCK-1.2 = .section--block-1 без BLOCK-1.1 (исключаем grid-product-one/two/three).
   Меняй height/width здесь независимо от BLOCK-3.2. */
.section--block-1 .grid-product__item:not(.grid-product-one):not(.grid-product-two):not(.grid-product-three) .grid-product-pic {
    height: 7rem; /* ← высота иконки в BLOCK-1.2 */
    width: 7rem;  /* ← ширина иконки в BLOCK-1.2 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.section--block-1 .grid-product__item:not(.grid-product-one):not(.grid-product-two):not(.grid-product-three) .grid-product-pic img,
.section--block-1 .grid-product__item:not(.grid-product-one):not(.grid-product-two):not(.grid-product-three) .grid-product-pic picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ПОДСВЕТКА ПРИ НАВЕДЕНИИ НА ПЛИТКУ ВНУТРИ BLOCK-3.2 и BLOCK-1.2
   В critical.css:1673 общий .grid-product__item:hover { filter: brightness(93%) }
   слегка затемняет плитку. Здесь переопределяем для двух блоков —
   только меняем цвет текста на фирменный фиолетовый, фон и рамка остаются
   как в исходном (не-hover) состоянии. */
.home-main__item--wide .grid-product__item:hover,
.section--block-1 .grid-product__item:not(.grid-product-one):hover {
    filter: none;        /* отключаем общий brightness(93%) */
    color: #7001ff;      /* ← цвет текста при наведении */
}
/* Явно восстанавливаем исходное поведение для .grid-product-one (BLOCK-1.1
   баннер «Получить первый займ»). Перебивает любые правила, которые могут
   просочиться от соседей по селектору. Параметры — копия из critical.css:1682. */
.section--block-1 .grid-product-one,
.section--block-1 .grid-product-one:hover {
    background: linear-gradient(180deg, #5047d7, #3e3da7);
    color: var(--color-L100);
    border: none;
}
.section--block-1 .grid-product-one:hover {
    filter: brightness(93%); /* стандартное затемнение из critical.css:1673 */
}
@media (max-width: 1024px) {
    .home-main__item.home-main__item--wide {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* BLOCK-3.1 / BLOCK-3.2 — равная ВЫСОТА белых областей внутри home-main.
   home-main уже flex-row с align-items: stretch (по умолчанию) — обе колонки
   тянутся на одну высоту. Дополнительно тянем .cbu-rates-card на 100% высоты. */
.home-main > .home-main__item { align-self: stretch; }
.home-main > .home-main__item .cbu-rates-card { height: 100%; } /* карточка курсов на всю высоту колонки (раньше 70% — оставляло пустоту снизу) */
@media (max-width: 1024px) {
    /* Карусель и курсы валют остаются на одной строке на любом экране.
       Карусель занимает всё свободное место, курсы — только свою ширину. */
    .home-main__item--carousel {
        flex: 1 1 0;
        min-width: 0;
    }
    .home-main__item:not(.home-main__item--carousel) {
        flex: 0 0 auto;
        min-width: 0;
    }
}
/* На мобильных все три колонки BLOCK-3 (rates / wide / carousel) разъезжаются
   по одной в ряд — иначе Stories с flex: 1 1 0 в строке схлопывается до 0 px
   и не отображается. */
@media (max-width: 767px) {
    .home-main--block-3 .home-main__item--rates,
    .home-main--block-3 .home-main__item--wide,
    .home-main--block-3 .home-main__item--carousel {
        flex: 0 0 100% !important;
        width: 100%;
        max-width: 100%;
    }
    .home-main--block-3 .home-main__item--carousel {
        height: auto !important;
        min-height: 0;
    }
    .home-main--block-3 .home-main__item--rates,
    .home-main--block-3 .home-main__item--wide {
        height: auto !important;
        min-height: 0;
    }

    /* ─────────────────────────────────────────────────────────────────────
       МОБИЛЬНАЯ СЕТКА КАЛЬКУЛЯТОРОВ BLOCK-3.2: 3 ПЛИТКИ В РЯД
       ─────────────────────────────────────────────────────────────────────
       На десктопе плитка — фикс. ширины 9.375rem (см. правило выше),
       и на узком экране в ряд влезает только 2.
       Здесь принудительно делаем 3 равных колонки от ширины родителя:
         calc((100% - X) / 3),  где X = (3 - 1) × gap = 2 × .5rem = 1rem.
       ───────────────────────────────────────────────────────────────────── */

    /* ↓ Ширина одной плитки в ряду. Меняй знаменатель «3», чтобы получить
         другое число колонок (2 / 4 / 5). Не забывай пересчитать X = (n-1)×gap. */
    .home-main--block-3 .home-main__item--wide .grid-product__item {
        width: calc((100% - 1rem) / 3); /* ← 3 в ряд */
        min-height: 5rem;               /* ← минимальная высота плитки на мобильном */
    }
    /* ↓ Размер иконки в плитке на мобильных (на десктопе — 4rem × 4rem,
         см. правило .home-main__item--wide .grid-product-pic выше).
         2.5rem ≈ 40px — комфортно влезает в плитку ~104px шириной. */
    .home-main--block-3 .home-main__item--wide .grid-product-pic {
        height: 2.5rem; /* ← высота иконки на мобильном */
        width:  2.5rem; /* ← ширина иконки на мобильном */
    }
    /* ↓ Размер подписи под иконкой. Если узбекские длинные слова
         (например «Avtokreditlar») переносятся некрасиво — уменьшай до 10–11px
         или снимай комментарий с overflow-wrap ниже. */
    .home-main--block-3 .home-main__item--wide .grid-product__item .size-13 {
        font-size: 11px; /* ← размер шрифта подписи на мобильном */
        line-height: 1.15;
    }
    /* .home-main--block-3 .home-main__item--wide .grid-product__item > div {
        overflow-wrap: break-word;
        hyphens: auto;
    } */
}

/* ==========================================================================
   БЛОК КУРСОВ ВАЛЮТ (template-parts/currency-rates.php)
   ========================================================================== */

.cbu-rates-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 70%;
    box-sizing: border-box;
}
/* Кнопка «Все валюты» внутри .cbu-rates-card — прижимается к нижнему краю
   карточки через margin-top: auto (flex-column). */
.cbu-rates-card > .button {
    margin-top: auto;
}
/* На мобильных карточка тянется по высоте строки home-main (включая высоту
   соседних блоков с большим контентом), и margin-top: auto уводит кнопку
   далеко вниз за визуальные пределы списка курсов. Возвращаем обычный отступ
   и сбрасываем height у карточки, чтобы она была по содержимому. */
@media (max-width: 767px) {
    .cbu-rates-card {
        height: auto !important;
    }
    .home-main > .home-main__item .cbu-rates-card {
        height: auto !important;
    }
    .cbu-rates-card > .button {
        margin-top: 8px !important;
    }
}

@media (max-width: 767px) {
    .home-main--block-3 .home-main__item--carousel > h1 {
        margin-bottom: .75rem;
    }
    body.home main > section{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    body.home main > section + section{
        padding-top: 0;
    }
    section{
        padding: 40px 0;
    }
    .home-main{
        row-gap: 40px;
    }
    .home-main--block-3 .home-main__item--carousel .web-stories-list {
        min-height: 0;
        height: auto;
        padding: 0;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .home-main--block-3 .home-main__item--carousel .web-stories-list__inner-wrapper,
    .home-main--block-3 .home-main__item--carousel .web-stories-list__carousel,
    .home-main--block-3 .home-main__item--carousel .glider,
    .home-main--block-3 .home-main__item--carousel .glider-contain,
    .home-main--block-3 .home-main__item--carousel .glider-track {
        min-height: 0 !important;
        height: auto !important;
    }
}

.cbu-rates__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cbu-rates__list {
    display: flex;
    flex-direction: column;
}

.cbu-rates__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cbu-rates__row:last-child {
    border-bottom: none;
}

.cbu-rates__currency {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbu-rates__flag {
    font-size: 1.4rem;
    line-height: 1;
}

.cbu-rates__names {
    display: flex;
    flex-direction: column;
}

.cbu-rates__value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* ==========================================================================
   КАРУСЕЛЬ БЛОКОВ (CPT carousel_block)
   Количество видимых слайдов задаётся в assets/js/add.js → функция visibleCount().
   Ширина каждого слайда вычисляется автоматически на основе ширины контейнера.
   ========================================================================== */

.section-carousel {
    /* ─────────────────────────────────────────────────────────────────────
       Отступ секции карусели сверху и снизу.
       Измени цифру (px), чтобы увеличить или уменьшить воздушность блока.
       ───────────────────────────────────────────────────────────────────── */
    padding: 0 0;
}

.carousel-wrap {
    position: relative;
}

.carousel-overflow {
    /* Обрезает слайды, выходящие за видимую область. Не меняй. */
    overflow: hidden;
}

.carousel-track {
    display: flex;
    /* ─────────────────────────────────────────────────────────────────────
       Отступ между слайдами (gap).
       Если меняешь это значение — измени также запасное значение gap
       в assets/js/add.js → функция setWidths(), строка: || 16
       Оба числа должны совпадать.
       ───────────────────────────────────────────────────────────────────── */
    gap: 16px;
    transition: transform .35s ease;
}

.carousel-slide {
    /* Ширина задаётся через JS (функция setWidths в add.js).
       Количество слайдов в ряду меняется там же. */
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* ─────────────────────────────────────────────────────────────────────
       Внутренние отступы внутри карточки слайда.
       ───────────────────────────────────────────────────────────────────── */
    gap: 16px;
    padding: 24px;
    /* ─────────────────────────────────────────────────────────────────────
       Цвет и толщина рамки карточки.
       Измени #f0f0f0 на любой hex-цвет, например #d0e8ff — голубая рамка.
       ───────────────────────────────────────────────────────────────────── */
    border: 1.5px solid #f0f0f0;
    /* ─────────────────────────────────────────────────────────────────────
       Скругление углов карточки (px).
       0 — прямые углы, 16px — текущие скруглённые, 50% — круг.
       ───────────────────────────────────────────────────────────────────── */
    border-radius: 16px;
    /* ─────────────────────────────────────────────────────────────────────
       Цвет фона карточки слайда.
       #fff — белый (как у блока курсов валют).
       ───────────────────────────────────────────────────────────────────── */
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}

.carousel-slide:hover {
    /* Цвет рамки карточки при наведении мыши */
    border-color: #ccc;
}

.carousel-slide__img img {
    width: 100%;
    /* ─────────────────────────────────────────────────────────────────────
       Высота картинки внутри слайда (px).
       Картинка обрезается до этой высоты (object-fit: cover).
       Увеличь, если картинки высокие; уменьши, если карусель занимает много места.
       ───────────────────────────────────────────────────────────────────── */
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.carousel-slide__excerpt {
    /* Цвет и межстрочный интервал текста-анонса под заголовком слайда */
    color: #666;
    line-height: 1.5;
}

.carousel-btn {
    /* Кнопки «‹» и «›» — навигация по слайдам */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* ─────────────────────────────────────────────────────────────────────
       Размер кнопки (width = height).
       ───────────────────────────────────────────────────────────────────── */
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: border-color .15s;
}

.carousel-btn:hover {
    border-color: #333;
}

.carousel-btn svg {
    width: 16px;
    height: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Положение кнопок «‹» и «›» внутри блока карусели.
   Положительное значение — кнопка внутри карточек.
   Отрицательное значение (например -20px) — кнопка выходит за рамку блока.
   Если карусель стоит в узком контейнере — используй положительные значения.
   ───────────────────────────────────────────────────────────────────────────── */
.carousel-btn--prev { left: 8px; }
.carousel-btn--next { right: 8px; }

.carousel-dots {
    display: flex;
    justify-content: center;
    /* ─────────────────────────────────────────────────────────────────────
       Отступ между точками-индикаторами (px).
       ───────────────────────────────────────────────────────────────────── */
    gap: 6px;
    margin-top: 16px;
}

.carousel-dot {
    /* Неактивная точка — размер и цвет */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background .15s;
}

.carousel-dot.is-active {
    /* Активная точка — более широкая и тёмная.
       Измени background на нужный цвет акцента. */
    background: #333;
    width: 18px;
    border-radius: 3px;
}

/* ==========================================================================
   СТРАНИЦА ОТДЕЛЬНОГО БЛОКА КАРУСЕЛИ (single-carousel_block.php)
   Открывается при переходе по ссылке слайда (/services/название/).
   ========================================================================== */
.carousel-single {
    /* ─────────────────────────────────────────────────────────────────────
       Максимальная ширина текста на отдельной странице блока.
       Уменьши, если текст слишком широкий.
       ───────────────────────────────────────────────────────────────────── */
    padding: 40px 0;
    max-width: 800px;
    margin: 0 auto;
}

.carousel-single__title {
    margin: 0 0 24px;
}

.carousel-single__img {
    margin-bottom: 24px;
}

.carousel-single__img img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.carousel-single__content {
    /* ─────────────────────────────────────────────────────────────────────
       Размер и межстрочный интервал основного текста отдельной страницы.
       ───────────────────────────────────────────────────────────────────── */
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

/* Количество видимых слайдов на разных экранах задаётся в add.js → visibleCount() */

@media (max-width: 560px) {
    .carousel-slide {
        padding: 16px;
    }

    .carousel-slide__img img {
        /* Высота картинки на мобильном устройстве */
        height: 200px;
    }

    .carousel-btn--prev { left: 4px; }
    .carousel-btn--next { right: 4px; }
}

/* ── Карточки ипотеки на главной — кнопка прижата к низу ────────────────── */
.credit-item-block > .button {
    margin-top: auto;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .single-hero-params {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 12px;
    }

    .single-hero-param-value {
        font-size: 1.25rem;
    }

    .single-apply-block {
        flex-direction: column;
        align-items: flex-start;
    }

    .single-conditions-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .single-conditions-value {
        text-align: left;
    }
}

/* ==========================================================================
   МОДАЛЬНАЯ ФОРМА ЗАЯВКИ (#modal-apply)
   ========================================================================== */

/*
 * critical.css задаёт глобально "form { display: block }" — это авторское
 * правило перебивает встроенное браузерное [hidden]{display:none} (UA-стили
 * всегда слабее авторских независимо от специфичности). Без строчки ниже
 * form.hidden = true из add.js не скрывает #form-apply на шагах 2-3.
 */
#form-apply[hidden] {
    display: none;
}

/* ── Контейнер модала — переопределяем ширину ────────────────────────────── */
.modal-apply-main {
    width: 100%;
    max-width: 560px;
    max-height: none;
    overflow: visible;
    border-radius: 24px;
}

#modal-apply,
#modal-apply-confirm {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 40px 16px;
    box-sizing: border-box;
    background-color: rgba(10, 6, 31, .72);
}

#modal-apply .modal-apply-main,
#modal-apply-confirm .modal-apply-main {
    position: relative;
    height: auto;
    min-height: calc(100vh - 80px);
    align-items: center;
}

#modal-apply .modal-content,
#modal-apply-confirm .modal-content {
    height: auto;
    max-height: none;
    align-self: auto;
    overflow: visible;
    border-radius: 24px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .32);
}

#modal-apply .close-modal,
#modal-apply-confirm .close-modal {
    top: 12px;
    right: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-radius: 50%;
}

#modal-apply .modal-head,
#modal-apply-confirm .modal-head {
    padding: 34px 40px 30px;
    border-radius: 24px 24px 0 0;
    color: #fff;
    background: linear-gradient(135deg, #5c2ee4 0%, #8337f0 100%);
}

#modal-apply .modal-head .size-20,
#modal-apply-confirm .modal-head .size-20 {
    color: #fff;
}

/* ── Подзаголовок банк · программа (шаг 1) / описание шага (шаг 2-3) ─────── */
.modal-apply-subtitle {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

/* ── Прогресс-бар шагов (1 форма / 2 SMS / 3 успех) ──────────────────────── */
.form-apply-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.form-apply-progress-line {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
}

.form-apply-progress-line.is-active {
    background: #20d181;
}

.form-apply-progress-line.is-current {
    background: #fff;
}

.form-apply-step {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
}

/* ── Сетка полей ─────────────────────────────────────────────────────────── */
.form-apply {
    padding: 40px;
}

.form-apply-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.form-apply-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.form-apply-field--full {
    grid-column: 1 / -1;
}

/* ── Метка ───────────────────────────────────────────────────────────────── */
.form-apply-label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    color: #74738f;
    font-weight: 800;
    background: white;
    padding-right: 10px;
}

/* ── Инпут ───────────────────────────────────────────────────────────────── */
.form-apply-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 2px solid #e2e0e8;
    border-radius: 8px;
    font-size: 14px;
    color: #0e0e13;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
    outline: none;
}

.form-apply-input:focus {
    border-color: #b9aaf4;
    outline: 3px solid rgba(101, 51, 230, .2);
}

.form-apply-input::placeholder {
    color: #bbb;
}

.form-apply-input:invalid:not(:placeholder-shown) {
    border-color: #e74c3c;
}

/* ── Honeypot: скрыто визуально и от скринридеров ───────────────────────── */
.form-apply-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Телефон: статичный префикс +998 (флаг) + поле под 9 локальных цифр ──── */
.form-apply-phone {
    display: flex;
    overflow: hidden;
    border: 2px solid #ddd6f2;
    border-radius: 8px;
    background: #f7f4ff;
    transition: border-color .15s;
}

.form-apply-phone:focus-within {
    border-color: #b9aaf4;
    outline: 3px solid rgba(101, 51, 230, .2);
}

.form-apply-phone-code {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 112px;
    padding: 0 18px;
    border-right: 2px solid #ddd6f2;
    background: #f7f4ff;
    color: #17162a;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.form-apply-phone-flag {
    display: block;
    width: 24px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(21, 21, 33, .08);
}

.form-apply-phone-input {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #333;
    font-size: 14px;
    outline: none;
}

.form-apply-phone-input::placeholder {
    color: #bbb;
}

/* ── Плитки-радио (доход / есть ли кредиты) ─────────────────────────────── */
.form-apply-choice-group {
    margin: 28px 0 0;
    padding: 28px 0 0;
    border: 0;
    border-top: 2px solid #e6e1f7;
}

.form-apply-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 0;
}

.form-apply-choice-grid--two {
    grid-template-columns: repeat(2, 1fr);
}

.form-apply-choice {
    display: block;
    cursor: pointer;
}

.form-apply-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-apply-choice span {
    display: grid;
    place-items: center;
    min-height: 50px;
    padding: 8px 16px;
    border: 2px solid #e2e0e8;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.form-apply-choice input:checked + span {
    border-color: #6533e6;
    color: #6533e6;
    background: #f2edff;
}

.form-apply-choice input:focus-visible + span {
    outline: 3px solid rgba(101, 51, 230, .2);
}

/* ── Согласие на обработку персональных данных ──────────────────────────── */
.form-apply-consent {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 28px;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
    cursor: pointer;
}

.form-apply-consent input {
    appearance: none;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid #ddd6f2;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.form-apply-consent input::before {
    content: "";
    width: 10px;
    height: 6px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg) scale(0);
    transition: transform .15s ease;
}

.form-apply-consent input:checked {
    border-color: #6533e6;
    background: #6533e6;
}

.form-apply-consent input:checked::before {
    transform: rotate(-45deg) scale(1);
}

.form-apply-consent input:focus-visible {
    outline: 3px solid rgba(101, 51, 230, .2);
}

.form-apply-consent a {
    color: #572df0;
    text-decoration: none;
}

/* ── Radio-кнопки (используются в форме «Быстрый подбор», template-parts/qs-form.php) ── */
.form-apply-radios {
    display: flex;
    gap: 24px;
    padding: 8px 0;
}

.form-apply-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.form-apply-radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #333;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Сообщения об успехе / ошибке ────────────────────────────────────────── */
.apply-msg {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.apply-msg--success {
    background: #e8f5e9;
    color: #2e7d32;
}

.apply-msg--error {
    background: #fdecea;
    color: #c62828;
}

/* ── Диалог быстрой подачи (#modal-apply-confirm) ───────────────────────────
   Переиспользует .modal / .modal-content / .modal-head из async.css.
   Здесь только специфика трёх кнопок и поясняющего текста. */
.modal-confirm-text {
    margin: 0 0 1.25rem;
    font-size: 14px;
    color: var(--color-D60, #6b7280);
    line-height: 1.4;
}

.modal-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.modal-confirm-actions .button {
    width: 100%;
    height: 2.75rem;
}

/* ── Шаг 2 — SMS-подтверждение (#apply-sms-step, визуальная заглушка) ───────
   Показывается вместо формы внутри #modal-apply. Переиспользует .apply-msg;
   ниже — специфика полей-кода и кнопок. */
.apply-sms-step {
    padding: 40px;
}

.apply-sms-sent {
    margin: 0 0 1.25rem;
    font-size: 14px;
    color: var(--color-D60, #6b7280);
    line-height: 1.4;
}

/* Ячейки кода. Число ячеек задаётся PHP-константой NARXTOP_SMS_CODE_LENGTH
   (inc/sms-verify.php), поэтому раскладка — flex с центрированием, а не сетка
   с фиксированным числом колонок: группа остаётся по центру при любой длине кода. */
.apply-sms-codes {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.apply-sms-code-cell {
    flex: 0 1 56px;   /* базовая ширина; на узких экранах ячейки ужимаются */
    min-width: 0;     /* иначе intrinsic-ширина input не даст сжаться */
    aspect-ratio: 1;
    border: 2px solid #e2e0e8;
    border-radius: 8px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    outline: none;
    transition: border-color .15s;
}

.apply-sms-code-cell:focus {
    border-color: #b9aaf4;
    outline: 3px solid rgba(101, 51, 230, .2);
}

.apply-sms-actions {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.apply-sms-actions .button {
    width: 100%;
    height: 2.75rem;
}

.apply-sms-actions .button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Шаг 3 — экран успеха (#apply-success-step) ─────────────────────────── */
.apply-success-step {
    padding: 40px;
    text-align: center;
}

.apply-success-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    place-items: center;
    border-radius: 50%;
    background: #def8ee;
    color: #08080a;
    font-size: 30px;
    font-weight: 700;
}

.apply-success-title {
    margin: 0 0 .75rem;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.apply-success-text {
    margin: 0;
    font-size: 14px;
    color: #73728d;
    line-height: 1.5;
}

.apply-success-note {
    margin: 1.5rem 0 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: #eee8ff;
    color: #6533e6;
    font-size: 13px;
    font-weight: 700;
}

/* ── Подвал формы ────────────────────────────────────────────────────────── */
.form-apply-footer {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.form-apply-submit {
    width: 100%;
    min-height: 52px;
    border: 2px solid #d9d7de;
    color: #101014;
    background: #fff;
}

#modal-apply .button-black,
#modal-apply-confirm .button-black {
    border: 2px solid #d9d7de !important;
    color: #101014 !important;
    background: #fff !important;
}

#modal-apply .button-black:hover,
#modal-apply-confirm .button-black:hover {
    border-color: #b9aaf4 !important;
    color: #6533e6 !important;
    background: #f2edff !important;
}

.form-apply-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    #modal-apply,
    #modal-apply-confirm {
        padding: 0;
    }

    .modal-apply-main {
        min-height: 100vh;
        border-radius: 0;
    }

    #modal-apply .modal-content,
    #modal-apply-confirm .modal-content {
        border-radius: 0;
    }

    #modal-apply .modal-head,
    #modal-apply-confirm .modal-head,
    .form-apply,
    .apply-sms-step,
    .apply-success-step {
        padding: 30px 24px;
    }

    #modal-apply .modal-head,
    #modal-apply-confirm .modal-head {
        border-radius: 0;
    }

    .form-apply-grid {
        grid-template-columns: 1fr;
    }

    .form-apply-field--full {
        grid-column: 1;
    }

    .form-apply-footer {
        justify-content: stretch;
    }

    .form-apply-submit {
        width: 100%;
    }

    .form-apply-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .apply-sms-codes {
        gap: 6px;
    }

    .apply-sms-code-cell {
        font-size: 16px;
    }
}

/* Совсем узкие экраны — доход/кредиты в один столбец, код — мельче гап. */
@media (max-width: 360px) {
    .form-apply-choice-grid {
        grid-template-columns: 1fr;
    }

    .form-apply-choice-grid--two {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    /* ── Горизонтальный скролл как у блока «Часто ищут» (.fast-tag) ─────────
       display: flex — горизонтальный ряд карточек.
       overflow: auto — горизонтальный скролл.
       Отрицательные margin + padding — блок выходит за padding контейнера,
       создавая эффект edge-to-edge с видимым отступом по краям.
       Скроллбар скрыт через -webkit-scrollbar: none.
       Ширина карточки (min-width) задаёт сколько карточек видно одновременно.
       ──────────────────────────────────────────────────────────────────────── */
    .credit-item-blocks {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        box-sizing: border-box;
        max-width: calc(100% + 2rem);
        gap: 0.75rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        grid-template-columns: unset;
    }
    .credit-item-blocks::-webkit-scrollbar { display: none; }
    .credit-item-block {
        flex: 0 0 85vw; /* ← ширина карточки: 75% экрана — видно ~1.3 карточки */
        min-width: 0;
        max-width: 320px;
    }

    .card-credit {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        gap: 0.75rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        grid-template-columns: unset;
    }
    .card-credit::-webkit-scrollbar { display: none; }
    .card-credit-item {
        flex: 0 0 65vw; /* ← ширина карточки: 65% экрана */
        min-width: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   БЛОКИ КАТЕГОРИЙ АВТОКРЕДИТОВ (front-page.php → секция «Выгодные автокредиты»)
   • Блок имеет ту же ширину/паддинги, что у ипотек (.credit-item-block).
   • Высоту приравниваем к ипотечным карточкам через min-height.
     При желании синхронизировать — измеряй .credit-item-block в секции ипотек
     и подгоняй min-height ниже.
   • Внутри: заголовок + картинка авто (растягивается по flex:1) + кнопка.
   • Картинки кладутся в themes/narxtop-theme/images/auto-categories/<slug>.webp
   ───────────────────────────────────────────────────────────────────────────── */
.credit-item-block--auto-cat {
    min-height: 17rem; /* ← подгоняй под высоту блоков ипотек */
}
.credit-item-block--auto-cat .auto-cat-img {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 7rem;
    object-fit: contain; /* меняй на cover, если нужно «во всё поле» с обрезкой */
    object-position: center;
    border-radius: 0.5rem;
}
.credit-item-block--auto-cat .auto-cat-img--placeholder {
    background:
        linear-gradient(135deg, #f4f5f7 0%, #e6e8ec 100%);
    border: 1px dashed #d6d9de;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Логотип банка в карточках .credit-item-block (front-page «Выгодные …»).
   Глобальное правило `picture { width:100%; justify-content:center }` из
   critical.css растягивало <picture> на всю ширину строки и сдвигало контент
   к центру. Здесь возвращаем компактный inline-режим — лого слева, рядом имя.
   ───────────────────────────────────────────────────────────────────────────── */
.credit-item-block-bank {
    justify-content: flex-start;
}
.credit-item-block-bank picture {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: center;
    margin-right: .625rem;
}
.credit-item-block-bank picture img {
    margin-right: 0; /* отступ перенесён на сам <picture> */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hero archive-mortgages.php — ограничиваем контент левой половиной,
   чтобы текст не заезжал на «домик» в правой части баннера.
   На мобильных (≤767px) ограничение снимается — баннер уже узкий.
   ───────────────────────────────────────────────────────────────────────────── */
.section-picture--mortgages         .container > *,
.section-picture--credits           .container > *,
.section-picture--auto_credits      .container > *,
.section-picture--business_credits  .container > *,
.section-picture--microloans        .container > *,
.section-picture--deposits          .container > *,
.section-picture--credit_cards      .container > *,
.section-picture--internet          .container > * {
    max-width: 50%;
}

/* Размер описания (archive_desc_*) под заголовком в hero всех архивных страниц */
.section-picture--mortgages         .container > p,
.section-picture--credits           .container > p,
.section-picture--auto_credits      .container > p,
.section-picture--business_credits  .container > p,
.section-picture--microloans        .container > p,
.section-picture--deposits          .container > p,
.section-picture--credit_cards      .container > p,
.section-picture--internet          .container > p {
    font-size: .825rem;
}
@media (max-width: 767px) {
    .section-picture--mortgages         .container > *,
    .section-picture--credits           .container > *,
    .section-picture--auto_credits      .container > *,
    .section-picture--business_credits  .container > *,
    .section-picture--microloans        .container > *,
    .section-picture--deposits          .container > *,
    .section-picture--credit_cards      .container > *,
    .section-picture--internet          .container > * {
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Кнопки «Рассчитать условия» (btn_calc_submit) — везде в теме.
   Цвет текста + рамка: #7001ff, фон: #eee3fc
   ───────────────────────────────────────────────────────────────────────────── */
.button-color-border {
    border: 2px solid #7001ff !important;
    color: #7001ff !important;
    background: #eee3fc !important;
    font-weight: 700;
}
.button-color-border:hover {
    background: #ddc8fa !important; /* чуть темнее при наведении */
}

.header-submenu__icon img,
.header-submenu__icon picture img {
    width: 40px;             /* ← меняй размер здесь */
    height: 40px;
    object-fit: contain;
}

.fast-tag__icon img,
.fast-tag__icon picture img {
    width: 40px;   /* ← меняй размер здесь */
    height: 40px;
    object-fit: contain;
}

/* ==========================================================================
   КАРТОЧКИ ИПОТЕКИ В КАЛЬКУЛЯТОРЕ (.offer-banks)
   В архиве .result-item рассчитан на полную ширину страницы.
   В калькуляторе колонка ~400–480px — calc(100% - 40.8125rem) даёт отрицательную
   ширину для .result-item-company, и блок с именем банка/ипотеки схлопывается.
   Переводим карточку в колоночный режим и снимаем фиксированные ширины.
   ========================================================================== */
.offer-banks .result-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.offer-banks .result-item-company,
.offer-banks .result-item-info,
.offer-banks .result-item-button {
    width: 100%;
}

.offer-banks .result-item-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    white-space: normal;
}

/* ==========================================================================
   КАРТОЧКИ ЛИСТИНГОВ — раскладка company / info / button (десктоп ≥1024px)
   --------------------------------------------------------------------------
   Возвращаемся к прежней компоновке (чтобы кнопка не уезжала на новую строку):
     .result-item-company → фикс. ширина по типу карточки (flex-shrink: 0).
     .result-item-info    → flex: 1 (растягивается на оставшееся место).
     .result-item-button  → 21rem фикс (см. блок ниже).

   Чтобы блок Параметры визуально был ближе к кнопке, на info добавлен
   justify-content: flex-end — это сдвигает содержимое к правому краю
   контейнера, БЕЗ изменения ширин (строка остаётся одной).

   Меняй цифру в width на *.result-item-company — ширина блока банка.
   Мобильные ≤1023px — всё в столбик 100% (медиа-запрос внизу секции).
   ========================================================================== */

.result-item--credit .result-item-company          { width: 18rem; flex-shrink: 0; }
.result-item--credit .result-item-info             { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

.result-item--credit-card .result-item-company     { width: 18rem; flex-shrink: 0; }
.result-item--credit-card .result-item-info        { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

.result-item--mortgage .result-item-company        { width: 19rem; flex-shrink: 0; }
.result-item--mortgage .result-item-info           { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

.result-item--auto-credit .result-item-company     { width: 18rem; flex-shrink: 0; }
.result-item--auto-credit .result-item-info        { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

.result-item--business-credit .result-item-company { width: 18rem; flex-shrink: 0; }
.result-item--business-credit .result-item-info    { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

.result-item--deposit .result-item-company         { width: 18rem; flex-shrink: 0; }
.result-item--deposit .result-item-info            { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

.result-item--microloan .result-item-company       { width: 18rem; flex-shrink: 0; }
.result-item--microloan .result-item-info          { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

.result-item--internet .result-item-company        { width: 18rem; flex-shrink: 0; }
.result-item--internet .result-item-info           { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; }

/* Десктоп: у интернет-карточек значения длиннее (сегмент/технология/цена) — без
   ужатия блок параметров перерастал ширину и выталкивал кнопку «Оставить заявку»
   на новую строку (влево). Разрешаем блоку ужиматься и переносить значения —
   кнопка жёстко остаётся справа на той же строке. */
@media (min-width: 1024px) {
    .result-item--internet .result-item-info {
        min-width: 0;
        flex-wrap: wrap;
        white-space: normal;
        row-gap: .25rem;
    }
    .result-item--internet .result-item-info .offer-bank-pay {
        white-space: normal;
    }
}

/* ── Шрифт имени банка в карточке — чуть меньше, чтобы помещались длинные имена ──
   Базовый класс size-16 (=1rem) в шаблоне; здесь точечно уменьшаем только
   заголовок в .result-item-company. Меняй font-size, если нужно ещё меньше. */
.result-item-company .offer-bank-name-title {
    font-size: 0.875rem; /* 14px (было 16px) */
}

/* ── Мобильные ≤1023px — все блоки на всю ширину, флексы сбрасываются ───── */
@media (max-width: 1023px) {
    .result-item--credit .result-item-company,
    .result-item--credit .result-item-info,
    .result-item--credit-card .result-item-company,
    .result-item--credit-card .result-item-info,
    .result-item--mortgage .result-item-company,
    .result-item--mortgage .result-item-info,
    .result-item--auto-credit .result-item-company,
    .result-item--auto-credit .result-item-info,
    .result-item--business-credit .result-item-company,
    .result-item--business-credit .result-item-info,
    .result-item--deposit .result-item-company,
    .result-item--deposit .result-item-info,
    .result-item--microloan .result-item-company,
    .result-item--microloan .result-item-info,
    .result-item--internet .result-item-company,
    .result-item--internet .result-item-info {
        width: 100%;
        min-width: 0;
        flex: none;
    }
}

/* ==========================================================================
   КНОПКИ «ОТПРАВИТЬ ЗАЯВКУ» В КАРТОЧКАХ ЛИСТИНГОВ — шире (≈2.2×)
   База .result-item-button — 9.5625rem (critical.css). Расширяем до 21rem
   и растягиваем сам .button на всю ширину контейнера.
   Блок параметров (.result-item-info) у всех типов карточек стоит flex:1,
   поэтому он просто ужмётся — общая вёрстка остаётся сбалансированной.
   Применяется ко всем типам карточек, включая кредитные карты.
   На мобильных (≤1023px) кнопки и так на 100% — правило только для десктопа.
   ── меняй число в width (rem) ────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .result-item .result-item-button {
        width: 21rem; /* ← меняй здесь */
    }
    .result-item .result-item-button .button {
        width: 100%;
    }
}

/* ── Калькулятор: однаколоночный layout на всю ширину ────────────────────── */
.calculator-flex {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ── Список предложений в калькуляторе: фон как у страницы, зазор виден ──── */
#calc-offers {
    background: var(--color-D06);
    border-radius: .5rem;
    padding: .5rem;
    margin-top: 0;
}

/* ── Горизонтальные ряды внутри левой колонки ────────────────────────────── */
.calc-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.calc-row > .form-item {
    flex: 1;
    min-width: 0;
}
@media (max-width: 575px) {
    .calc-row {
        flex-direction: column;
    }
}

/* ==========================================================================
   JOURNAL — карточка материала с обложкой как фон всего блока
   Используется в: front-page.php, archive-journal.php, taxonomy-journal_rubric.php
   Активируется модификатором .material--has-pic, который ставится при наличии thumbnail.
   ========================================================================== */
/* Карточка статьи с превью-картинкой: КАРТИНКА В ВЕРХНЕЙ ПОЛОВИНЕ карточки,
   ТЕКСТ В НИЖНЕЙ. Прежний оверлей (картинка на всю карту + белый текст поверх)
   убран — теперь обычная двухсекционная карта на белом фоне.
   ── меняй здесь, если нужно изменить пропорции или высоту карточки ────────── */
.material--has-pic {
    position: relative;
    min-height: 18rem;       /* общая высота карточки; половина уйдёт под картинку */
    overflow: hidden;
    isolation: isolate;
}
.material--has-pic .material-pic {
    flex: 0 0 50%;            /* верхняя половина карточки */
    width: 100%;
    height: 50%;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.material--has-pic .material-pic picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .5s ease;
}
.material--has-pic .material-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.material--has-pic .material-content {
    flex: 1 1 50%;            /* нижняя половина — обычная белая, без оверлея */
    padding: 1rem 1.25rem 1.25rem;
}
.material--has-pic:hover .material-pic picture {
    transform: scale(1.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Цвета активных кнопок-чекбоксов в фильтрах разделов
   (Тип недвижимости в archive-mortgages.php, Категории + Онлайн в archive-auto_credits.php,
    Платёжные системы + Льготный период + Онлайн в archive-credit_cards.php и т.п.).
   Базовый стиль задан в critical.css → .form-radio input:checked+.form-radio-label
   и .form-radio-label.is-active. Здесь полностью переопределяем цвета.
   ───────────────────────────────────────────────────────────────────────────── */
.form-radio input:checked + .form-radio-label,
.form-radio-label.is-active {
    color: #7001ff;
    border-color: #7001ff !important;
    background-color: #eee3fc !important;
}

/* Кнопка «Все» в мультивыборе марки (archive-car.php) — это <button>, а не <label>,
   поэтому сбрасываем нативный вид, чтобы выглядела как чип .form-radio-label. */
.car-chip-btn {
    font: inherit;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

/* Кнопки быстрого заполнения интервала цены (archive-car.php) — под полями
   от/до. Набор зависит от валюты; неактивный набор скрыт через [hidden]. */
.car-price-presets {
    margin-top: .5rem;
}
.car-price-presets__set {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.car-price-presets__set[hidden] {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hover для всех текстовых ссылок (не-кнопок).
   `:not([class*="button"])` исключает .button, .button-black, .button-bg,
   .button-color-border, .button-blue-border, .button-black-border, .button-border
   и т.п. — у этих классов свой hover.
   Дополнительно явно перекрываем ранее заданные hover-правила
   (.search-menu__items a:hover, .link-blue:hover) чтобы цвет был единый.
   ───────────────────────────────────────────────────────────────────────────── */
a:not([class*="button"]):hover,
.search-menu__items a:hover,
.link-blue:hover,
.header-menu__link:hover {
    color: #7001ff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Кнопки .button-blue-border (Все валюты, Посмотреть все карты,
   Посмотреть все ипотеки, Посмотреть все автокредиты и др.) — оформляем
   как активные кнопки-чекбоксы фильтров: текст и рамка #7001ff, фон #eee3fc.
   ───────────────────────────────────────────────────────────────────────────── */
.button-blue-border {
    color: #7001ff !important;
    border: 1px solid #7001ff !important;
    background: #eee3fc !important;
}
.button-blue-border:hover {
    color: #7001ff !important;
    border-color: #7001ff !important;
    background: #ddc8fa !important; /* чуть темнее при наведении */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Карточки списков продуктов в архивах (.result-item-block) —
   тонкая рамка зелёного цвета (из логотипа) при наведении.
   Используется в archive-{mortgages,credits,auto_credits,business_credits,
   microloans,deposits,credit_cards,banks}.php и связанных AJAX-рендерах.
   ───────────────────────────────────────────────────────────────────────────── */
.result-item-block {
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.result-item-block:hover {
    border-color: #8DE61F;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Иконка рубрики Журнала (слева от названия) — в блоке тегов на главной
   и в меню «Часто ищут». Перекрываем глобальное `picture { width:100%; ... }`,
   чтобы картинка была компактного размера и не растягивалась.
   ───────────────────────────────────────────────────────────────────────────── */
.fast-tag__pic,
.search-menu__pic {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    /* ↓↓ ОТСТУП МЕЖДУ ИКОНКОЙ И ТЕКСТОМ РУБРИКИ — меняй здесь ↓↓ */
    margin-right: -1rem;
    /* ↑↑ ОТСТУП ↑↑ */
    vertical-align: middle;
}
.fast-tag__pic picture,
.search-menu__pic picture {
    /* ↓↓ РАЗМЕР ИКОНКИ РУБРИКИ ЖУРНАЛА — меняй здесь ↓↓
       Используется на главной (.fast-tag и .search-menu) и в archive-journal.php
       (страница /journal/). Чем больше — тем крупнее иконка слева от названия. */
    width: 3rem;
    height: 3rem;
    /* ↑↑ РАЗМЕР ИКОНКИ ↑↑ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.fast-tag__pic img,
.search-menu__pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ЧИПЫ РУБРИК ЖУРНАЛА в ленте .fast-tag (front-page.php + archive-journal.php).
   Жёсткий горизонтальный лейаут на всех ширинах: [иконка][название] в одну
   строку, без переносов. Базовые правила (display:flex, align-items:center,
   gap:.75rem) — из critical.css; здесь только запрет переноса и скрытие стрелки.
   .search-menu (другая лента) НЕ затрагивается.
   ───────────────────────────────────────────────────────────────────────────── */
.fast-tag .fast-tag__item {
    white-space: nowrap;    /* текст рубрики не переносится — иконка и текст в один ряд */
}
.fast-tag .fast-tag__icon {
    display: none;          /* стрелка в чипе не нужна */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Карточка кредитной карты в archive-credit_cards.php — вместо лого банка
   показываем картинку самой банковской карты (card_photo_png/webp).
   Размер задаём программно: ширина чуть больше иконки лого (80px), пропорция
   карточки 16:10, чтобы не увеличивать высоту строки в карточке-обёртке.
   ───────────────────────────────────────────────────────────────────────────── */
.result-item--credit-card .offer-bank-name-avatar {
    width: 5rem;       /* ~80px — компактно, не ломает существующую сетку */
    flex-shrink: 0;
}
.result-item--credit-card .offer-bank-name-avatar .cc-card-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* перекрываем глобальное правило `picture { width:100%; height:100% }` */
    height: auto;
}
.result-item--credit-card .offer-bank-name-avatar .cc-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: .375rem;
}

/* =============================================================================
   ЛОГОТИПЫ ИНТЕРНЕТ-ПРОВАЙДЕРОВ (internet-companies / internet-providers).
   Файлы лежат в images/internet-logos/full-logos (большие), а базовый
   .offer-bank-name-avatar на десктопе без ширины + глобальное правило
   picture{width:100%;height:100%} → логотип раздувается. Ограничиваем размер,
   как у фото кредитных карт (object-fit: contain).
   ───────────────────────────────────────────────────────────────────────── */
.result-item--internet .offer-bank-name-avatar,
.result-item--internet-company .offer-bank-name-avatar,
.offer-bank-name-avatar--internet {
    width: 5rem;
    flex-shrink: 0;
}
.result-item--internet .offer-bank-name-avatar picture,
.result-item--internet-company .offer-bank-name-avatar picture,
.offer-bank-name-avatar--internet picture {
    display: block;
    width: 100%;
    height: auto;            /* перекрываем глобальное picture{height:100%} */
    aspect-ratio: 16 / 10;
}
.result-item--internet .offer-bank-name-avatar img,
.result-item--internet-company .offer-bank-name-avatar img,
.offer-bank-name-avatar--internet img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: .375rem;
}

/* Карточка интернет-компании без кнопки справа: блок компании занимает место,
   которое базовый calc(100% - 40.8125rem) резервировал под кнопку. Параметры
   (.result-item-info, базовые 31.25rem) остаются справа. */
@media (min-width: 1024px) {
    .result-item--internet-company .result-item-company {
        width: calc(100% - 31.25rem);
    }
}

/* ==========================================================================
   ТЭГИ В КАРТОЧКЕ ИПОТЕКИ (template-parts/mortgage-card.php)
   Поля tn1/tn2/tn3 под текущий язык. Без лейблов, разделитель — точка-разделитель.

   Основная карточка: тэги внутри .result-item-trigger, на одной строке с
   кнопкой «Ещё N предложений». margin-right:auto прижимает тэги влево, кнопка
   остаётся справа (родитель уже flex с justify-content: flex-end).

   Sibling-карточки (доп. предложения банка): триггера нет, тэги выводим на
   отдельной строке через модификатор .result-item-tags--standalone.
   ========================================================================== */
.result-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    line-height: 1.4;
}
.result-item-trigger .result-item-tags {
    margin-right: auto;
}
.result-item-tags--standalone {
    width: 100%;
    margin-top: .5rem;
}

/* ==========================================================================
   ЧИПЫ tn1/tn2/tn3 В КАРТОЧКАХ ЛИСТИНГОВ — ВИЗУАЛЬНЫЙ ВИД
   --------------------------------------------------------------------------
   Это «место для редактирования внешнего вида» чипов.
   Парный модуль (логика, верхний регистр, чтение meta) — функция
   narxtop_render_tn_tags() в functions.php. Там же — шапка модуля
   с описанием всей схемы.

   Цветовая палитра (по уровню tn1/tn2/tn3 — модификатор класса добавляется
   в narxtop_render_tn_tags()): tn1 — фиолетовый, tn2 — зелёный, tn3 — жёлтый.
   Пастельный фон + текст того же оттенка (см. .result-item-tag--tn{1,2,3}).

   Что менять здесь:
     • Фон/цвет текста   → см. модификаторы --tn1/--tn2/--tn3 ниже
     • Скругление углов  → border-radius
     • Размер «поля»     → padding (vert hor) / font-size
     • Перенос строк     → white-space (nowrap / normal)
   Расстояние МЕЖДУ чипами и перенос на новую строку — задаются у
   контейнера .result-item-tags выше (display:flex; flex-wrap; gap).
   ========================================================================== */
.result-item-tag {
    display: inline-block;
    padding: .3rem .625rem;      /* поле вокруг текста — чуть компактнее прежнего */
    border-radius: 999px;        /* полностью скруглённые углы (пилюля) */
    font-size: .75rem;           /* немного меньше, независимо от size-14 контейнера */
    line-height: 1.2;
    white-space: nowrap;
}
.result-item-tag--tn1 {
    background-color: #f1e8fd;
    color: #6d28d9;
}
.result-item-tag--tn2 {
    background-color: #e6f9ef;
    color: #15803d;
}
.result-item-tag--tn3 {
    background-color: #fff6da;
    color: #92700c;
}


/* ──────────────────────────────────────────────────────────────────────────
   КОНТЕНТ ЖУРНАЛА (.single-content)

   Слой 3 варианта C (см. /inc/journal-content/).

   Контент копируется из Word/Outlook и приходит с инлайн-стилями (цвета,
   жирность, выравнивание). Эти правила НЕ ИСПОЛЬЗУЮТ !important — инлайн
   побеждает наши дефолты, а наши дефолты заполняют пробелы там, где Word
   ничего не задал (рамки таблиц, буллиты у списков, отступы).

   Класс .single-content задан на обёртке в single-journal.php.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Таблицы: всегда видимые рамки ─────────────────────────────────────────
   Word ставит на <table> атрибут border="1", но НЕ задаёт border-style на
   каждой ячейке. Современные браузеры в этом случае рисуют рамку только
   у самой таблицы, без сетки. Эти правила восстанавливают сетку. */
.single-content table {
    border-collapse: collapse;
    margin: 1em 0;
    max-width: 100%;
}
.single-content table td,
.single-content table th {
    border: 1px solid #d0d0d0;
    padding: .5em .75em;
    vertical-align: top;
}
.single-content table th {
    background: #f6f6f6;
    font-weight: 700;
    text-align: left;
}

/* ── Страница «О проекте» (.about-content): цветовая гамма таблиц ──────────
   из исходного документа (.temp/NARXTOP_O_Nas_SEO_.html) — тёмно-фиолетовая
   шапка с белым текстом, серая сетка линий, лёгкая фиолетовая «зебра» на
   чётных строках. Скопировано только на этой странице (compound-селектор
   .single-content.about-content), обычные таблицы журнала не затрагивает. */
.single-content.about-content table td,
.single-content.about-content table th {
    border-color: #cccccc;
}
.single-content.about-content table th {
    background: #4a235a;
    color: #ffffff;
}
.single-content.about-content table tr:nth-child(even) td {
    background: #f8f4ff;
}

/* ── Списки ────────────────────────────────────────────────────────────────
   TinyMCE-плагин paste конвертирует Word-«лже-списки» в <ul>/<ol>, но
   список-стили могут быть переопределены глобальной типографикой темы. */
.single-content ul {
    list-style: disc outside;
    padding-left: 1.5em;
    margin: .75em 0;
}
.single-content ol {
    list-style: decimal outside;
    padding-left: 1.75em;
    margin: .75em 0;
}
.single-content li {
    margin: .25em 0;
}
/* Word оборачивает текст пункта в <p> — убираем у такого <p> вертикальные
   отступы, чтобы список не «дышал» лишним. */
.single-content li > p {
    margin: 0;
}

/* ── Картинки ──────────────────────────────────────────────────────────────
   Не позволяем картинкам вылезать за ширину контейнера. */
.single-content img {
    max-width: 100%;
    height: auto;
}

/* ── Заголовки и параграфы ─────────────────────────────────────────────────
   Базовые размеры, если Word не задал свои style. */
.single-content h2 { font-size: 1.5em;  margin: 1.25em 0 .5em; }
.single-content h3 { font-size: 1.25em; margin: 1em 0 .5em; }
.single-content h4 { font-size: 1.1em;  margin: 1em 0 .5em; }
.single-content p  { margin: .5em 0; }

/* ── Цитаты ────────────────────────────────────────────────────────────────
   Word редко паcтит <blockquote>, но если редактор добавил вручную — стиль. */
.single-content blockquote {
    margin: 1em 0;
    padding: .5em 1em;
    border-left: 3px solid #c0c0c0;
    color: #555;
}

/* ── Ссылки ────────────────────────────────────────────────────────────────
   Подчёркивание для читабельности; цвет — из инлайн-style Word, если задан. */
.single-content a {
    text-decoration: underline;
}
.single-content a:hover {
    text-decoration: none;
}

/* ── Цветные плашки (.about-box) — палитра из исходного SEO-документа ──────
   (.temp/NARXTOP_O_Nas_SEO_.html): экспертные цитаты/отзывы и CTA — фиолет,
   советы (💡) — жёлтый, лайфхаки/успех (✅) — зелёный, важное (⚠️) — красный.
   Класс ставится автоматически при импорте контента (archive-about-page.php)
   по эмодзи-маркеру плашки, поверх базового .single-content blockquote. */
.single-content blockquote.about-box {
    border-left-width: 4px;
    border-radius: 6px;
    padding: .75em 1em;
}
.single-content blockquote.about-box--quote {
    background: #f5f0ff;
    border-left-color: #7001ff;
    color: #4a235a;
}
.single-content blockquote.about-box--cta {
    background: #f0e8ff;
    border-left-color: #7001ff;
    color: #4a235a;
}
.single-content blockquote.about-box--tip {
    background: #fffde0;
    border-left-color: #b8860b;
    color: #7a5c00;
}
.single-content blockquote.about-box--success {
    background: #f0fde0;
    border-left-color: #5a9900;
    color: #3f6b00;
}
.single-content blockquote.about-box--warning {
    background: #fff0f0;
    border-left-color: #cc3333;
    color: #a32020;
}



/* ==========================================================================
   МЕТКА «ИНДИВ.» СО ЗНАЧКОМ «?» И ТУЛТИПОМ
   --------------------------------------------------------------------------
   Рендерится через narxtop_render_individual() в functions.php (см. шапку
   модуля «МЕТКА Индив.»). Появляется везде, где форматтеры возвращают
   подпись rate_individual (ставка/взнос/сумма/срок — отсутствуют конкретные
   значения, условия индивидуальные).

   Что менять здесь:
     • Размер/цвет значка «?»  → .rate-individual-tip (width/height/font-size/color)
     • Внешний вид бабла       → .rate-individual-tip__bubble (background/color/padding)
     • Положение бабла         → .rate-individual-tip__bubble (top/bottom, left)
   Текст бабла — в lang/{ru,uz}.php (ключ rate_individual_tip).
   Клик-toggle на мобилках — в assets/js/add.js.
   ========================================================================== */
.rate-individual {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.rate-individual-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: #888;
    font: 600 10px/1 inherit;
    cursor: help;
    user-select: none;
    position: relative;
    vertical-align: middle;
}
.rate-individual-tip:hover,
.rate-individual-tip:focus {
    color: #333;
    outline: none;
}
.rate-individual-tip__bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #2a2a2a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font: 400 12px/1.4 inherit;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 100;
}
.rate-individual-tip__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2a2a2a;
}
.rate-individual-tip:hover .rate-individual-tip__bubble,
.rate-individual-tip:focus .rate-individual-tip__bubble,
.rate-individual-tip.is-open .rate-individual-tip__bubble {
    opacity: 1;
    pointer-events: auto;
}

/* ── Снятие overflow:hidden у родительской карточки на время показа бабла.
   Базово .result-item-block имеет overflow:hidden (для скругления углов,
   critical.css:3852), из-за чего бабл, вылезающий за границы карточки,
   обрезается. Через :has() поднимаем overflow только когда тултип активен —
   остальное время поведение прежнее.
   :has() поддерживается во всех актуальных браузерах (Chrome 105+,
   Safari 15.4+, Firefox 121+). */
.result-item-block:has(.rate-individual-tip:hover),
.result-item-block:has(.rate-individual-tip:focus),
.result-item-block:has(.rate-individual-tip.is-open) {
    overflow: visible;
}

/* ==========================================================================
   CTA-БЛОК КАЛЬКУЛЯТОРА В НИЗУ АРХИВОВ
   --------------------------------------------------------------------------
   Прямоугольный блок «во всю ширину» в самом низу секции калькулятора
   на archive-страницах: слева — кнопка «Рассчитать условия», справа с
   отступом — статический текст-CTA.

   Где используется:
     archive-mortgages.php, archive-credits.php, archive-auto_credits.php,
     archive-business_credits.php, archive-microloans.php, archive-deposits.php
     (вставлено вместо одиночной нижней кнопки «Ссылка на калькулятор»).

   Где редактировать:
     • Текст справа — языковой ключ section_calc_desc в lang/{ru,uz}.php
       (используется тот же ключ, что и в других местах с описанием калькулятора).
     • Размер картинки — width у .calc-cta__icon ниже.
     • Внешний вид (фон, отступы, скругление) — ниже.
     • Раскладка (gap между картинкой и текстом, перенос на мобилке) — ниже.
   ========================================================================== */
/* Весь блок .calc-cta — это <a>, кликается ЦЕЛИКОМ (картинка + текст).
   text-decoration:none и color:inherit нужны, чтобы текст не выглядел как ссылка. */
.calc-cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;                 /* отступ между картинкой и текстом */
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease;
}
.calc-cta:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}
.calc-cta:hover .calc-cta__icon {
    transform: scale(1.05);
}
/* ──────────────────────────────────────────────────────────────────────────
   КАРТИНКА-КАЛЬКУЛЯТОР (calc.webp / calc.png).
   Файл рендерится через narxtop_render_calc_icon() в functions.php.
   --------------------------------------------------------------------------
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  РАЗМЕР КАРТИНКИ — МЕНЯТЬ ЗДЕСЬ ↓↓↓                                  ║
   ║  Значения width и height должны быть ОДИНАКОВЫМИ (картинка квадратная). ║
   ║  Примеры: 3rem=48px (мелко), 4rem=64px, 5rem=80px, 6rem=96px (крупно). ║
   ╚══════════════════════════════════════════════════════════════════════╝
   Высота задана ЯВНО (не auto), потому что в critical.css есть глобальное
   правило `picture { height: 100% }` — без явной высоты у родителя картинка
   схлопывается в 0px (был баг «белый блок»).
   ──────────────────────────────────────────────────────────────────────── */
.calc-cta__icon {
    flex-shrink: 0;
    display: block;
    width:  4rem;                /* ← МЕНЯЙ РАЗМЕР ЗДЕСЬ (ширина) */
    height: 4rem;                /* ← И ЗДЕСЬ (высота, синхронно с width) */
    transition: transform .15s ease;
}
.calc-cta__icon picture {
    display: block;
    width: 100%;
    height: 100%;
    /* Сброс глобальных flex-свойств у <picture> из critical.css. */
    align-items: stretch;
    justify-content: stretch;
}
.calc-cta__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;         /* картинка вписывается с сохранением пропорций */
}
/* Текстовый блок справа от картинки.
   Может содержать только описание (.calc-cta__desc) или связку «заголовок +
   описание» (.calc-cta__title + .calc-cta__desc). */
.calc-cta__text {
    flex: 1;
    min-width: 0;
    color: #333;
    line-height: 1.35;
}
.calc-cta__title {
    font-size: 1.125rem;          /* 18px */
    font-weight: 700;
    margin-bottom: .25rem;
}
.calc-cta__desc {
    font-size: .9375rem;          /* 15px */
    color: #555;
}
@media (max-width: 1023px) {
    .calc-cta {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
    }
    .calc-cta__text {
        text-align: center;
    }
}

/* ==========================================================================
   МОБИЛЬНАЯ РАСКЛАДКА КАРТОЧЕК: чипы tn ВЫШЕ кнопки «Отправить заявку»
   --------------------------------------------------------------------------
   На десктопе чипы (tn1/tn2/tn3) лежат внутри .result-item-trigger вместе с
   кнопкой «Ещё N предложений» и рендерятся как отдельная нижняя строка.
   На мобильных нужно: чипы перед кнопкой заявки + во всю ширину.

   Без правки HTML: на .result-item-trigger ставим `display: contents`,
   тогда его дети (.result-item-tags и .result-item-button-trigger) становятся
   прямыми flex-items у .result-item — и их можно переставить через `order`.
   Поддержка display:contents: Chrome 65+, Firefox 65+, Safari 11.1+ (OK).

   Где менять:
     • Порядок (последовательность) — orders ниже.
     • Чтобы тэги были не во всю ширину — убрать `width: 100%` у .result-item-tags.
   ========================================================================== */
@media (max-width: 1023px) {
    .result-item-trigger {
        display: contents;
    }
    .result-item {
        flex: 1 1 auto;
        align-items: stretch;
    }
    .result-item-company        { order: 0; }
    .result-item-info           { order: 1; }
    .result-item-tags           { order: 2; width: 100%; }
    .result-item-button         { order: 3; margin-top: auto; }
    .result-item-button-trigger { order: 4; }
}

/* ==========================================================================
   ИКОНКИ СОЦСЕТЕЙ В ПОДВАЛЕ (footer.php → .social)
   --------------------------------------------------------------------------
   В footer.php соц-иконки выведены как <picture><img></picture>, а правило
   `.social-item svg { width:1.25rem }` из critical.css действует только на
   <svg>. Поэтому <img> рендерится в свой натуральный размер (часто 64+ px) —
   иконки получаются слишком большими. Здесь жёстко ограничиваем размер.

   КАК ИЗМЕНИТЬ РАЗМЕР: меняй значение --social-icon-size ниже.
   КАК ИЗМЕНИТЬ ОТСТУП:  меняй gap у .social.
   ========================================================================== */
.social {
    --social-icon-size: 2.25rem; /* ← размер иконки соцсети */
    gap: 2.25rem;                /* ← отступ между иконками (было 2.25rem) */
}
.social-item {
    display: inline-flex;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    line-height: 0;
}
.social-item picture,
.social-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
   Раздел моделей авто — сетка карточек (/car/, archive-car.php)
   ============================================================ */
.car-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
/* Переключатель валюты (USD/UZS): два варианта по горизонтали, вдвое меньше
   кнопок «Найти/Сбросить». Используется в архиве и на странице модели. */
.car-aux-toggle {
    display: flex;
    gap: .75rem;
}
.car-aux-toggle .button {
    flex: 1 1 0;
    width: auto;
    height: 1.875rem;
    min-height: 0;
    padding: 0 .5rem;
    font-size: 13px;
}
.car-grid.is-loading {
    opacity: .5;
    pointer-events: none;
}
/* Фильтр авто (/car/): Марка (мультивыбор) + Тип кузова + Тип топлива — в один ряд.
   Каждый пункт — <select> в обёртке .form-item-relative (стилизуется SlimSelect). */
.car-filter-row {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}
.car-filter-row__item {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 767px) {
    .car-filter-row { flex-direction: column; }
}
/* Дропдаун марки (мультивыбор): кнопка со счётчиком + панель с чекбоксами.
   Высота кнопки = высоте соседних SlimSelect-контролов (.form-item-relative, 3.75rem). */
.ms-select { position: relative; width: 100%; }
.ms-select__toggle {
    position: relative;
    width: 100%;
    height: 3.75rem;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: var(--color-D10);
    border: .0625rem solid transparent;
    border-radius: .75rem;
    padding: 1.4375rem 2.5rem .625rem .9375rem; /* сверху — под плавающий лейбл, справа — под стрелку */
    transition: border-color .25s linear;
}
.ms-select__toggle:hover { border-color: var(--color-D20); }
.ms-select__value {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.25rem;
}
.ms-select__arrow {
    position: absolute;
    right: .9375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    display: flex;
    color: #636f7d;
    pointer-events: none;
    transition: transform .2s;
}
.ms-select.is-open .ms-select__arrow { transform: translateY(-50%) rotate(180deg); }
.ms-select__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: .0625rem solid #eee;
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
    padding: .25rem;
}
.ms-select__opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border-radius: .5rem;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.2;
}
.ms-select__opt:hover { background: var(--color-D10); }
.ms-select__opt input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}
.ms-select__opt-logo {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ms-select__opt-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ms-select__opt-logo .brand-logo-empty {
    border-radius: 4px;
    font-size: .625rem;
}
.car-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.car-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.car-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #f7f7f8;
}
.car-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    /* Отступы, чтобы фото машины не упиралось в края блока. */
    padding: 8px 16px 0;
    box-sizing: border-box;
}
/* Метка tn1 поверх фото — овал в левом верхнем углу, фиолетовая заливка
   (часть общей цветовой схемы таксономий: tn1 — фиолетовый, tn2 — зелёный).
   Совмещена с областью фото (учитывает отступ .car-card__image-link),
   чтобы лежать поверх рисунка. */
.car-card__badge {
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 2;
    max-width: calc(100% - 32px);
    padding: 3px 10px;
    background: #8b5cf6;
    border: none;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
/* Метка tn2 — то же оформление, что tn1, но в правом верхнем углу
   и с зелёной заливкой вместо фиолетовой. */
.car-card__badge--tn2 {
    left: auto;
    right: 16px;
    background: #16a34a;
}
/* Метка расстояния до метро (metro_distance_ru/uz) — тот же формат, что у
   status (карточки ЖК), но в левом нижнем углу и на белом фоне (текст тёмный,
   иначе он не читается на белой заливке). */
.car-card__badge--metro {
    top: auto;
    bottom: 12px;
    background: #fff;
    color: #111;
}
.car-card__image picture,
.car-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}
/* Базовый (без --photo) вариант — для карточек с логотипом банка/провайдера
   (mortgage-card.php, credit-card.php и т.п.): маленький центрированный логотип
   не достаёт до краёв плитки, поэтому border-radius на самой картинке визуально
   не заметен — это ожидаемо, крупная белая/прозрачная подложка логотипа не в счёт.
   Модификатор --photo — для карточек с полноценным фото на всю плитку (реальные
   фото ЖК и авто): здесь важно, чтобы фото касалось всех краёв (object-fit: cover),
   иначе скругление на самой картинке остаётся невидимым (как раньше было у авто). */
.car-card--photo .car-card__image-link {
    padding: 8px;
}
.car-card--photo .car-card__image picture,
.car-card--photo .car-card__image img {
    object-fit: cover;
}
/* Если у одного объекта в ряду фото ниже, чем у соседей (или короче тело),
   весь текстовый блок карточки — от бренда до кнопок — прижимается к низу,
   чтобы контролы в ряду выравнивались по нижней грани, а не «уезжали» вверх.
   Свободное место уходит в зазор между фото и брендом. */
.car-card--photo .car-card__body {
    margin-top: auto;
}
.car-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #111;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #ececec;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}
.car-card:hover .car-card__nav {
    opacity: 1;
}
.car-card__nav:hover {
    background: #fff;
}
.car-card__nav svg {
    width: 18px;
    height: 18px;
}
.car-card__nav--prev { left: 6px; }
.car-card__nav--next { right: 6px; }
@media (hover: none) {
    .car-card__nav { opacity: 1; }   /* на тач-устройствах стрелки всегда видны */
}
.car-card__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;   /* контейнер не перехватывает клики по фото */
}
.car-card__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
    pointer-events: auto;
    transition: background .15s ease, transform .15s ease;
}
.car-card__dot.is-active {
    background: #111;
    transform: scale(1.3);
}

/* ============================================================
   Раздел брендов авто — справочная сетка (/brand/, archive-brand.php)
   ============================================================ */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    text-decoration: none;
    color: #111;
    transition: box-shadow .2s ease, transform .2s ease;
}
.brand-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.brand-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 64px;
}
.brand-card__logo picture,
.brand-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.brand-card__logo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f0f0f1;
    font-size: 24px;
    font-weight: 700;
    color: #888;
}
.brand-card__name { line-height: 1.2; }
@media (max-width: 1024px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .brand-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Раздел банков — представление блоками (/banki/, archive-banks.php).
   Фильтры прежние; список карточек заменён на сетку блоков (как бренды авто).
   ============================================================ */
.bank-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.bank-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    padding: 1.5rem 1rem;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    text-decoration: none;
    color: #111;
    transition: box-shadow .2s ease, transform .2s ease;
}
.bank-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.bank-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 64px;
    margin-bottom: .25rem;
}
.bank-card__logo picture,
.bank-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.bank-card__logo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f0f0f1;
    font-size: 24px;
    font-weight: 700;
    color: #888;
}
.bank-card__name { line-height: 1.2; }
.bank-card__type { letter-spacing: .04em; }
.bank-card__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1rem;
    margin-top: .5rem;
    width: 100%;
}
.bank-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
@media (max-width: 768px) { .bank-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bank-grid { grid-template-columns: 1fr 1fr; } }

/* Карточка-сводка бренда на отфильтрованном /car/?car_brand=ID */
.car-brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
}
.car-brand__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 80px;
}
.car-brand__logo picture,
.car-brand__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.car-brand__logo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f0f0f1;
    font-size: 28px;
    font-weight: 700;
    color: #888;
}
.car-brand__info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}
.car-brand__desc {
    color: #444;
    margin-top: .25rem;
}
.car-brand__all {
    width: fit-content;
    margin-top: .375rem;
    color: #2563eb;
    text-decoration: none;
}
.car-brand__all:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .car-brand { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem; }
    .car-brand__logo { width: 100px; height: 60px; }
}

/* Страница бренда (single-brand.php) — hero */
.brand-single {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.brand-single__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 90px;
}
.brand-single__logo picture,
.brand-single__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.brand-single__info { min-width: 0; }
@media (max-width: 600px) {
    .brand-single { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
.car-card__image-empty {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg, #f0f0f1 0 10px, #f7f7f8 10px 20px);
}
.car-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .375rem;
    padding: .875rem 1rem 1rem;
}
.dev-object-static {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .75rem;
}
.dev-object-static__developer {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .75rem;
}
.dev-object-static__logo {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .625rem;
    font-size: .8125rem;
    font-weight: 800;
}
.dev-object-static__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.dev-object-static__developer-text {
    min-width: 0;
}
.dev-object-static__developer-name {
    color: #18151f;
    font-size: .9375rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.dev-object-static__developer-since {
    margin-top: .125rem;
    color: #a7a2b3;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.15;
}
.dev-object-static__title {
    color: #111;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.dev-object-static__title:hover {
    color: #5a10b6;
}
.dev-object-static__district {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .375rem;
    color: #8a8497;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.dev-object-static__pin {
    position: relative;
    width: .875rem;
    height: .875rem;
    flex: 0 0 auto;
    border: 2px solid #7b2fe6;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}
.dev-object-static__pin::after {
    content: "";
    position: absolute;
    inset: .1875rem;
    border-radius: 50%;
    background: #7b2fe6;
}
.dev-object-static__price-box {
    display: grid;
    grid-template-columns: 1fr auto;
    min-width: 0;
    gap: .875rem 1rem;
    padding: 1rem;
    border: 1px solid #e5ddf5;
    border-radius: .875rem;
    background: #f8f5ff;
    box-shadow: inset 0 0 0 1px rgba(90, 16, 182, .03);
}
.dev-object-static__price-main {
    min-width: 0;
}
.dev-object-static__label,
.dev-object-static__price-meta span,
.dev-object-static__rooms-title {
    display: block;
    color: #b2acc0;
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}
.dev-object-static__price-main strong {
    display: block;
    margin-top: .25rem;
    color: #4a168f;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.dev-object-static__payment {
    align-self: start;
    padding: .5rem .625rem;
    border-radius: .625rem;
    color: #18151f;
    background: #ffd51d;
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.dev-object-static__price-meta {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    gap: .75rem;
}
.dev-object-static__price-meta > div {
    min-width: 0;
}
.dev-object-static__price-meta strong {
    display: block;
    margin-top: .25rem;
    color: #433d4d;
    font-size: .9375rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.dev-object-static__facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    gap: .5rem .875rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #ece8f2;
    color: #5e5868;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
}
.dev-object-static__facts-flex{
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    overflow-wrap: anywhere;
}
.dev-object-static__facts span {
    display: flex;
    align-items: center;
    justify-content: center;
}
.dev-object-static__facts svg{
    width: 16px;
    height: 16px;
}
.dev-object-static__facts path, .dev-object-static__facts circle{
    fill: #7b2fe6;
}
.dev-object-static__facts strong {
    color: #5a10b6;
    font-weight: 800;
    white-space: nowrap;
}
.dev-object-static__rooms {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .5rem;
}
.dev-object-static__chips {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: .5rem;
}
.dev-object-static__chips label {
    display: block;
    cursor: pointer;
}
.dev-object-static__chips input {
    display: none;
}
.dev-object-static__chips span {
    display: block;
    padding: .375rem .75rem;
    border: 1px solid #d8cbed;
    border-radius: 999px;
    color: #4d4162;
    background: #faf8ff;
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1;
}
.dev-object-static__chips input:checked + span {
    border-color: #5a10b6;
    color: #5a10b6;
    background: #f2edff;
    box-shadow: 0 0 0 2px rgba(90, 16, 182, .08);
}
.dev-object-static__chips input:focus-visible + span {
    outline: 2px solid rgba(90, 16, 182, .24);
    outline-offset: 2px;
}
.dev-object-static .button {
    height: 2.75rem;
    margin-top: .125rem;
    border-radius: .625rem;
    font-size: .9375rem;
    font-weight: 700;
}
.material-content-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.car-card__title {
    color: #111;
    text-decoration: none;
    line-height: 1.2;
}
.car-card__title:hover {
    text-decoration: underline;
}
/* Марка (бренд) — первая строка под фото, бледный шрифт. Модель — строкой ниже. */
.car-card__brand {
    color: #a3a3a3;
    line-height: 1.2;
}
/* Название застройщика (карточки ЖК) — темнее базового .car-card__brand
   (используется маркой авто в car-card.php), размер шрифта не меняем. */
.car-card__brand--dev {
    color: #111;
}
/* «с 2011 года» / «2011-yildan» рядом с названием застройщика — остаётся
   бледным (цвет базового .car-card__brand), в отличие от самого названия. */
.car-card__brand-since {
    color: #a3a3a3;
}
/* Городской район объекта (city_district_ru/uz, карточки ЖК) — строка между
   названием и сеткой характеристик, бледный шрифт, как у .car-card__brand. */
.car-card__district {
    color: #a3a3a3;
    line-height: 1.2;
}
/* Характеристики — сетка 2 колонки × 3 строки, без линий. Иконки — позже. */
.car-card__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .375rem .75rem;
}
.car-card__feature {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
}
.car-card__feat-ic {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-block;
    background: center / contain no-repeat;
}
/* Иконки характеристик авто (single-car.php + car-card.php).
   Файлы: images/icons-for-cars/, сопоставление по data-ic.
   Для data-ic="color" иконки нет — выводятся образцы цвета. */
.car-card__feat-ic[data-ic="fuel"]         { background-image: url(../../images/icons-for-cars/fuel.svg); }
.car-card__feat-ic[data-ic="drive"]        { background-image: url(../../images/icons-for-cars/drive.svg); }
.car-card__feat-ic[data-ic="engine"]       { background-image: url(../../images/icons-for-cars/engine.svg); }
.car-card__feat-ic[data-ic="transmission"] { background-image: url(../../images/icons-for-cars/transmission.svg); }
.car-card__feat-ic[data-ic="power"]        { background-image: url(../../images/icons-for-cars/power.svg); }
.car-card__feat-ic[data-ic="fuel100"]      { background-image: url(../../images/icons-for-cars/consumption.svg); }
/* Иконки характеристик на детальной странице авто — на 50% крупнее базовых 16px. */
.car-specs .car-card__feat-ic { width: 24px; height: 24px; }
.car-card__feat-val {
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.car-card__colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    white-space: normal;
    overflow: visible;
}
.car-card__color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
}
/* Детальная страница авто: «Характеристики» и «Рассрочка» — два равных блока
   в ряд на десктопе, друг под другом на мобильном/планшете. */
.car-cond-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.car-cond-row--single {
    grid-template-columns: 1fr;
}
.car-cond-col {
    min-width: 0;
}
.car-cond-col .car-specs {
    max-width: none;
}
/* Описание модели под таблицей характеристик (перенесено в левую колонку). */
.car-cond-desc {
    margin-top: 1.5rem;
}

/* Комплектации: вкладки + панель (детальная страница авто). */
.car-cond-trims {
    margin-top: 1.5rem;
}
.car-trims__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.car-trims__tab {
    font: inherit;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: .5rem .875rem;
    border-radius: 999px;
    border: 1px solid #e5e5e5;
    background: #f5f5f5;
    color: #444;
}
.car-trims__tab:hover {
    border-color: #c9b6f0;
    color: #7001ff;
}
.car-trims__tab.is-active {
    background: #7001ff;
    border-color: #7001ff;
    color: #fff;
}
.car-trims__panel {
    background: #faf8ff;
    border: 1px solid #eee3fc;
    border-radius: 16px;
    padding: 1.25rem 1.25rem;
}
.car-trims__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}
.car-trims__sep {
    color: #d4d4d4;
}
.car-trims__list {
    margin: .75rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
}
.car-trims__list li {
    margin: .25rem 0;
    color: #333;
}
.car-cond-col #car-installment {
    height: 100%;
}
@media (max-width: 991px) {
    .car-cond-row {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Калькулятор кредита под авто. Цвета — как у активных чипов фильтра (#7001ff). */
.car-credit__result {
    background: #eee3fc;
    border-radius: 16px;
    padding: 1.25rem 1rem;
}
.car-credit__result #car-credit-monthly {
    color: #7001ff;
    margin-top: .25rem;
}
.car-credit .form-item-relative {
    position: relative;
}
.car-credit__clear {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: #e5e5e5;
    color: #555;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.car-credit__clear:hover {
    background: #d6c7f5;
    color: #7001ff;
}
.car-credit #car-credit-price {
    padding-right: 40px;
}

/* Детальная страница авто: характеристики — таблица 4 строки × 2 колонки
   (иконка + значение). Иконки в .car-card__feat-ic добавятся позже. */
.car-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    max-width: 720px;
}
.car-specs__cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    min-height: 28px;
    padding: .625rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.car-specs__cell--empty {
    border-bottom: 0;
}
.car-specs__val {
    color: #222;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.car-specs__val.car-card__colors {
    white-space: normal;
    overflow: visible;
}
/* Доступные цвета, вынесенные из таблицы характеристик в отдельную строку:
   слева заголовок «Цвета», справа образцы (.car-card__colors). */
.car-specs-colors {   /* single-car.php — под таблицей .car-specs */
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.car-specs-colors__cap {
    color: #222;
}
.car-card__colors-row { /* car-card.php — между характеристиками и ценой */
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.car-card__colors-cap {
    color: #636f7d;
}
@media (max-width: 575px) {
    .car-specs {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .car-specs__cell--empty {
        display: none;
    }
}

/* Параметры объекта недвижимости (Характеристики / Инфраструктура) —
   адаптивная сетка в 2 столбца, как .car-specs у авто, но с подписью
   у каждого параметра. На узких экранах сворачивается в один столбец. */
.obj-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}
.obj-params__cell {
    display: flex;
    flex-direction: column;      /* капшен сверху, значение под ним */
    align-items: flex-start;
    justify-content: center;
    gap: .125rem;
    min-width: 0;
    min-height: 28px;
    padding: .625rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.obj-params__label {
    flex: 0 0 auto;
}
.obj-params__val {
    text-align: left;
    min-width: 0;
}
@media (max-width: 575px) {
    .obj-params {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
.car-card__price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin-top: .125rem;
}
.car-card__price {
    margin-top: .125rem;
}
.car-card__price-row .car-card__price {
    margin-top: 0;
}
.car-card__permonth {
    white-space: nowrap;
    color: #111;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb454, #c8ef6e);
}
.car-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: .625rem;
}
.car-card__actions .button {
    height: 2.75rem;
}
.car-card__more {
    color: #555;
    text-decoration: none;
}
.car-card__more:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .car-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .car-grid { grid-template-columns: 1fr; }
}
/* Главная: блоки «Новостройки» и «Автомобили» (.car-grid) на мобильных —
   горизонтальный скролл, как у «Кредитных карт» (.card-credit).
   Только на главной (body.home): на архивах/детальных .car-grid остаётся сеткой. */
@media (max-width: 991px) {
    .dev-object-static__facts{
        gap: 8px;
        font-size: 13px;
    }
    .dev-object-static__facts-flex{
        gap: 4px;
        strong{
            white-space: nowrap;
        }
    }
    body.home .car-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        box-sizing: border-box;
        max-width: calc(100% + 2rem);
        gap: 0.75rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        grid-template-columns: unset;
    }
    body.home .car-grid::-webkit-scrollbar { display: none; }
    body.home .car-grid > .car-card {
        flex: 0 0 85vw; /* ← ширина карточки: ~75% экрана — видно ~1.3 карточки */
        min-width: 0;
        max-width: 320px;
    }

    body.home .car-grid--home-objects {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        grid-template-columns: unset;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    body.home .car-grid--home-objects::-webkit-scrollbar { display: none; }

    body.home .car-grid--home-objects > .car-card {
        flex: 0 0 85vw;
        max-width: 320px;
    }
}

body.home .home-objects-section,
body.home .home-objects-section > .container {
    min-width: 0;
    overflow-x: hidden;
}

/* Главная: блоки «Выгодные интернет тарифы» и «Популярные микрозаймы» (.result-items)
   на мобильных — та же горизонтальная лента, что у остальных блоков главной.
   Только на главной (body.home): на архивах .result-items остаётся вертикальным списком. */
@media (max-width: 991px) {
    body.home .result-items {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: auto;
        box-sizing: border-box;
        max-width: calc(100% + 2rem);
        gap: 0.75rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    body.home .result-items::-webkit-scrollbar { display: none; }
    body.home .result-items > .result-item-block {
        flex: 0 0 88vw;
        min-width: 0;
        display: flex;
    }
    /* Разворот «Ещё N предложений» не участвует в ленте (как в .cross-scroll). */
    body.home .result-items .result-item-button-trigger,
    body.home .result-items .result-item-hidden {
        display: none;
    }
}

.glider-next{
    position: absolute;
    top: 50%;
    right: 0;
}

.glider-prev{
    position: absolute;
    top: 50%;
    left: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ПЕРЕКРЁСТНЫЕ («похожие») блоки внизу архивов → .cross-scroll
   На мобильных ведут себя как ленты на главной — горизонтальный свайп,
   НЕЗАВИСИМО от вёрстки самого раздела (хук вешается только на кросс-обёртку,
   основной список раздела не затрагивается).
     • .car-grid.cross-scroll     — фото-карточки (новостройки, авто)
     • .result-items.cross-scroll — «строчные» карточки (ипотеки, автокредиты)
   У «строчных» карточек внутри ленты глушим разворот «Ещё N предложений»
   (.result-item-button-trigger + .result-item-hidden), чтобы прыгающая высота
   не ломала ленту. На десктопе и в основном списке разворот работает как прежде.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .cross-scroll {
        display: flex;
        flex-direction: row;      /* перебивает flex-direction:column у .result-items */
        flex-wrap: nowrap;
        overflow: auto;
        box-sizing: border-box;
        max-width: calc(100% + 2rem);
        gap: 0.75rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        grid-template-columns: unset;
    }
    .cross-scroll::-webkit-scrollbar { display: none; }

    /* Фото-карточки — как на главной (~1.3 карточки в кадре). */
    .cross-scroll.car-grid > .car-card {
        flex: 0 0 85vw;
        min-width: 0;
        max-width: 320px;
    }
    /* «Строчные» карточки шире, чтобы 4 параметра и кнопка не сжимались. */
    .cross-scroll.result-items > .result-item-block {
        flex: 0 0 88vw;
        min-width: 0;
    }
    /* Разворот «Ещё N предложений» не участвует в ленте. */
    .cross-scroll .result-item-button-trigger,
    .cross-scroll .result-item-hidden {
        display: none;
    }
}

/* Страница модели (single-car.php) */
.car-single {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.car-single__main {
    position: relative;
    background: #f7f7f8;
    border-radius: 16px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.car-single__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #111;
    background: rgba(255, 255, 255, .85);
    border: 1px solid #ececec;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: background .15s ease;
}
.car-single__nav:hover {
    background: #fff;
}
.car-single__nav svg {
    width: 22px;
    height: 22px;
}
.car-single__nav--prev { left: 10px; }
.car-single__nav--next { right: 10px; }
@media (max-width: 480px) {
    .car-single__nav { width: 38px; height: 38px; }
    .car-single__nav svg { width: 18px; height: 18px; }
}
.car-single__main picture,
.car-single__main img,
.car-single__main .car-card__image-empty {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.car-single__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}
.car-single__thumb {
    width: 72px;
    height: 56px;
    padding: 0;
    background: #f7f7f8;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
}
.car-single__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.car-single__thumb.is-active {
    border-color: #111;
}
.car-single__info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
/* Заголовок модели: логотип бренда слева + марка/модель справа. Ряд не ломается
   на адаптивах (логотип фикс. ширины, текст ужимается: min-width:0 + перенос). */
.car-single__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.car-single__head-text {
    min-width: 0;
}
.car-single__brand-logo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.car-single__brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Плейсхолдер логотипа (первая буква бренда) — общий для детальной и карточки;
   размер шрифта задаётся контейнером-обёрткой ниже. */
.brand-logo-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 8px;
    font-weight: 700;
    color: #666;
}
.car-single__brand-logo .brand-logo-empty { font-size: 22px; }
@media (max-width: 575px) {
    .car-single__brand-logo { width: 44px; height: 44px; }
    .car-single__brand-logo .brand-logo-empty { font-size: 18px; }
}

/* Карточка авто: логотип бренда слева + марка/модель справа. */
.car-card__head {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.car-card__head-text {
    min-width: 0;
}
.car-card__dealers {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
.car-card__brand-logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.car-card__brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.car-card__brand-logo .brand-logo-empty {
    border-radius: 6px;
    font-size: 16px;
}
.car-single__price {
    margin-top: .25rem;
}
@media (max-width: 768px) {
    .car-single { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Планировки: кликабельный план (кнопка-обёртка) + иконка-лупа ─────────── */
.obj-plan-zoom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 64px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}
.obj-plan-zoom img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.obj-plan-zoom__ic {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
}
.obj-plan-zoom__ic svg { width: 14px; height: 14px; }
.brand-card:hover .obj-plan-zoom__ic,
.obj-plan-zoom:focus-visible .obj-plan-zoom__ic { opacity: 1; }

/* ── Лайтбокс увеличенного просмотра планировки ──────────────────────────── */
.obj-plan-lb[hidden] { display: none; }
.obj-plan-lb {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.obj-plan-lb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .8);
}
.obj-plan-lb__dialog {
    position: relative;
    max-width: min(92vw, 1100px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.obj-plan-lb__img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}
.obj-plan-lb__caption {
    margin-top: .75rem;
    color: #fff;
    font-size: 14px;
    text-align: center;
}
.obj-plan-lb__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    cursor: pointer;
}
.obj-plan-lb__close svg { width: 22px; height: 22px; }
.obj-plan-lb__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    cursor: pointer;
}
.obj-plan-lb__nav[hidden] { display: none; }
.obj-plan-lb__nav svg { width: 24px; height: 24px; }
.obj-plan-lb__nav--prev { left: -3.5rem; }
.obj-plan-lb__nav--next { right: -3.5rem; }
@media (max-width: 767px) {
    .obj-plan-lb { padding: 1rem; }
    .obj-plan-lb__nav--prev { left: .25rem; }
    .obj-plan-lb__nav--next { right: .25rem; }
    .obj-plan-lb__close { top: .25rem; right: .25rem; background: rgba(0, 0, 0, .5); }
}

.footer-intro {
    width: 100%;
    max-width: 100%;
    font-size: .75rem;
    line-height: 1.2;
}
.footer-intro p {
    margin: 0 0 .5rem;
}
.footer-intro p:last-child {
    margin-bottom: 0;
}
.footer-intro a:hover {
    text-decoration: underline;
}

/* === quick-search.css === */

/* ════════════════════════════════════════════════════════════════════════════
   quick-search.css
   ─────────────────────────────────────────────────────────────────────────
   Стили только для страниц /quick-search/ и /quick-search/thank-you/.
   Подключается conditional-енкью в functions.php → narxtop_enqueue_assets().

   Принцип: НЕ изобретаем новые цвета/шрифты/тени.
   Все цвета берутся из CSS-переменных темы (var(--color-B100), var(--color-D06),
   var(--color-D10), var(--color-D100) и т.д., объявлены в critical.css).

   Файл содержит только то, что не выражается существующими утилитами темы:
     • двухколоночная hero-сетка
     • карточка формы (.qs-form-card)
     • степпер 1-2-3-4 (.qs-steps)
     • сетка преимуществ 3×2 (.qs-adv__grid)
     • сетка отзывов 2×2 (.qs-reviews__grid)
     • видео-плейсхолдер (.qs-video__player)
     • аккордеон FAQ (.qs-faq__item)
     • position:fixed sticky-bar и toast
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Общие отступы секций (как у остальной темы — section--block-1) ───────── */
.qs-section {
    padding: 3rem 0;
}

.qs-section + .qs-section {
    border-top: .0625rem solid var(--color-D10);
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */

/* Подзаголовок hero — ограничиваем ширину, чтобы строка не уезжала к
   правому краю контейнера и текст оставался читаемым. */
.qs-hero__sub {
    max-width: 44rem;
}

/* Статистика в hero — 4 плитки в ряд */
.qs-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.qs-stat {
    padding: 1rem;
    background: var(--color-D06);
    border-radius: .75rem;
}

/* Карточка формы — на всю ширину контейнера, под чипами выбора типа. */
.qs-form-card {
    background: #fff;
    border: .0625rem solid var(--color-D10);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .04);
}

/* Базовая .form-apply-grid в add.css — 2 колонки (для модалки modal-apply,
   которая узкая). На полной ширине quick-search-формы переключаем на 3 колонки —
   чтобы поля заполняли пространство и форма выглядела сбалансированно. */
.qs-form-card .form-apply-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.25rem;
}

/* Поле «Есть действующие кредиты» в 3-колоночной сетке занимает 2 ячейки —
   убирает пустую клетку в третьем ряду. На 2-колоночной сетке (планшет)
   ячейка тоже растягивается на 2 — занимает всю ширину строки. */
.qs-form-card .form-apply-grid .qs-field--span2 {
    grid-column: span 2;
}

/* На планшете возвращаемся к 2 колонкам, на мобильном — 1 (база из add.css
   уже даёт 1 колонку при max-width:560px). */
@media (max-width: 1024px) {
    .qs-stats { grid-template-columns: repeat(2, 1fr); }
    .qs-form-card .form-apply-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .qs-stats { grid-template-columns: repeat(2, 1fr); }
    .qs-form-card { padding: 1rem; }
}

/* ── HOW IT WORKS ────────────────────────────────────────────────────────── */

.qs-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.qs-step__num {
    line-height: 1;
    margin-bottom: .75rem;
}

@media (max-width: 1024px) {
    .qs-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .qs-steps { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── ADVANTAGES ──────────────────────────────────────────────────────────── */

.qs-adv__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.qs-adv__item {
    padding: 1.25rem;
    background: var(--color-D06);
    border-radius: .75rem;
}

@media (max-width: 1024px) {
    .qs-adv__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .qs-adv__grid { grid-template-columns: 1fr; }
}

/* ── REVIEWS ─────────────────────────────────────────────────────────────── */

.qs-reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.qs-review {
    padding: 1.25rem;
    background: #fff;
    border: .0625rem solid var(--color-D10);
    border-radius: 1rem;
}

.qs-review__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.qs-review__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-B100);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .qs-reviews__grid { grid-template-columns: 1fr; }
}

/* ── VIDEO ───────────────────────────────────────────────────────────────── */

.qs-video__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: .0625rem solid var(--color-D10);
    border-radius: 1rem;
    background: var(--color-D06) center/cover no-repeat;
    cursor: pointer;
    position: relative;
    padding: 0;
}

.qs-video__player[data-placeholder="1"] {
    cursor: default;
}

.qs-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--color-D100);
}

.qs-video__icon {
    color: var(--color-B100);
    width: 4rem;
    height: 4rem;
    display: inline-flex;
}

.qs-video__icon svg {
    width: 100%;
    height: 100%;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.qs-faq__list {
    max-width: 50rem;
}

.qs-faq__item {
    border-bottom: .0625rem solid var(--color-D10);
}

.qs-faq__item[open] .qs-faq__chev {
    transform: rotate(45deg);
}

.qs-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.qs-faq__q::-webkit-details-marker { display: none; }

.qs-faq__chev {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--color-B100);
    position: relative;
    transition: transform .2s ease;
}

.qs-faq__chev::before,
.qs-faq__chev::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: .0625rem;
}

.qs-faq__chev::before {
    width: 1rem;
    height: .125rem;
    transform: translate(-50%, -50%);
}

.qs-faq__chev::after {
    width: .125rem;
    height: 1rem;
    transform: translate(-50%, -50%);
}

.qs-faq__a {
    padding: 0 0 1rem 0;
}

/* ── PRIVACY ─────────────────────────────────────────────────────────────── */

.qs-privacy__inner {
    background: var(--color-D06);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 50rem;
}

/* ── STICKY BAR ──────────────────────────────────────────────────────────── */

.qs-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: .0625rem solid var(--color-D10);
    box-shadow: 0 -.25rem 1.5rem rgba(0, 0, 0, .06);
    z-index: 90;
    padding: .75rem 0;
}

.qs-sticky__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 600px) {
    .qs-sticky__inner > div:first-child { display: none; }
}

/* ── TOAST ───────────────────────────────────────────────────────────────── */

.qs-toast {
    position: fixed;
    left: 1rem;
    bottom: 5rem;
    background: #fff;
    border: .0625rem solid var(--color-D10);
    border-radius: .75rem;
    padding: .75rem 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    gap: .75rem;
    z-index: 80;
    max-width: 18rem;
    transform: translateY(120%);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}

.qs-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.qs-toast__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-B100);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    flex-shrink: 0;
}

.qs-toast__text {
    line-height: 1.3;
}

@media (max-width: 600px) {
    .qs-toast {
        left: .5rem;
        right: .5rem;
        bottom: 4.5rem;
        max-width: none;
    }
}

/* ── THANK-YOU PAGE ──────────────────────────────────────────────────────── */

.qs-thanks {
    padding: 4rem 0;
}

.qs-thanks__inner {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
}

.qs-thanks__icon {
    color: var(--color-B100);
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
}

.qs-thanks__icon svg {
    width: 100%;
    height: 100%;
}

.qs-thanks__cta {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── SlimSelect: высота поп-апа на 10 опций ──────────────────────────────
   SlimSelect (внешняя библиотека, см. main.js) рендерит поп-ап .ss-content
   в document.body для всех <select> сайта. По умолчанию у него
   --ss-content-height = 18.75rem (≈ 10 опций), но в текущем окружении
   что-то его сжимает до одной опции (прокрутка для остальных).

   Переопределяем переменную И на :root (где она объявлена), И на самом
   .ss-content — чтобы перебить независимо от того, в каком месте каскада
   её читают. Плюс жёсткий max-height с !important на финальное свойство.
   ~22rem ≈ 10 опций (~2.2rem каждая с паддингами SlimSelect). */
/*.ss-content,
body > .ss-content {
    --ss-content-height: 22rem !important;
    max-height: 22rem !important;
}*/

/* .ss-list — внутренний контейнер опций. flex:1 1 auto позволяет ему
   занять всю высоту .ss-content, но на всякий случай дублируем max-height
   и сюда — иначе если у .ss-content окажется ещё какое-то ограничение,
   список схлопнется. */
.ss-content .ss-list {
    max-height: 22rem !important;
}

/* ── Плитки выбора типа продукта (стиль BLOCK-1.2 главной) ──────────────── */
/* Контейнер .qs-types — 6-колоночная сетка, все плитки одного размера.
   Внутри — стандартные .grid-product__item / .grid-product-pic из критикала
   темы (фон/радиус/паддинги/min-height описаны там). Здесь только сетка,
   reset для <button> и единая высота иконки (равная .grid-product-five
   из BLOCK-1.2 — самый типичный кейс). */

.qs-types {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5rem;
}

/* Reset для <button> — убираем браузерные стили, наследуем шрифт темы.
   У <button> в браузерах есть внутренний UA-стиль, который центрирует
   контент по обеим осям (display:block этого не отменяет). Чтобы подпись
   легла именно в верхний-левый угол — задаём явный flex column с прижатием
   к началу обеих осей. .grid-product-pic с position:absolute из flex-потока
   выпадает и остаётся в нижнем-правом углу, как в BLOCK-1.2. */
.qs-types .grid-product__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
}

/* Единая высота иконки для всех плиток (повторяет .grid-product-five
   из критикала темы — кейс «Кредит» в BLOCK-1.2). */
.qs-types .grid-product-pic {
    height: 4.3125rem;
}

@media (min-width: 768px) {
    .qs-types .grid-product-pic {
        height: 6.125rem;
    }
}

/* Адаптив сетки: на средних — 3 в ряд, на узких — 2 в ряд. */
@media (max-width: 1024px) {
    .qs-types { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .qs-types { grid-template-columns: repeat(2, 1fr); }
}

/* === archive-currency-page.css === */

/* ==========================================================================
   archive-currency-page.php — «Курсы валют» / «Valyuta kurslari»
   Локальные стили страницы (условный enqueue в functions.php).
   ========================================================================== */

.currency-page section { padding: 16px 0; }
.currency-page .section-single-hero { padding: 32px 0 16px; }
.currency-page .mt-8 { margin-top: 8px; }

/* ── Карточки валют ─────────────────────────────────────────────────────── */
.cur-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.cur-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
}
.cur-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.cur-card__region {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #8a8a8a;
    padding: 2px 8px;
    background: #f5f5f7;
    border-radius: 999px;
}
.cur-card__trend { font-size: 12px; font-weight: 600; }
.cur-card__trend.is-up { color: #16a34a; }
.cur-card__trend.is-down { color: #dc2626; }
.cur-card__rate { margin-top: 4px; }

/* ── Калькулятор ────────────────────────────────────────────────────────── */
.cur-calc {
    padding: 20px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
}
.cur-calc__row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.cur-calc__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 160px;
    min-width: 0;
}
.cur-calc__amount,
.cur-calc__select {
    height: 46px;
    padding: 0 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    color: #111;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.cur-calc__swap {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    color: #7c5cff;
    transition: background .15s ease;
}
.cur-calc__swap:hover { background: #f5f2ff; }
.cur-calc__result {
    margin-top: 16px;
    padding: 16px;
    background: #f7f5ff;
    border-radius: 12px;
}
.cur-calc__reverse { margin-top: 6px; }

/* ── График ─────────────────────────────────────────────────────────────── */
.cur-chart {
    padding: 20px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
}
.cur-chart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cur-chart__controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cur-chart__ccy {
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #111;
}
.cur-chart__periods {
    display: inline-flex;
    padding: 3px;
    background: #f5f5f7;
    border-radius: 10px;
    gap: 2px;
}
.cur-chart__period {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
}
.cur-chart__period.is-active {
    background: #fff;
    color: #111;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.cur-chart__canvas { width: 100%; }
.cur-chart__svg { width: 100%; height: 260px; display: block; }
.cur-chart__grid { stroke: #eee; stroke-width: 1; }
.cur-chart__ylab,
.cur-chart__xlab { fill: #9a9a9a; font-size: 11px; font-family: inherit; }
.cur-chart__area { fill: rgba(124, 92, 255, .10); stroke: none; }
.cur-chart__line { fill: none; stroke: #7c5cff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cur-chart__dot { fill: #7c5cff; }
.cur-chart__msg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    color: #9a9a9a;
    font-size: 14px;
}

/* ── Курсы банков — таблица с вкладками валют ────────────────────────────── */
.cur-banks {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    overflow: hidden;
}
.cur-banks__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.cur-banks__tab {
    border: 1.5px solid #e0e0e0;
    background: #fff;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all .15s ease;
}
.cur-banks__tab.is-active {
    background: #7c5cff;
    border-color: #7c5cff;
    color: #fff;
}
.cur-banks__table {
    width: 100%;
    overflow-x: auto;               /* средние экраны: горизонтальный скролл вместо обрезки */
    -webkit-overflow-scrolling: touch;
}
.cur-banks__tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cur-banks__tbl th,
.cur-banks__tbl td {
    padding: 12px 16px;
    border-bottom: 1px solid #f4f4f5;
    text-align: left;
    white-space: nowrap;
}
.cur-banks__tbl th {
    font-size: 12px;
    font-weight: 600;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.cur-banks__tbl tbody tr:last-child td { border-bottom: none; }
.cur-banks__tbl .ta-r { text-align: right; }
.cur-banks__bank { font-weight: 600; color: #111; white-space: normal; }
.cur-banks__diff { color: #6b7280; }
.cur-banks__best {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    background: #e8f9ee;
    border-radius: 999px;
    vertical-align: middle;
}
.cur-banks__msg {
    padding: 32px 16px;
    text-align: center;
    color: #9a9a9a;
    font-size: 14px;
}

/* ── Примечания / ссылки ────────────────────────────────────────────────── */
.cur-attribution a,
.cur-cbu-note a { color: #7c5cff; text-decoration: none; }
.cur-attribution a:hover,
.cur-cbu-note a:hover { text-decoration: underline; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cur-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cur-cards { grid-template-columns: repeat(2, 1fr); }
    .cur-calc__swap { align-self: center; }
    .cur-chart__head { align-items: flex-start; }
}

/* Смартфон: строки таблицы банков → карточки «метка: значение»,
   чтобы все 4 поля (банк/покупка/продажа/разница) были видны без скролла. */
@media (max-width: 600px) {
    .cur-banks__table { overflow-x: visible; }
    .cur-banks__tbl { font-size: 14px; }
    .cur-banks__tbl thead { display: none; }
    .cur-banks__tbl tbody,
    .cur-banks__tbl tr,
    .cur-banks__tbl td { display: block; width: 100%; }
    .cur-banks__tbl tr {
        padding: 10px 14px;
        border-bottom: 1px solid #f0f0f0;
    }
    .cur-banks__tbl tbody tr:last-child { border-bottom: none; }
    .cur-banks__tbl td {
        border: none;
        padding: 4px 0;
        white-space: normal;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }
    .cur-banks__tbl td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #9a9a9a;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        text-align: left;
    }
    .cur-banks__tbl td.cur-banks__bank {
        justify-content: flex-start;
        font-size: 15px;
        padding-bottom: 6px;
    }
    .cur-banks__tbl td.cur-banks__bank::before { display: none; }
}