/* ===== A website of the constructor (site.php, api/_webrender.php). Colours: --c0 page, --c1 cards, --c2 stripes / menu
   accent, --c3 text / links, --c4 header / footer. Layouts: .wsv-blocks, .wsv-classic, .wsv-showcase, .wsv-lombard. ===== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.wsv {
	margin: 0;
	background: var(--c0);
	color: var(--c3);
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.wsv a { color: var(--c2); }
.wsv h1, .wsv h2 { font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
.wsv h1 { font-size: 34px; }
.wsv h2 { font-size: 28px; }
.wsv p { margin: 0 0 .8em; }

/* the bar for the site's people (a draft's preview) */
.wsv-staff {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	padding: 6px 12px; text-align: center; font-size: 14px;
	background: #2b2622; color: #ffe0cc;
}
.wsv-staff a { color: #ffaa77; }
.wsv-has-staff { padding-bottom: 34px; }

/* ----- header and menu ----- */
.wsv-head {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; gap: 24px;
	padding: 12px 32px;
	background: var(--c4); color: var(--c0);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.wsv-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit !important; font-size: 22px; font-weight: 600; min-width: 0; }
.wsv-brand img { height: 42px; width: auto; border-radius: 6px; }
.wsv-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsv-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
.wsv-nav a { color: inherit; text-decoration: none; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 0; border-bottom: 2px solid transparent; opacity: .85; }
.wsv-nav a:hover, .wsv-nav a.on { opacity: 1; border-bottom-color: var(--c2); }
.wsv-burger { display: none; margin-left: auto; font-size: 26px; background: none; border: 0; color: inherit; cursor: pointer; }

/* classic: a half-transparent bar fixed over the first screen */
.wsv-classic .wsv-head { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, .35); background: color-mix(in srgb, var(--c4) 55%, transparent); backdrop-filter: blur(4px); transition: background .3s; }
.wsv-classic.wsv-scrolled .wsv-head { background: var(--c4); }
.wsv-classic .wsv-main { padding-top: 0; }
.wsv-classic .wsv-main > .wsv-block:first-child:not(.wsv-banner) { margin-top: 90px; }

/* ----- main ----- */
.wsv-main { flex: 1; width: 100%; }
.wsv-block { max-width: 1040px; margin: 48px auto; padding: 0 24px; }
.wsv-center { text-align: center; }
.wsv-sub { font-size: 19px; opacity: .75; }
.wsv-text { font-size: 18px; }
.wsv-empty { text-align: center; opacity: .6; padding: 80px 24px; }

.wsv-banner {
	max-width: none; margin: 0; padding: 0;
	min-height: 360px; display: flex; align-items: center; justify-content: center; text-align: center;
	background-color: var(--c4); background-size: cover; background-position: center; color: var(--c0);
	position: relative;
}
.wsv-banner.wsv-has-img::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.wsv-banner-in { position: relative; max-width: 760px; padding: 56px 24px; }
.wsv-banner h2 { font-size: 42px; }
.wsv-banner p { font-size: 19px; }

.wsv-btn {
	display: inline-block; margin: 8px 8px 0 0; padding: 12px 28px; border-radius: 30px;
	background: var(--c2); color: var(--c0) !important; text-decoration: none; font-weight: 600;
	transition: transform .15s, box-shadow .15s;
}
.wsv-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.wsv-buttons { text-align: center; }

.wsv-picture { text-align: center; }
.wsv-picture img { max-width: 100%; border-radius: 10px; }
.wsv-picture.wsv-wide { max-width: none; padding: 0; }
.wsv-picture.wsv-wide img { width: 100%; border-radius: 0; }
.wsv figcaption { font-size: 14px; opacity: .7; margin-top: 6px; }

.wsv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.wsv-grid figure { margin: 0; }
.wsv-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }

.wsv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.wsv-card {
	display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
	background: var(--c1); color: var(--c3) !important; text-decoration: none;
	border-top: 4px solid var(--c2); transition: transform .15s, box-shadow .15s;
}
.wsv-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.wsv-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wsv-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; font-size: 15px; }
.wsv-card-body b { font-size: 18px; }
.wsv-date { font-size: 13px; opacity: .6; }
.wsv-article h1 { margin-top: 8px; }
.wsv-article-img { max-width: 100%; border-radius: 10px; margin: 0 0 18px; }
.wsv-back { font-size: 15px; text-decoration: none; }

.wsv-contacts { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.wsv-c-list { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; }
.wsv-c-row { display: flex; gap: 10px; }
.wsv-c-ico { width: 24px; flex: none; }
.wsv-map { flex: 1 1 380px; height: 300px; border: 0; border-radius: 10px; }

/* billboard slideshow */
.wsv-billboard { position: relative; overflow: hidden; background: var(--c4); color: var(--c0); min-height: 340px; }
.wsv-billboard.wsv-full { min-height: 100vh; }
.wsv-slide {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
	background-size: cover; background-position: center; opacity: 0; transition: opacity .8s; pointer-events: none;
}
.wsv-slide.on { opacity: 1; pointer-events: auto; }
.wsv-slide.wsv-has-img::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.wsv-slide-in { position: relative; max-width: 760px; padding: 80px 24px 60px; }
.wsv-slide h2 { font-size: 46px; }
.wsv-full .wsv-slide h2 { font-size: 56px; }
.wsv-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 10px; }
.wsv-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c0); background: transparent; cursor: pointer; padding: 0; }
.wsv-dot.on { background: var(--c0); }

/* showcase: panels side by side, scrolling sideways */
.wsv-panels { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; height: calc(100vh - 66px); }
.wsv-panel { flex: none; width: min(1100px, 92vw); padding: 32px; scroll-snap-align: start; overflow-y: auto; }
.wsv-panel + .wsv-panel { border-left: 6px solid var(--c2); }
.wsv-hero h1 { font-size: 44px; }
.wsv-hero .wsv-billboard { border-radius: 12px; min-height: 300px; margin-bottom: 18px; }
.wsv-three { grid-template-columns: repeat(3, 1fr); }
.wsv-panel .wsv-block { margin: 0; padding: 0; max-width: none; }
.wsv-panel-gallery { background: var(--c1); }

/* ----- footer ----- */
.wsv-foot {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
	padding: 28px 32px; margin-top: 40px; background: var(--c4); color: var(--c0); font-size: 15px;
	border-top: 4px solid var(--c2);
}
.wsv-foot a { color: inherit; }
.wsv-made { opacity: .7; }

/* ----- phones ----- */
@media (max-width: 760px) {
	body.wsv { font-size: 16px; }
	.wsv h1 { font-size: 28px; }
	.wsv h2 { font-size: 24px; }
	.wsv-head { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
	.wsv-burger { display: block; }
	.wsv-nav { display: none; width: 100%; flex-direction: column; gap: 0; margin: 0; }
	.wsv-nav.open { display: flex; }
	.wsv-nav a { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
	.wsv-block { margin: 32px auto; padding: 0 16px; }
	.wsv-banner h2, .wsv-slide h2, .wsv-full .wsv-slide h2 { font-size: 30px; }
	.wsv-banner { min-height: 280px; }
	.wsv-panels { flex-direction: column; height: auto; overflow: visible; }
	.wsv-panel { width: 100%; padding: 20px 16px; }
	.wsv-panel + .wsv-panel { border-left: 0; border-top: 6px solid var(--c2); }
	.wsv-three { grid-template-columns: 1fr; }
	.wsv-foot { padding: 22px 16px; }
}

/* the site's people see what visitors do not: unpaid blocks and sections (step 4) */
.wsv-unpaid { position: relative; outline: 3px dashed #e05a2b; outline-offset: -3px; opacity: .8; }
.wsv-unpaid-tag { position: absolute; top: 6px; right: 6px; z-index: 5; padding: 2px 8px; border-radius: 4px; background: #e05a2b; color: #ffffff;
	font-size: 12px; font-family: Arial, sans-serif; }

/* ----- live blocks (step 5a): posts, courses, books ----- */
.wsv-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.wsv-post { background: var(--c1); border-radius: 10px; overflow: hidden; border-top: 4px solid var(--c2); }
.wsv-post-pics { display: grid; gap: 2px; }
.wsv-post-pics.n2, .wsv-post-pics.n3, .wsv-post-pics.n4 { grid-template-columns: 1fr 1fr; }
.wsv-post-pics img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wsv-post-pics.n1 img { aspect-ratio: auto; max-height: 420px; }
.wsv-post-pics.n3 img:first-child { grid-column: span 2; }
.wsv-post-body { padding: 12px 16px 16px; font-size: 15px; overflow-wrap: anywhere; }
.wsv-post-body p { margin: 8px 0 0; }
.wsv-price { font-weight: 700; margin-top: 4px; }
.wsv-price s { font-weight: 400; opacity: .6; }
.wsv-price.free { opacity: .8; }
.wsv-book-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wsv-book img { aspect-ratio: 3 / 4; }
.wsv-book-blank { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; font-size: 48px; background: var(--c2); }
.wsv-live-empty { padding: 18px; border: 2px dashed var(--c2); border-radius: 10px; opacity: .8; font-size: 15px; }

/* ----- the form (step 5b) ----- */
.wsv-form-f { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-top: 16px; }
.wsv-form-f label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.wsv-form-f input, .wsv-form-f textarea {
	font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .2);
	background: #fff; color: #222; box-sizing: border-box; width: 100%;
}
.wsv-form-f textarea { resize: vertical; }
.wsv-form-f .wsv-btn { align-self: flex-start; border: 0; cursor: pointer; font: inherit; }
.wsv-form-f .wsv-btn[disabled] { opacity: .5; cursor: default; }
.wsv-form-as { margin: 0; font-size: 15px; opacity: .85; }
.wsv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wsv-form-msg { margin: 0; min-height: 1.2em; font-size: 15px; }
.wsv-form-msg.ok { color: #1d7a3a; font-weight: 700; }
.wsv-form-msg.bad { color: #b3261e; }

/* ----- the catalog (step 5c) ----- */
.wsv-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.wsv-product img { aspect-ratio: 1 / 1; }
.wsv-product-blank { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: 48px; background: var(--c2); }
.wsv-price small { font-weight: 400; opacity: .7; }
.wsv-out { font-size: 13px; color: #b3261e; }
.wsv-more { margin-top: 18px; }
.wsv-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wsv-cats a { padding: 6px 14px; border-radius: 18px; background: var(--c1); color: var(--c3); text-decoration: none; font-size: 15px; }
.wsv-cats a.on { background: var(--c4); color: #fff; }
.wsv-subcats a { font-size: 14px; padding: 4px 12px; }
.wsv-empty { opacity: .7; }
.wsv-crumbs { font-size: 14px; margin-bottom: 14px; opacity: .8; }
.wsv-crumbs a { color: inherit; }
.wsv-pp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.wsv-pp-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wsv-pp-pics img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; grid-column: span 4; }
.wsv-pp-pics.multi img { grid-column: span 1; cursor: pointer; opacity: .75; }
.wsv-pp-pics.multi img.on { grid-column: span 4; cursor: default; opacity: 1; }
.wsv-pp-info h1 { margin-top: 0; }
.wsv-pp-info > .wsv-price { font-size: 24px; display: block; }
.wsv-order { margin-top: 24px; padding: 18px; border-radius: 10px; background: var(--c1); }
.wsv-order h2 { margin: 0; font-size: 20px; }
.wsv-qty input { max-width: 120px; }
/* «Оплатить онлайн» (Kassa24, part 2): the order's two buttons, the invoice page /pay/<code> */
.wsv-order-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wsv-btn.wsv-btn-alt { background: transparent; color: var(--c2) !important; border: 2px solid var(--c2) !important; }
.wsv-pay-btn { white-space: nowrap; }
.wsv-pay-btn[disabled] { opacity: .5; cursor: default; }
.wsv-inv { max-width: 560px; }
.wsv-inv-no { opacity: .75; margin: 0; }
.wsv-inv-purpose { font-size: 17px; }
.wsv-inv-sum { font-size: 30px; font-weight: 700; margin: 8px 0 16px; }
.wsv-inv-app .wsv-pay-btn { border: 0; cursor: pointer; font: inherit; }
@media (max-width: 700px) {
	.wsv-pp { grid-template-columns: 1fr; gap: 18px; }
	.wsv-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* «Калькулятор займа» (step 8c; js/site.js) */
.wsv-calc-f { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-top: 16px; }
.wsv-calc-f label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.wsv-calc-f input, .wsv-calc-f select { font: inherit; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 8px; background: #ffffff; color: #222222; }
.wsv-calc-f .wsv-btn { align-self: flex-start; border: 0; cursor: pointer; font: inherit; }
.wsv-calc-f .wsv-btn[disabled] { opacity: .5; cursor: default; }
.wsv-calc-gold { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px dashed var(--c2); border-radius: 10px; padding: 10px 12px; margin: 0; }
.wsv-calc-gold legend { padding: 0 6px; font-weight: 600; }
.wsv-calc-gold select { flex: 1 1 220px; }
.wsv-calc-gold input { width: 110px; }
.wsv-calc-est { flex-basis: 100%; margin: 0; font-weight: 600; }
.wsv-btn-light { background: transparent; color: var(--c2) !important; border: 2px solid var(--c2) !important; }
.wsv-calc-out { margin-top: 18px; }
.wsv-calc-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.wsv-calc-totals div { background: var(--c1); border-top: 4px solid var(--c2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.wsv-calc-totals span { font-size: 13px; opacity: .75; }
.wsv-calc-totals b { font-size: 18px; }
.wsv-calc-wrap { overflow-x: auto; }
.wsv-calc-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--c1); }
.wsv-calc-table th, .wsv-calc-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid rgba(0, 0, 0, .08); white-space: nowrap; }
.wsv-calc-table th:first-child, .wsv-calc-table td:first-child { text-align: center; }
.wsv-calc-table th { background: var(--c2); color: var(--c0); font-weight: 600; }
.wsv-calc-note { font-size: 13px; opacity: .7; }
/* BBCode in the texts (api/_webrender.php webText): [center], [list] */
.wsv-center { text-align: center; }
.wsv-list { margin: 0 0 1em; padding-left: 1.4em; }
.wsv-list li { margin: 2px 0; }

/* ---------- «Витрина» of a pawn shop (step 8d; api/_webshow.php) ---------- */
.wsv-lot .wsv-card-body small { display: block; opacity: .75; margin: 2px 0 4px; }
.wsv-lot-badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--c2); }
.wsv-lot-badge.held { background: #fde3d6; color: #8a3a12; }
.wsv-lot-descr { margin: 0 0 6px; }
.wsv-lot-kind { margin: 0 0 12px; font-size: 13px; opacity: .7; }
.wsv-lot-install { margin: 14px 0; padding: 10px 12px; border-left: 4px solid var(--c3); background: var(--c1); border-radius: 6px; }

/* an auction on a lot page (step 8d part 2) */
.wsv-lot-badge.auction { background: #fff1c2; color: #6b4e00; }
.wsv-auction { margin: 12px 0; padding: 14px; border: 2px solid var(--c3); border-radius: 10px; background: var(--c1); }
.wsv-au-head { font-weight: bold; margin-bottom: 8px; }
.wsv-au-head.live { color: #b3261e; }
.wsv-au-info .wsv-price { font-size: 26px; display: block; }
.wsv-au-info > div { margin: 2px 0; }
.wsv-au-form { margin-top: 10px; }
.wsv-au-hist { margin-top: 10px; font-size: 14px; }
.wsv-au-hist ul { margin: 6px 0 0; padding-left: 18px; }

/* the shop's TV screen of the showcase (step 8d part 3; /<address>/screen) */
body.wsv-screen { margin: 0; overflow: hidden; background: #111; cursor: none; }
body.wsv-screen .wsv-staff { display: none; }
.wsv-screen-app { position: fixed; inset: 0; background: #111; color: #fff; font-family: inherit; }
.wsv-screen-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 7vh; font-weight: bold; }
.wsv-screen-pic { position: absolute; inset: 0; background-size: 125% auto; background-repeat: no-repeat; opacity: 0; }
.wsv-screen-app.nophoto .wsv-screen-pic { background: var(--c2); }
.wsv-screen-qr { position: absolute; top: 4vh; left: 4vh; padding: 1.5vh; background: #fff; color: #222; border-radius: 1.5vh; text-align: center; width: 22vh; font-size: 1.6vh; }
.wsv-screen-qr img { display: block; width: 100%; height: auto; }
.wsv-screen-card { position: absolute; right: 4vh; bottom: 4vh; max-width: 48vw; padding: 3vh 4vh; background: var(--c1); color: var(--c3); border-radius: 2vh;
	font-size: 2.8vh; box-shadow: 0 1vh 4vh rgba(0, 0, 0, .35); opacity: 0; transform: translateY(3vh); transition: opacity .6s, transform .6s; }
.wsv-screen-card.in { opacity: 1; transform: none; }
.wsv-screen-title { display: block; font-size: 4.2vh; line-height: 1.15; }
.wsv-screen-no { display: block; opacity: .7; margin-bottom: 1vh; }
.wsv-screen-descr { margin-bottom: 1.2vh; }
.wsv-screen-label { margin-top: 1.2vh; text-decoration: underline; }
.wsv-screen-price { font-size: 6vh; font-weight: bold; line-height: 1.1; }
.wsv-screen-held { margin-top: 1vh; font-weight: bold; color: #b3261e; }

/* «Документы» and «Вакансии» (step 8e) */
.wsv-docs-year { margin-top: 16px; }
.wsv-docs-year h3 { margin: 0 0 6px; font-size: 18px; }
.wsv-docs-year ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wsv-docs-year a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c2); }
.wsv-docs-year a:hover { color: var(--c2); }
.wsv-vac { border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
.wsv-vac h3 { margin: 0 0 8px; }
.wsv-vac-row { margin: 6px 0; }
.wsv-vac-row b { display: block; font-size: 14px; opacity: .75; }
.wsv-vac-row p { margin: 2px 0; }
.wsv-vac-apply { margin-top: 12px; }
.wsv-vac-apply summary { display: inline-block; cursor: pointer; list-style: none; }
.wsv-vac-apply summary::-webkit-details-marker { display: none; }
.wsv-vac-apply[open] summary { opacity: .6; }

/* «Мой займ» (step 8f) */
.wsv-loan-f { max-width: 420px; }
.wsv-loan-card { border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; padding: 16px; margin-top: 16px; }
.wsv-loan-card h3 { margin: 0 8px 8px 0; display: inline-block; }
.wsv-loan-card h4 { margin: 18px 0 6px; }
.wsv-loan-state { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; background: rgba(0, 0, 0, .08); }
.wsv-loan-state.ok { background: #e3f4e8; color: #1d7a3a; }
.wsv-loan-state.bad { background: #fde8e6; color: #b3261e; }
.wsv-loan-who { margin: 8px 0 0; font-weight: 600; }
.wsv-loan-items { margin: 4px 0 0; opacity: .85; }
.wsv-loan-docs { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }
.wsv-loan-docs a { color: inherit; border-bottom: 1px solid var(--c2); text-decoration: none; }
.wsv-ins-paid td, .wsv-ins-paid_late td { opacity: .6; }
.wsv-ins-overdue td { color: #b3261e; }
.wsv-ins-today td { font-weight: 700; }
.wsv-loan-pay { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--c2); border-radius: 10px; max-width: 560px; }
.wsv-loan-pay-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wsv-calc-f .wsv-btn.wsv-btn-alt { background: transparent; color: inherit; border: 1px solid var(--c2); }
.wsv-loan-banner:empty { display: none; }
.wsv-loan-banner { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--c2); font-weight: 600; }
.wsv-loan-banner.ok { border-color: #1d7a3a; color: #1d7a3a; }
.wsv-loan-banner.bad { border-color: #b3261e; color: #b3261e; }

/* pages linked from the footer (step 8g: the legal pages) */
.wsv-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; flex-basis: 100%; font-size: 14px; opacity: .85; }

/* the language switcher (step 9a): after the menu on a wide screen, next to ☰ on a phone */
.wsv-langs { order: 5; display: flex; gap: 2px; margin-left: 18px; font-size: 13px; letter-spacing: .04em; }
.wsv-langs a, .wsv-langs b { padding: 3px 7px; border-radius: 4px; color: inherit; text-decoration: none; }
.wsv-langs a { opacity: .7; }
.wsv-langs a:hover { opacity: 1; }
.wsv-langs b { background: var(--c2); color: var(--c0); font-weight: normal; }
@media (max-width: 760px) {
	.wsv-langs { order: 0; margin-left: auto; }
	.wsv-langs + .wsv-burger { margin-left: 4px; }
}

/* ---------- «Ломбард» (lombard-magnit.com): a dark page, full-width bands leaning 10° as a whole (text too, like the
   old site), the text centred, a bar on phones. Colours: c1 bands, c2 gold (the name, the calculator and the showcase),
   c3 text, c4 the page; headings get a brown band (c3 with c1) with gold letters, like the old «Режим работы». ---------- */
body.wsv.wsv-lombard { --sk: 10deg; --band: color-mix(in srgb, var(--c3) 55%, color-mix(in srgb, var(--c1) 67%, var(--c2)));
	background: var(--c4); overflow-x: hidden; font-family: "Century Gothic", CenturyGothic, "Didact Gothic", "URW Gothic", AppleGothic, sans-serif; }
/* the header as on the old site: the logo on the right of the left 30%; then one row of the menu (the languages at the far
   right), the big gold name, the first line of «Текст в шапке» big (the address) and the next lines smaller */
.wsv-lombard .wsv-head { position: static; display: grid; grid-template-columns: 30% minmax(0, 1fr); align-items: center; gap: 0 40px;
	min-height: 40vh; padding: 26px 36px 30px 0; box-shadow: none; }
.wsv-lhead-logo { justify-self: end; }
.wsv-lhead-logo img { display: block; height: 230px; width: auto; max-width: 100%; object-fit: contain; border-radius: 0; }
.wsv-lhead-in { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.wsv-lhead-top { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px 24px; width: 100%; }
.wsv-lombard .wsv-nav { flex: 0 1 auto; justify-content: flex-start; margin: 0; gap: 4px clamp(12px, 1.5vw, 46px); color: var(--c1); }
.wsv-lombard .wsv-nav a { min-width: 0; text-align: left; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 700;
	padding: 4px 0; border: 0; opacity: 1; white-space: nowrap; }
.wsv-lombard .wsv-nav a:hover, .wsv-lombard .wsv-nav a.on { color: var(--c2); }
.wsv-lombard .wsv-langs { order: 9; margin-left: auto; padding: 4px 0; gap: 6px; font-weight: 700; font-size: 16px; line-height: inherit; }
.wsv-lombard .wsv-langs a, .wsv-lombard .wsv-langs b { padding: 0; opacity: 1; color: var(--c1); }
.wsv-lombard .wsv-langs b { background: none; color: var(--c2); }
.wsv-lhead-name { margin-top: 10px; color: var(--c2) !important; text-decoration: none; font-size: 57px; font-weight: 700; line-height: 1.15;
	text-transform: uppercase; overflow-wrap: anywhere; user-select: none; }
.wsv-lhead-tag { margin: 6px 0 0; display: flex; flex-direction: column; font-size: 22px; line-height: 1.2; color: var(--c1); }
.wsv-lhead-tag1 { font-size: 33px; line-height: 1.2; max-width: 620px; }
/* the home page's first «Баннер», drawn in the header: its first paragraph big, the rest in paragraphs, its picture behind */
div.wsv-lhead-tag p { margin: 0 0 10px; max-width: 720px; }
div.wsv-lhead-tag p.wsv-lhead-tag1 { margin-bottom: 14px; }
div.wsv-lhead-tag .wsv-btn { align-self: flex-start; margin-top: 6px; }
.wsv-lombard .wsv-lhead.wsv-has-img { background-size: cover; background-position: center;
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--c4) 72%, transparent); }
.wsv-lagree { margin: 0; padding: 4px 16px 18px; text-align: center; font-size: 16px; color: var(--c1); }
.wsv-lagree a { color: var(--c2); text-decoration: none; }
.wsv-lagree a:hover { text-decoration: underline; }

.wsv-lombard .wsv-main { padding: 0 0 24px; overflow-x: hidden; overflow-x: clip; }
/* a band: the whole width, its slanted ends at the screen's edges; the content in the middle */
.wsv-lombard .wsv-main .wsv-block { position: relative; max-width: none; margin: 22px calc(-1 * var(--side)); border-radius: 0;
	padding: 30px max(90px, calc(50% - 520px)); color: var(--c3); text-align: center; font-size: 19px;
	background: var(--c1); transform: skewX(calc(-1 * var(--sk))); box-shadow: -5px 0 5px #030303; }
.wsv-lombard .wsv-main .wsv-block h1, .wsv-lombard .wsv-main .wsv-block h2 { font-weight: 700; }
.wsv-lombard .wsv-main .wsv-calc, .wsv-lombard .wsv-main .wsv-block.wsv-showcase, .wsv-lombard .wsv-main .wsv-loan { background: var(--c2); }
.wsv-lombard .wsv-main .wsv-heading { background: var(--band); color: var(--c2); padding-top: 18px; padding-bottom: 18px; }
.wsv-lombard .wsv-main .wsv-heading h1, .wsv-lombard .wsv-main .wsv-heading h2 { margin: 0; }
.wsv-lombard .wsv-main .wsv-heading .wsv-sub { color: var(--c1); opacity: 1; margin: 6px 0 0; }
.wsv-lombard .wsv-main .wsv-empty { opacity: 1; }
.wsv-lombard .wsv-main .wsv-empty > * { opacity: .7; }
/* forms, tables, cards and lists stay left-aligned, in the middle of the band */
.wsv-lombard .wsv-main .wsv-calc-f, .wsv-lombard .wsv-main .wsv-form-f, .wsv-lombard .wsv-main .wsv-loan-f, .wsv-lombard .wsv-main .wsv-calc-out,
.wsv-lombard .wsv-main .wsv-vac, .wsv-lombard .wsv-main .wsv-loan-card, .wsv-lombard .wsv-main .wsv-docs-year { margin-left: auto; margin-right: auto; text-align: left; }
.wsv-lombard .wsv-main .wsv-cards, .wsv-lombard .wsv-main .wsv-posts, .wsv-lombard .wsv-main .wsv-grid { text-align: left; }
.wsv-lombard .wsv-main .wsv-contacts { justify-content: center; text-align: left; }
.wsv-lombard .wsv-main .wsv-list { display: inline-block; text-align: left; }
.wsv-lombard .wsv-main .wsv-calc-f input, .wsv-lombard .wsv-main .wsv-calc-f select, .wsv-lombard .wsv-main .wsv-form-f input,
.wsv-lombard .wsv-main .wsv-form-f textarea { border-radius: 0; border: 1px solid rgba(0, 0, 0, .35); font-size: 19px; }
.wsv-lombard .wsv-main .wsv-calc-f, .wsv-lombard .wsv-main .wsv-form-f { align-items: stretch; }
/* a banner keeps its picture; a wide picture has no band around it */
.wsv-lombard .wsv-main .wsv-banner { padding: 0; overflow: hidden; background-color: var(--c4); color: var(--c0); }
.wsv-lombard .wsv-main .wsv-picture.wsv-wide { padding: 0; overflow: hidden; background: none; }
/* on the bands: dark links and buttons (gold would vanish on a gold band) */
.wsv-lombard .wsv-main .wsv-block a { color: var(--c3); }
.wsv-lombard .wsv-main .wsv-heading a { color: var(--c2); }
.wsv-lombard .wsv-main .wsv-btn { background: var(--c4); color: var(--c2) !important; border-radius: 0; font-size: 19px; padding: 12px 34px; }
.wsv-lombard .wsv-main .wsv-btn:hover { transform: none; box-shadow: -3px 0 4px #030303; }
.wsv-lombard .wsv-main .wsv-banner .wsv-btn { background: var(--c2); color: var(--c4) !important; }
.wsv-lombard .wsv-main .wsv-card, .wsv-lombard .wsv-main .wsv-post { background: var(--c0); border-radius: 0; border-top-color: var(--c4); }
.wsv-lombard .wsv-main .wsv-grid img, .wsv-lombard .wsv-main .wsv-picture img { border-radius: 0; }
.wsv-lombard .wsv-main .wsv-calc-table th { background: var(--c4); color: var(--c2); }
.wsv-lombard .wsv-main .wsv-calc-totals div { border-radius: 0; border-top-color: var(--c4); }
/* the calculator as on the old site (js/site.js stripes): no band of its own; a stripe per tariff, leaning like the bands,
   the open one wide, the others narrow with their terms written up them; the last brown stripe closes the row */
.wsv-lombard .wsv-main .wsv-calc.wsv-calc-stripes { background: none; box-shadow: none; transform: none; padding: 30px 0 0; color: var(--c1); }
.wsv-lombard .wsv-main .wsv-calc-stripes > .wsv-calc-note { padding: 0 24px; color: var(--c1); }
.wsv-tstr { --nw: 92px; display: flex; min-height: 560px; margin: 0 -40px; container-type: inline-size; color: var(--c3); }
.wsv-tstr-one { position: relative; flex: 0 0 var(--nw); min-width: 0; overflow: hidden; transform: skewX(calc(-1 * var(--sk)));
	box-shadow: -5px 0 5px #030303; transition: flex-basis .35s ease; cursor: pointer; background: var(--c1); }
.wsv-tstr-one.on { flex: 1 1 auto; cursor: default; }
.wsv-tstr-c1 { background: var(--c2); }
.wsv-tstr-c2 { background: color-mix(in srgb, var(--c1) 50%, var(--c2)); }
.wsv-tstr-end { flex: 0 0 calc(var(--nw) + 60px); background: var(--band); cursor: default; }
.wsv-tstr-lbl { position: absolute; left: 0; top: 0; width: var(--nw); height: 100%; padding: 30px 0; border: 0; background: none;
	color: var(--c3); font: inherit; font-size: 26px; font-weight: 700; text-decoration: underline; cursor: pointer;
	writing-mode: vertical-rl; transform: rotate(180deg); text-align: end; white-space: nowrap; }
.wsv-tstr-pane { box-sizing: border-box; margin-left: var(--nw); width: calc(100cqw - var(--n) * var(--nw) - 60px);
	padding: 18px 20px 30px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .25s; }
.wsv-tstr-one.on .wsv-tstr-pane { opacity: 1; visibility: visible; transition-delay: .2s; }
.wsv-lombard .wsv-main .wsv-tstr p { margin: 0; }
.wsv-tstr-terms { font-size: 25px; }
.wsv-tstr-f { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 0; }
.wsv-tstr-h { font-size: 25px; }
.wsv-tstr-f input, .wsv-tstr-gold select { width: min(600px, 100%); font: inherit; font-size: 24px; padding: 2px 8px; border: 1px solid rgba(0, 0, 0, .35);
	border-radius: 0; background: #ffffff; color: #222222; }
.wsv-tstr-ms { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: min(910px, 100%); }
.wsv-tstr-m { flex: 1 1 200px; max-width: 300px; font: inherit; font-size: 20px; padding: 2px 8px; border: 1px solid rgba(0, 0, 0, .35); border-radius: 0;
	background: #f0f0f0; color: #222222; cursor: pointer; }
.wsv-tstr-m:hover, .wsv-tstr-m.on { background: var(--c4); color: var(--c2); }
.wsv-tstr-gold { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: min(600px, 100%); font-size: 17px; }
.wsv-tstr-gold input { width: 120px; }
.wsv-tstr-gold .wsv-tstr-m { flex: 0 0 auto; }
.wsv-tstr-gold .wsv-calc-est { flex-basis: 100%; margin: 0; }
.wsv-tstr-f .wsv-form-msg { margin: 0; min-height: 0; }
.wsv-lombard .wsv-main .wsv-tstr .wsv-tstr-h2 { margin: 8px 0 6px; font-size: 17px; font-weight: 700; }
.wsv-tstr-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 180px)); justify-content: center; gap: 5px; }
.wsv-tstr-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 3px outset var(--c3); }
.wsv-tstr-tile b { font-size: 33px; font-weight: normal; line-height: 1.1; }
.wsv-tstr-mon { font-size: 18px; }
.wsv-tstr-sum { font-size: 22px; }
.wsv-tstr-start .wsv-tstr-sum { font-size: 17px; }
.wsv-lombard .wsv-main .wsv-tstr .wsv-tstr-tot { margin: 12px 0 0; font-size: 17px; }
.wsv-lombard .wsv-main .wsv-lot-badge { background: var(--c4); color: var(--c2); }
.wsv-lombard .wsv-main .wsv-cats a { background: var(--c0); border-radius: 0; }
.wsv-lombard .wsv-main .wsv-cats a.on { background: var(--c4); color: var(--c2); }
.wsv-lombard .wsv-main .wsv-vac, .wsv-lombard .wsv-main .wsv-loan-card { border-radius: 0; border-color: rgba(0, 0, 0, .25); }
/* the footer: gold links on the dark page */
.wsv-lombard .wsv-foot { margin-top: 24px; padding: 30px 48px; border-top: 0; color: var(--c1); justify-content: center; text-align: center; }
.wsv-lombard .wsv-foot a { color: var(--c2); }
.wsv-lombard .wsv-foot-links { justify-content: center; gap: 8px 28px; font-size: 16px; opacity: 1; }
.wsv-lbar { display: none; }
@media (max-width: 760px) {
	body.wsv.wsv-lombard { --sk: 2deg; }
	.wsv-lombard .wsv-head { grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; min-height: 0; padding: 12px 16px 18px; }
	.wsv-lhead-logo { justify-self: start; }
	.wsv-lhead-logo img { height: 72px; }
	.wsv-lhead-top { flex-wrap: wrap; }
	.wsv-lombard .wsv-langs { order: 0; margin-left: auto; }
	.wsv-lombard .wsv-nav a, .wsv-lombard .wsv-nav a:first-child { min-width: 0; margin: 0; padding: 10px 0; text-align: left; font-size: 16px;
		border-bottom: 1px solid rgba(255, 255, 255, .15); }
	.wsv-lhead-name { margin-top: 8px; font-size: 30px; }
	.wsv-lhead-tag { font-size: 15px; }
	.wsv-lhead-tag1 { font-size: 19px; }
	.wsv-lagree { font-size: 14px; padding: 0 16px 12px; }
	.wsv-lombard .wsv-main .wsv-block { margin: 16px 0; padding: 22px 30px; font-size: 17px; }
	.wsv-tstr { flex-direction: column; min-height: 0; margin: 0; }
	.wsv-tstr-one, .wsv-tstr-one.on { flex: 0 0 auto; }
	.wsv-tstr-lbl { position: static; width: 100%; height: auto; padding: 14px 16px; writing-mode: horizontal-tb; transform: none; text-align: center; font-size: 19px; white-space: normal; }
	.wsv-tstr-pane { width: auto; margin-left: 0; display: none; padding: 0 16px 22px; }
	.wsv-tstr-one.on .wsv-tstr-pane { display: block; }
	.wsv-tstr-end { flex-basis: 24px; }
	.wsv-tstr-terms, .wsv-tstr-h { font-size: 19px; }
	.wsv-tstr-f input { font-size: 19px; }
	.wsv-tstr-m { font-size: 16px; flex-basis: 100%; max-width: none; }
	.wsv-tstr-tiles { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
	.wsv-tstr-tile b { font-size: 24px; }
	.wsv-tstr-mon { font-size: 13px; }
	.wsv-tstr-sum { font-size: 14px; }
	.wsv-tstr-start .wsv-tstr-sum { font-size: 12px; }
	.wsv-lbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--c4); border-top: 2px solid var(--c2); }
	.wsv-lbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 8px; min-width: 0;
		color: var(--c1); text-decoration: none; font-size: 12px; line-height: 1.2; }
	.wsv-lbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.wsv-lbar a.on { color: var(--c2); }
	.wsv-lbar svg { width: 24px; height: 24px; }
	body.wsv-has-lbar { padding-bottom: 64px; }
	body.wsv-has-lbar.wsv-has-staff { padding-bottom: 98px; }
	.wsv-has-staff .wsv-lbar { bottom: 34px; }
}