/* Winlike theme for PerfectPanel — variant «как Озон» (Dave, 28.09.2026).
   Marketplace layout: grey page, white rounded boxes, one bright blue, pink only for «Хит» and the slogan.
   Logo: W drawn as a growth chart, «like» in the same blue. Fonts: Golos Text; Unbounded for the wordmark only.
   Sections: 1 tokens · 2 base · 3 strip & header · 4 hero, banner & calculator · 5 boxes & cards · 6 footer & tab bar
             7 dialogs & forms · 8 catalog · 9 cabinet · 10 tablets & phones */

/* 1 ---------- tokens */
:root {
  --wl-ground: #F2F3F7;
  --wl-surface: #FFFFFF;
  --wl-ink: #22304D;
  --wl-muted: #65718A;
  --wl-line: #E3E8F2;
  --wl-icon: #5A6A8C;
  --wl-accent: #0B5CFF;
  --wl-accent-deep: #0747C9;
  --wl-soft: #E8F0FF;
  --wl-soft-2: #CFE0FF;
  --wl-pink: #E0106F;
  --wl-green: #12A150;
  --wl-green-deep: #0E7A3D;
  --wl-green-soft: #E4F6EB;
  --wl-red: #B42318;
  --wl-red-soft: #FDECEA;
  --wl-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wl-logo-font: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --wl-r-lg: 24px;
  --wl-r: 16px;
  --wl-r-sm: 12px;
  --wl-shadow: 0 1px 2px rgba(10, 15, 31, .04), 0 12px 32px rgba(10, 15, 31, .06);
  --wl-gutter: 16px;
  --wl-max: 1280px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --wl-gutter: 24px; } }
@media (min-width: 1200px) { :root { --wl-gutter: 40px; } }

/* 2 ---------- base */
body.wl { margin: 0; background: var(--wl-ground); color: var(--wl-ink); font: 400 16px/1.5 var(--wl-body); -webkit-font-smoothing: antialiased; }
.wl *, .wl *::before, .wl *::after { box-sizing: border-box; }
.wl a { color: inherit; text-decoration: none; }
.wl img { max-width: 100%; height: auto; }
.wl h1, .wl h2, .wl h3 { text-wrap: balance; font-family: var(--wl-body); }
.wl :focus-visible { outline: 3px solid var(--wl-soft-2); outline-offset: 2px; border-radius: 8px; }
.wl-wrap { max-width: calc(var(--wl-max) + 2 * var(--wl-gutter)); margin: 0 auto; padding-inline: var(--wl-gutter); }
.wl-narrow { max-width: 900px; }
.wl-center { display: flex; justify-content: center; margin-top: 24px; }
.wl-ic { display: block; }
@media (prefers-reduced-motion: reduce) { .wl * { transition: none !important; animation: none !important; } }

.wl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--wl-r-sm);
  font: 700 15px/1 var(--wl-body); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.wl-btn--primary { background: var(--wl-accent); color: #fff !important; }
.wl-btn--primary:hover { background: var(--wl-accent-deep); }
.wl-btn--soft { background: var(--wl-soft); color: var(--wl-accent-deep) !important; }
.wl-product:hover .wl-btn--soft, .wl-btn--soft:hover { background: var(--wl-accent); color: #fff !important; }
.wl-btn--white { background: #fff; color: var(--wl-accent) !important; min-height: 48px; font-size: 16px; }
.wl-btn--outline { border-color: rgba(255, 255, 255, .7); color: #fff !important; min-height: 48px; font-size: 16px; }
.wl-btn--outline:hover { background: rgba(255, 255, 255, .1); }
.wl-btn--ghost { border-color: var(--wl-ink); background: transparent; min-height: 50px; padding: 0 28px; font-size: 16px; }
.wl-btn--lg { width: 100%; min-height: 54px; font-size: 17px; border-radius: 14px; }
.wl-burger { width: 44px; height: 44px; border-radius: var(--wl-r-sm); border: 1px solid var(--wl-line); background: var(--wl-surface);
  display: inline-flex; align-items: center; justify-content: center; color: var(--wl-ink); cursor: pointer; padding: 0; }

/* 3 ---------- strip & header */
.wl-strip { background: var(--wl-accent); color: #fff; font-size: 13px; }
.wl-strip .wl-wrap { display: flex; justify-content: space-between; gap: 12px; min-height: 32px; align-items: center; }
.wl-strip span { display: inline-flex; align-items: center; gap: 6px; }
.wl-strip span:first-child { font-weight: 700; }
.wl-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--wl-surface); box-shadow: 0 1px 0 var(--wl-line); }
.wl-header-row { display: flex; align-items: center; gap: 16px; min-height: 80px; }
.wl-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--wl-ink); flex: none; }
.wl-logo-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--wl-accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wl-logo-word { font: 600 23px/1 var(--wl-logo-font); letter-spacing: -.03em; }
.wl-logo-word em { font-style: normal; color: var(--wl-accent); }
.wl-catalog-btn { min-height: 50px; border-radius: 14px; padding: 0 18px; flex: none; }
.wl-search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; height: 50px; border: 2px solid var(--wl-accent); border-radius: 14px; background: #fff; }
.wl-search-ic { display: flex; align-items: center; padding: 0 12px 0 14px; color: var(--wl-muted); }
.wl-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1 var(--wl-body); color: var(--wl-ink); }
.wl-search input::-webkit-search-cancel-button { display: none; }
.wl-search-btn { border: 0; background: var(--wl-accent); color: #fff; font: 700 16px/1 var(--wl-body); padding: 0 24px; border-radius: 0 11px 11px 0; cursor: pointer; }
.wl-search-btn:hover { background: var(--wl-accent-deep); }
.wl-suggest { position: absolute; left: -2px; right: -2px; top: calc(100% + 6px); background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(10, 15, 31, .16); padding: 8px; z-index: 40; max-height: 420px; overflow-y: auto; }
.wl-suggest a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 15px; }
.wl-suggest a:hover, .wl-suggest a:focus { background: var(--wl-ground); }
.wl-suggest small { color: var(--wl-muted); white-space: nowrap; }
.wl-suggest p { margin: 8px 12px; color: var(--wl-muted); font-size: 14px; }
.wl-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.wl-tool { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; min-height: 44px; justify-content: center; font-size: 12px; font-weight: 500; }
.wl-tool:hover { color: var(--wl-accent); }

/* catalog pop-up («Каталог» in the header, «Каталог» in the phone tab bar) */
.wl-mega { position: fixed; z-index: 30; left: 0; right: 0; top: var(--wl-mega-top, 112px); bottom: 0; background: rgba(10, 15, 31, .35); }
.wl-mega-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 24px; background: #fff; border-radius: 0 0 24px 24px; padding-block: 20px 24px;
  max-height: calc(100vh - var(--wl-mega-top, 112px) - 24px); overflow: hidden; box-shadow: 0 24px 48px rgba(10, 15, 31, .18); }
.wl-mega-head { display: none; }
.wl-mega-nets { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.wl-mega-net svg { color: var(--wl-icon); }
.wl-mega-net[aria-pressed="true"] svg { color: var(--wl-accent); }
.wl-mega-net { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--wl-ink); font: 600 15px/1.2 var(--wl-body); text-align: left; cursor: pointer; }
.wl-mega-net:hover { background: var(--wl-ground); }
.wl-mega-net[aria-pressed="true"] { background: var(--wl-soft); color: var(--wl-accent-deep); }
.wl-mega-list { overflow-y: auto; padding-right: 4px; }
.wl-mega-list h3 { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: var(--wl-muted); text-transform: uppercase; letter-spacing: .04em; }
.wl-mega-group { margin-bottom: 18px; }
.wl-mega-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.wl-mega-items a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.wl-mega-items a:hover { background: var(--wl-ground); color: var(--wl-accent-deep); }
.wl-mega-items small { flex: none; color: var(--wl-muted); font-size: 13px; }
.wl-mega-all { display: inline-flex; margin-top: 4px; color: var(--wl-accent); font-weight: 700; }
.wl-mega-empty { color: var(--wl-muted); }
.wl-catalog-btn[aria-expanded="true"] { background: var(--wl-accent-deep); }

/* 4 ---------- hero, banner & calculator */
.wl-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: stretch; padding-block: 24px 12px; }
.wl-hero > * { min-width: 0; }
.wl-banner { position: relative; overflow: hidden; background: var(--wl-accent); color: #fff; border-radius: 28px; padding: 40px 44px; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.wl-banner-deco { position: absolute; right: -20px; bottom: -30px; width: 420px; height: 420px; opacity: .16; }
.wl-banner-text { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wl-kicker { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--wl-pink); color: #fff; font-size: 13px; font-weight: 700; }
.wl-banner h1 { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.wl-banner-lead { margin: 0; color: rgba(255, 255, 255, .9); font-size: 18px; line-height: 1.5; }
.wl-banner-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.wl-banner .wl-crumbs { color: rgba(255, 255, 255, .8); }
.wl-banner .wl-crumbs a:hover { color: #fff; }
.wl-notes { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.wl-note { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--wl-ink); border-radius: 16px; padding: 10px 16px 10px 10px; box-shadow: 0 10px 24px rgba(4, 30, 110, .25); }
.wl-note:nth-child(1) { margin-left: 40px; }
.wl-note:nth-child(3) { margin-left: 70px; }
.wl-note b { display: block; font-size: 15px; }
.wl-note small { display: block; font-size: 12px; color: var(--wl-muted); }
.wl-note-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--wl-soft); color: var(--wl-accent); display: flex; align-items: center; justify-content: center; flex: none; }
/* breadcrumbs: always one line, the last crumb is cut with «…» (rule for all PP sites, Dave 29.09) */
.wl-crumbs { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: 14px; color: var(--wl-muted); }
.wl-crumbs > * { flex: none; }
.wl-crumbs > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wl-calc { background: var(--wl-surface); border-radius: var(--wl-r-lg); padding: 24px; box-shadow: var(--wl-shadow); }
.wl-calc-title { font: 800 20px/1.2 var(--wl-body); margin-bottom: 14px; }
.wl-label { display: block; font-size: 12px; font-weight: 600; color: var(--wl-muted); margin: 0 0 6px; }
.wl-nets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wl-net { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--wl-line); background: var(--wl-surface); display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px/1.2 var(--wl-body); color: var(--wl-ink); cursor: pointer; transition: border-color .12s, background .12s; }
.wl-net:hover { border-color: #B9CCF5; }
.wl-net span { white-space: nowrap; }
.wl-net[aria-pressed="true"] { border-color: var(--wl-accent); background: var(--wl-soft); color: var(--wl-accent-deep); }
.wl-select { position: relative; margin-bottom: 14px; }
.wl-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--wl-muted); border-bottom: 2px solid var(--wl-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.wl-select select, .wl-input { width: 100%; min-height: 48px; border-radius: var(--wl-r-sm); border: 1.5px solid var(--wl-line); background: var(--wl-surface); padding: 0 14px; font: 400 16px/1.3 var(--wl-body); color: var(--wl-ink); }
.wl-select select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.wl-input { margin-bottom: 14px; }
.wl-input:focus, .wl-select select:focus { border-color: var(--wl-accent); outline: 3px solid var(--wl-soft); }
.wl-qty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.wl-chip { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--wl-line); background: var(--wl-surface); font: 600 15px/1 var(--wl-body); color: var(--wl-ink); cursor: pointer; }
.wl-chip[aria-pressed="true"] { border-color: var(--wl-accent); background: var(--wl-soft); color: var(--wl-accent-deep); }
.wl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--wl-ground); font-size: 13px; }
.wl-facts div { display: flex; justify-content: space-between; gap: 8px; }
.wl-facts dt { color: var(--wl-muted); }
.wl-facts dd { margin: 0; font-weight: 600; text-align: right; }
.wl-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wl-total span { font-size: 13px; color: var(--wl-muted); }
.wl-total b { font-weight: 500; color: var(--wl-muted); }
.wl-total strong { font: 800 30px/1 var(--wl-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wl-paydots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--wl-muted); }
.wl-paydots span { display: inline-flex; align-items: center; gap: 6px; }
.wl-paydots span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wl-green); }

/* gift «1 000 просмотров» (home banner) */
.wl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wl-gift { position: relative; background: #fff; color: var(--wl-ink); border-radius: 20px; padding: 22px; box-shadow: 0 16px 40px rgba(4, 30, 110, .28); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wl-gift-head { display: flex; align-items: center; gap: 12px; }
.wl-gift-head b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; }
.wl-gift-head small { display: block; font-size: 13px; color: var(--wl-muted); }
.wl-gift-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; background: #FDE7F2; color: var(--wl-pink); display: flex; align-items: center; justify-content: center; }
.wl-gift-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.wl-gift-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--wl-muted); white-space: nowrap; }
.wl-gift-steps li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 2px; border-radius: 1px; background: var(--wl-line); min-width: 6px; }
.wl-gift-steps span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--wl-ground); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.wl-gift-steps .on { color: var(--wl-ink); }
.wl-gift-steps .on span { background: var(--wl-accent); color: #fff; }
.wl-gift .wl-input { margin: 0; }
.wl-gift-msg { margin: -4px 0 0; font-size: 13px; color: var(--wl-red); }
.wl-btn--gift { background: var(--wl-pink); color: #fff !important; }
.wl-btn--gift:hover { background: #B80C5B; }
.wl-banner--svc { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.wl-banner--svc .wl-banner-text { max-width: 720px; }
.wl-gift-done { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--wl-green-soft); color: var(--wl-green-deep); font-weight: 600; margin-bottom: 16px; }

/* 5 ---------- boxes & cards (every section is a white box on the grey page) */
.wl-sec { padding-block: 12px; }
.wl-sec > .wl-wrap { max-width: var(--wl-max); margin-inline: auto; padding: 32px; background: var(--wl-surface); border-radius: var(--wl-r-lg); }
.wl-sec > .wl-wrap.wl-narrow { max-width: 900px; }
.wl-sec--tight > .wl-wrap { padding-block: 28px; }
.wl-main > .wl-sec:first-child { padding-top: 24px; }
.wl-main { padding-bottom: 12px; }
.wl-head { margin-bottom: 24px; }
.wl-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.wl-head h2, .wl-h2 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.wl-head p { margin: 6px 0 0; color: var(--wl-muted); font-size: 16px; }
.wl-head p:empty { display: none; }
.wl-more { color: var(--wl-accent); font-weight: 700; white-space: nowrap; }
.wl-h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.wl-h2 { margin-bottom: 14px; }
.wl-lead { margin: 0 0 20px; color: var(--wl-muted); font-size: 17px; line-height: 1.55; max-width: 40em; }

.wl-products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; }
.wl-product { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wl-product-img { position: relative; height: 168px; border-radius: 16px; background: var(--tint, var(--wl-ground)); display: flex; align-items: center; justify-content: center; }
.wl-product-ic { width: 76px; height: 76px; border-radius: 22px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(10, 15, 31, .08); transition: transform .15s; }
.wl-product:hover .wl-product-ic { transform: translateY(-3px); }
.wl-product-bars { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 3px; }
.wl-product-bars i { width: 10px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.wl-product:hover .wl-product-ic { color: var(--wl-accent); }
.wl-badge { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.wl-badge--hit { background: #FFE3EF; color: #C0145F; }
.wl-badge--cheap { background: #DDF5E6; color: var(--wl-green-deep); }
.wl-product-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wl-product-price b { font-size: 22px; font-weight: 800; }
.wl-product-price small { font-size: 13px; color: var(--wl-muted); }
.wl-product-name { font-size: 15px; line-height: 1.35; min-height: 40px; }
.wl-product-meta { font-size: 12px; color: var(--wl-muted); }
.wl-product-btn { margin-top: 2px; min-height: 42px; border-radius: 10px; }

.wl-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wl-num-tile { border-radius: 18px; background: var(--wl-soft); padding: 22px; }
.wl-num-tile b { display: block; font-size: 34px; font-weight: 800; color: var(--wl-accent-deep); letter-spacing: -.02em; }
.wl-num-tile span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; }

.wl-net-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wl-net-tile { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--wl-ground); min-width: 0; transition: background .15s; }
.wl-net-tile:hover { background: var(--wl-soft); }
.wl-net-tile:hover .wl-net-tile-ic { color: var(--wl-accent); }
.wl-net-tile-ic { color: var(--wl-icon); flex: none; width: 48px; height: 48px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; }
.wl-net-tile b { display: block; font-size: 16px; }
.wl-net-tile small { display: block; font-size: 13px; color: var(--wl-muted); }
.wl-net-tile small b { display: inline; font-size: 13px; color: var(--wl-ink); }

.wl-sec > .wl-wrap.wl-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.wl-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 17px; }
.wl-bullets li { display: flex; gap: 12px; align-items: center; }
.wl-tick { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wl-green-soft); color: var(--wl-green-deep); display: inline-flex; align-items: center; justify-content: center; }
.wl-ba { margin: 0; }
.wl-ba-row { display: flex; align-items: center; gap: 16px; }
.wl-ba-card { flex: 1 1 0; min-width: 0; background: #fff; border: 1.5px solid var(--wl-line); border-radius: 20px; padding: 20px; }
.wl-ba-card--on { border: 2px solid var(--wl-accent); }
.wl-ba-label { font-size: 12px; font-weight: 700; color: var(--wl-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.wl-ba-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wl-ba-who > span:first-child { width: 36px; height: 36px; border-radius: 50%; background: #E4F3FB; flex: none; }
.wl-ba-who b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.wl-ba-who small { font-size: 12px; color: var(--wl-muted); }
.wl-ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.wl-ba-grid i { aspect-ratio: 1; border-radius: 8px; background: #E9EBF0; display: flex; align-items: flex-end; padding: 5px; font: 600 12px/1 var(--wl-body); font-style: normal; white-space: nowrap; }
.wl-ba-card--on .wl-ba-grid i { background: var(--wl-soft-2); }
.wl-ba-arrow { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wl-accent); display: flex; align-items: center; justify-content: center; }
.wl-ba figcaption { margin-top: 10px; font-size: 13px; color: var(--wl-muted); text-align: center; }

.wl-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wl-card { background: var(--wl-ground); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wl-card--0, .wl-card--3 { grid-column: span 2; }
.wl-card h3 { margin: 0; font-size: 21px; font-weight: 800; }
.wl-card p { margin: 0; color: var(--wl-muted); line-height: 1.6; }
.wl-badge-ic { width: 64px; height: 64px; border-radius: 18px; background: #fff; color: var(--wl-accent); display: flex; align-items: center; justify-content: center; }
.wl-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wl-subs div { background: #fff; border-radius: 14px; padding: 14px 16px; }
.wl-subs b { display: block; margin-bottom: 4px; }
.wl-subs span { font-size: 14px; color: var(--wl-muted); }
.wl-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: #fff; align-self: flex-start; }
.wl-seg span { padding: 9px 12px; font-size: 13px; color: var(--wl-muted); border-radius: 10px; }
.wl-seg .on { background: var(--wl-accent); color: #fff; font-weight: 600; }
.wl-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.wl-bars i { width: 22px; border-radius: 6px; background: var(--wl-soft-2); }
.wl-bars i:last-of-type { background: var(--wl-accent); }
.wl-bars span { font-size: 13px; color: var(--wl-muted); margin-left: 6px; }
.wl-chat { display: flex; flex-direction: column; gap: 8px; }
.wl-chat span { align-self: flex-start; max-width: 86%; background: #fff; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 14px; }
.wl-chat .me { align-self: flex-end; background: var(--wl-accent); color: #fff; border-radius: 16px 16px 4px 16px; }
.wl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-pills span { padding: 7px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; }
.wl-promise { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wl-promise p { margin: 0; padding: 20px; border-radius: 18px; background: var(--wl-soft); line-height: 1.55; font-size: 15px; }

.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wl-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-steps li { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--wl-ground); }
.wl-steps b { flex: 1 1 calc(100% - 52px); font-size: 16px; margin-top: 7px; }
.wl-steps span:not(.wl-num) { flex: 1 0 100%; color: var(--wl-muted); font-size: 14px; line-height: 1.45; padding-left: 48px; }
.wl-num { width: 36px; height: 36px; border-radius: 12px; background: var(--wl-accent); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 16px/1 var(--wl-body); flex: none; }

.wl-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
.wl-faq details { border-bottom: 1px solid var(--wl-line); }
.wl-faq summary { list-style: none; cursor: pointer; min-height: 54px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary span { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--wl-ground); position: relative; }
.wl-faq summary span::before, .wl-faq summary span::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 2px; background: var(--wl-ink); border-radius: 1px; }
.wl-faq summary span::after { transform: rotate(90deg); transition: transform .15s; }
.wl-faq details[open] summary span::after { transform: rotate(0); }
.wl-faq details p { margin: 0 0 14px; color: var(--wl-muted); line-height: 1.6; font-size: 15px; }

.wl-pays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wl-pay { background: var(--wl-ground); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.wl-pay img { width: 150px; height: 54px; object-fit: contain; }
.wl-pay b { font-size: 16px; }
.wl-pay span { font-size: 14px; color: var(--wl-muted); line-height: 1.45; }

.wl-sec > .wl-wrap.wl-app { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: center; }
.wl-app-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wl-app-col { background: var(--wl-ground); border-radius: 18px; padding: 22px; min-width: 0; }
.wl-app-col > b { display: block; font-size: 18px; font-weight: 800; }
.wl-app-col > small { display: block; font-size: 13px; color: var(--wl-muted); margin: 4px 0 14px; }
.wl-app-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wl-app-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.wl-app-col li span { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--wl-accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.wl-hs { width: 260px; height: 520px; border-radius: 42px; background: #D6E2FF; padding: 9px; justify-self: center; box-shadow: 0 20px 40px rgba(11, 92, 255, .15); }
.wl-hs-screen { height: 100%; border-radius: 34px; background: linear-gradient(170deg, #F4F7FF, #E3ECFF); padding: 46px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 8px; align-content: start; }
.wl-hs-app { width: 46px; height: 46px; border-radius: 13px; background: rgba(11, 92, 255, .10); justify-self: center; position: relative; }
.wl-hs-app--me { background: var(--wl-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(11, 92, 255, .35); }
.wl-hs-app em { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--wl-body); font-style: normal; color: var(--wl-ink); }


/* 6 ---------- footer & tab bar */
.wl-footer { background: var(--wl-surface); padding-block: 48px 32px; margin-top: 12px; font-size: 14px; color: var(--wl-muted); }
.wl-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 32px; }
.wl-footer b { display: block; color: var(--wl-ink); margin-bottom: 10px; font-size: 14px; }
.wl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wl-footer a:hover { color: var(--wl-accent); }
.wl-footer-brand p { margin: 12px 0 0; line-height: 1.6; }
.wl-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--wl-line); font-size: 12px; line-height: 1.7; }
.wl-tabbar { display: none; }

/* 7 ---------- dialogs, forms, simple pages */
.wl-dialog { width: min(440px, calc(100% - 32px)); border: 0; border-radius: var(--wl-r-lg); padding: 28px; box-shadow: 0 30px 80px rgba(10, 15, 31, .25); color: var(--wl-ink); }
.wl-dialog::backdrop { background: rgba(10, 15, 31, .45); }
.wl-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wl-dialog-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.wl-form { display: flex; flex-direction: column; }
.wl-form .wl-btn--lg { margin-top: 8px; }
.wl-forgot { align-self: flex-end; margin: -8px 0 16px; font-size: 14px; color: var(--wl-accent-deep) !important; }
.wl-form-alt { margin: 16px 0 0; text-align: center; color: var(--wl-muted); font-size: 15px; }
.wl-form-alt a { color: var(--wl-accent-deep); font-weight: 700; }
.wl-captcha { margin: 0 0 16px; min-height: 78px; }
.wl-google { display: flex; justify-content: center; margin-top: 14px; }
.wl-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 0 0 16px; }
.wl-check a { color: var(--wl-accent-deep); text-decoration: underline; }
.wl-alert { border-radius: var(--wl-r-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 15px; }
.wl-alert--error { background: var(--wl-red-soft); color: var(--wl-red); }
.wl-alert--ok { background: var(--wl-green-soft); color: var(--wl-green-deep); }
.wl-auth-page { padding: 32px var(--wl-gutter) 48px; display: flex; justify-content: center; }
.wl-auth-card { width: 100%; max-width: 480px; background: #fff; border-radius: var(--wl-r-lg); padding: 32px; box-shadow: var(--wl-shadow); }
.wl-auth-card h1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; }
.wl-auth-sub { margin: 0 0 20px; color: var(--wl-muted); }
/* PerfectPanel system pages (reset password, new password, e-mail confirmation, 2FA): same card as sign-up */
.wl-sys { display: flex; justify-content: center; }
.wl-sys .container, .wl-sys .row, .wl-sys [class*="col-"] { width: 100%; max-width: none; margin: 0; padding: 0; float: none; }
.wl-sys .container { max-width: 480px; }
.wl-sys .well { margin: 0; padding: 32px; border: 0; border-radius: var(--wl-r-lg); background: #fff; box-shadow: var(--wl-shadow); }
.wl-sys-title { margin: 0 0 16px; font-size: 26px; font-weight: 800; line-height: 1.2; text-align: left; }
.wl-sys label, .wl-sys .control-label { font-size: 13px; font-weight: 600; color: var(--wl-muted); }
.wl-sys .form-control { height: 48px; border: 1.5px solid var(--wl-line); border-radius: var(--wl-r-sm); box-shadow: none; font-size: 16px; }
.wl-sys .form-control:focus { border-color: var(--wl-accent); box-shadow: 0 0 0 3px rgba(11, 92, 255, .12); }
.wl-sys .btn-primary { width: 100%; min-height: 52px; border: 0; border-radius: var(--wl-r-sm); background: var(--wl-accent); font-weight: 700; font-size: 16px; }
.wl-sys .btn-primary:hover { background: var(--wl-accent-deep); }
.wl-sys .btn-default, .wl-sys .btn-link { border-radius: var(--wl-r-sm); }
.wl-sys .alert { border: 0; border-radius: 12px; }
.wl-sys .text-center { text-align: left; }
.wl-sys p, .wl-sys .confirm-email__description { color: var(--wl-muted); line-height: 1.55; }
@media (max-width: 640px) { .wl-sys .well { padding: 22px; } }
.wl-prose { line-height: 1.7; }
.wl-prose h1 { font-size: 30px; font-weight: 800; line-height: 1.2; margin: 0 0 8px; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 400px) { .wl-prose h1 { font-size: 24px; } }
.wl-prose h2 { font-size: 20px; font-weight: 800; line-height: 1.3; margin: 28px 0 8px; }
.wl-prose p { margin: 0 0 10px; }
.wl-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.wl-contact { background: var(--wl-ground); border-radius: var(--wl-r); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.wl-contact span { font-size: 18px; font-weight: 700; user-select: all; }
.wl-contact small { color: var(--wl-muted); }

/* 8 ---------- catalog (/services, stock markup) */
.wl-catalog { padding: 12px var(--wl-gutter) 24px; }
.wl-catalog > .container { width: auto; max-width: var(--wl-max); margin: 0 auto; padding: 24px 32px; background: #fff; border-radius: var(--wl-r-lg); }
.wl-catalog .nav-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.wl-catalog .nav-pills > li { float: none; }
.wl-catalog .nav-pills .search { margin-left: auto; }
.wl-catalog .btn-primary, .wl-cabinet .btn-primary { background: var(--wl-accent); border-color: var(--wl-accent); border-radius: var(--wl-r-sm); font-weight: 700; }
.wl-catalog .btn-primary:hover, .wl-cabinet .btn-primary:hover { background: var(--wl-accent-deep); border-color: var(--wl-accent-deep); }
.wl-catalog .form-control, .wl-cabinet .form-control { height: 46px; border-radius: var(--wl-r-sm); border: 1.5px solid var(--wl-line); box-shadow: none; font-size: 16px; }
.wl-catalog .well, .wl-cabinet .well { background: #fff; border: 0; border-radius: var(--wl-r-lg); box-shadow: none; padding: 8px 0; }
.wl-catalog .table > thead > tr > th { border-bottom: 1px solid var(--wl-line); color: var(--wl-muted); font-size: 13px; font-weight: 600; }
.wl-catalog .table > tbody > tr > td { border-top: 1px solid var(--wl-line); padding: 12px 8px; vertical-align: middle; }
.wl-catalog td[colspan] { background: var(--wl-ground); font-weight: 800; font-size: 15px; }
.wl-catalog .well-float { overflow-x: auto; }
.wl-catalog tr.wl-hit td { background: var(--wl-soft); }
.wl-cat-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.wl-cat-select { position: relative; flex: 0 1 280px; min-width: 0; }
.wl-cat-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--wl-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.wl-cat-select select { width: 100%; height: 48px; padding: 0 40px 0 16px; border: 1.5px solid var(--wl-line); border-radius: var(--wl-r-sm); background: var(--wl-ground); color: var(--wl-ink); font: 600 16px/1.2 var(--wl-body); appearance: none; -webkit-appearance: none; cursor: pointer; }
.wl-cat-search { position: relative; flex: 1 1 320px; min-width: 0; margin: 0; }
.wl-cat-search svg { position: absolute; left: 14px; top: 50%; margin-top: -10px; color: var(--wl-muted); pointer-events: none; }
.wl-cat-search input { width: 100%; height: 48px; padding: 0 16px 0 44px; border: 1.5px solid var(--wl-line); border-radius: var(--wl-r-sm); background: #fff; color: var(--wl-ink); font: 400 16px/1.2 var(--wl-body); }
.wl-cat-select select:focus, .wl-cat-search input:focus { outline: none; border-color: var(--wl-accent); box-shadow: 0 0 0 3px rgba(11, 92, 255, .12); }
.wl-cat-empty { margin: 8px 0 16px; padding: 16px; border-radius: var(--wl-r-sm); background: var(--wl-ground); color: var(--wl-muted); }
.wl-cat-empty a { color: var(--wl-accent); font-weight: 600; }
.wl-catalog .table > tbody > tr:not(.wl-cat-row) { cursor: pointer; transition: background-color .12s; }
.wl-catalog .table > tbody > tr:not(.wl-cat-row) > td { transition: background-color .12s; }
.wl-catalog .table > tbody > tr:not(.wl-cat-row):hover > td { background: var(--wl-soft); }
.wl-catalog .table > tbody > tr:not(.wl-cat-row):hover .service-name { color: var(--wl-accent-deep); }
.wl-catalog .table > tbody > tr > td:last-child:not([colspan]) { text-align: right; white-space: nowrap; }
.wl-row-order { display: inline-flex; align-items: center; min-height: 36px; margin-left: 6px; padding: 0 14px; border-radius: 10px; background: var(--wl-soft); color: var(--wl-accent-deep); font-weight: 700; font-size: 14px; }
.wl-row-order::after { content: "→"; margin-left: 6px; }
.wl-catalog .table > tbody > tr:hover .wl-row-order, .wl-row-order:hover { background: var(--wl-accent); color: #fff; text-decoration: none; }
.wl-catalog .btn-default { border-radius: 10px; border-color: var(--wl-line); color: var(--wl-muted); }

/* 9 ---------- cabinet (signed-in pages keep PerfectPanel's stock markup) */
.wl-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.wl-side { background: #fff; border-right: 1px solid var(--wl-line); padding: 20px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.wl-side-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.wl-side .wl-logo-mark { width: 38px; height: 38px; }
.wl-side .wl-logo-word { font-size: 21px; }
.wl-side-close { display: none; }
.wl-side-nav { display: flex; flex-direction: column; gap: 2px; }
.wl-side-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--wl-r-sm); color: var(--wl-muted); font-weight: 500; }
.wl-side-nav a:hover { background: var(--wl-ground); color: var(--wl-ink); }
.wl-side-nav a[aria-current="page"] { background: var(--wl-soft); color: var(--wl-accent-deep); font-weight: 600; }
.wl-side-account { display: none; }
.wl-topbar { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 0 32px; background: #fff; border-bottom: 1px solid var(--wl-line); }
.wl-side-open { display: none; }
.wl-cab-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wl-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; font-weight: 500; }
.wl-topbar-actions > a:not(.wl-balance) { color: var(--wl-muted); }
.wl-topbar-actions > a:not(.wl-balance):hover { color: var(--wl-ink); }
.wl-balance { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 5px 0 14px; border-radius: 12px; background: var(--wl-ground); color: var(--wl-ink) !important;
  font-weight: 800; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-plus { width: 36px; height: 36px; border-radius: 9px; background: var(--wl-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; line-height: 1; }
.wl-balance:hover .wl-plus { background: var(--wl-green-deep); }
.wl-cabinet { padding: 24px 32px; }
.wl-cabinet .container, .wl-cabinet .container-fluid { width: auto; max-width: 1100px; margin: 0; padding: 0; }
.wl-cabinet .row { margin: 0; }
.wl-cabinet [class*="col-"] { padding-left: 0; padding-right: 0; float: none; width: auto; margin-left: 0; }
.wl-cabinet .col-md-8, .wl-cabinet .col-md-offset-2 { max-width: 760px; }
.wl-cabinet .well { padding: 24px; margin-bottom: 20px; overflow-x: auto; }
.wl-cabinet label, .wl-cabinet .control-label { font-size: 13px; font-weight: 600; color: var(--wl-muted); }
.wl-cabinet .btn { min-height: 44px; border-radius: var(--wl-r-sm); }
.wl-cabinet #order-form .btn-primary, .wl-cabinet form .btn-primary[type="submit"] { min-height: 52px; padding: 0 32px; font-size: 16px; }
/* new order: form on the left, «Ваш заказ» on the right */
.wl-order { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; max-width: 1180px; }
.wl-order .well { margin-bottom: 0; overflow: visible; }
.wl-order-sum { position: sticky; top: 24px; padding: 24px; border-radius: var(--wl-r-lg); background: #fff; }
.wl-order-sum h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.wl-sum-svc { margin: 0 0 14px; color: var(--wl-muted); font-size: 15px; line-height: 1.4; }
.wl-sum-rows { margin: 0; }
.wl-sum-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--wl-line); font-size: 15px; }
.wl-sum-rows dt { font-weight: 500; color: var(--wl-muted); }
.wl-sum-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 10px; border-top: 1px solid var(--wl-line); }
.wl-sum-total span { font-weight: 600; }
.wl-sum-total b { font: 800 28px/1.1 var(--wl-body); font-variant-numeric: tabular-nums; }
.wl-sum-bal { margin: 0 0 14px; color: var(--wl-muted); font-size: 14px; }
.wl-sum-bal b { color: var(--wl-green-deep); }
.wl-sum-short { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 10px 10px 10px 14px; border-radius: 14px; background: #FFF4E5; color: #8A4B00; font-size: 14px; font-weight: 600; }
.wl-btn--green { background: var(--wl-green); color: #fff !important; min-height: 40px; padding: 0 16px; }
.wl-btn--green:hover { background: var(--wl-green-deep); }
.wl-sum-go { width: 100%; min-height: 52px; font-size: 16px; }
.wl-sum-trust { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; color: var(--wl-muted); }
.wl-sum-trust li { display: flex; gap: 8px; }
.wl-sum-trust li::before { content: "✓"; color: var(--wl-green); font-weight: 800; }
.wl-sum-trust a { color: var(--wl-accent); }
.wl-order-nets { margin-bottom: 18px; }
.wl-order-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--wl-muted); }
.wl-onets { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-onet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: 1.5px solid transparent; border-radius: 12px; background: var(--wl-ground); color: var(--wl-ink); font: 600 14px/1 var(--wl-body); cursor: pointer; transition: background .12s, border-color .12s; }
.wl-onet svg { flex: none; padding: 5px; box-sizing: content-box; border-radius: 9px; background: var(--tint); }
.wl-onet:hover { background: var(--tint); }
.wl-onet[aria-pressed="true"] { background: #fff; border-color: var(--wl-accent); color: var(--wl-accent-deep); box-shadow: 0 0 0 3px rgba(11, 92, 255, .10); }
.wl-qty-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wl-qty-presets button { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--wl-line); border-radius: 10px; background: #fff; color: var(--wl-ink); font: 600 14px/1 var(--wl-body); cursor: pointer; }
.wl-qty-presets button:hover { border-color: var(--wl-accent); color: var(--wl-accent-deep); }
.wl-qty-presets button[aria-pressed="true"] { background: var(--wl-soft); border-color: var(--wl-accent); color: var(--wl-accent-deep); }
.wl-order #service_description .panel-body { padding: 14px 16px; border: 0; border-radius: 14px; background: var(--wl-ground); color: var(--wl-ink); font-size: 14px; line-height: 1.55; }
.wl-order-text { margin-top: 20px; }
.wl-order [hidden], .wl-cat-empty[hidden], .wl-catalog tr[hidden] { display: none !important; }
@media (min-width: 1101px) { .wl-order .form-group:has(> #charge), .wl-order #order-form > button[type="submit"] { display: none; } }
@media (max-width: 1100px) { .wl-sum-go { display: none; } }
@media (max-width: 1100px) { .wl-order { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .wl-order-sum { position: static; } }
/* add funds */
.wl-pay-card { max-width: 760px; }
.wl-pay-title { margin: 0 0 18px; font-size: 22px; font-weight: 800; }
.wl-sr-group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wl-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 18px; }
.wl-method { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 104px; padding: 14px; border: 1.5px solid var(--wl-line); border-radius: 16px; background: #fff; color: var(--wl-ink); font: 600 15px/1.3 var(--wl-body); text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.wl-method:hover { border-color: #B9CCF5; }
.wl-method[aria-checked="true"] { border-color: var(--wl-accent); background: #F5F8FF; box-shadow: 0 0 0 3px rgba(11, 92, 255, .10); }
.wl-method[aria-checked="true"]::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--wl-accent); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.wl-method-ic { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--wl-soft); color: var(--wl-accent); }
.wl-method-bonus { padding: 4px 8px; border-radius: 8px; background: var(--wl-green-soft); color: var(--wl-green-deep); font-size: 12px; font-weight: 700; }
.wl-amounts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wl-amounts button { min-height: 38px; padding: 0 14px; border: 1.5px solid var(--wl-line); border-radius: 10px; background: #fff; color: var(--wl-ink); font: 600 14px/1 var(--wl-body); cursor: pointer; }
.wl-amounts button:hover { border-color: var(--wl-accent); color: var(--wl-accent-deep); }
.wl-amounts button[aria-pressed="true"] { background: var(--wl-soft); border-color: var(--wl-accent); color: var(--wl-accent-deep); }
.wl-bonus { margin-bottom: 18px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #EAF1FF, #E4F6EB); }
.wl-bonus-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.wl-bonus-head b { display: block; font-size: 16px; }
.wl-bonus-head small { color: var(--wl-muted); font-size: 13px; }
.wl-bonus-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--wl-green); color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.wl-bonus-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.wl-bonus-tiers li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1.5px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, .8); font-size: 13px; color: var(--wl-muted); transition: border-color .12s; }
.wl-bonus-tiers b { font-size: 20px; color: var(--wl-green-deep); }
.wl-bonus-tiers li.is-on { border-color: var(--wl-green); background: #fff; }
.wl-bonus-tiers i { font-style: normal; }
.wl-bonus-note { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--wl-green-soft); color: var(--wl-green-deep); font-size: 14px; }
.wl-bonus-note[hidden], .wl-methods[hidden] { display: none !important; }
.wl-pay-go { width: 100%; }
.wl-pay-trust { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--wl-muted); }
.wl-pay-trust li { display: flex; gap: 8px; }
.wl-pay-trust li::before { content: "✓"; color: var(--wl-green); font-weight: 800; }
.wl-pay-trust a { color: var(--wl-accent); }
.wl-cabinet .terms { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.wl-cabinet .table { background: #fff; }
.wl-cabinet .table > thead > tr > th { border-bottom: 1px solid var(--wl-line); color: var(--wl-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.wl-cabinet .table > tbody > tr > td { border-top: 1px solid var(--wl-line); padding: 12px 8px; overflow-wrap: anywhere; }
.wl-cabinet .table td.nowrap { white-space: nowrap; overflow-wrap: normal; }
.wl-cabinet .table a { color: var(--wl-accent-deep); }
.wl-cabinet .nav-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.wl-cabinet .nav-pills > li { float: none; }
.wl-cabinet .nav-pills > li > a { padding: 9px 14px; background: #fff; border: 1.5px solid var(--wl-line); border-radius: var(--wl-r-sm); color: var(--wl-muted); }
.wl-cabinet .nav-pills > li.active > a { background: var(--wl-accent); border-color: var(--wl-accent); color: #fff; }
.wl-cabinet .nav-pills .search { margin-left: auto; }
.wl-cabinet .pagination > li > a { border-color: var(--wl-line); color: var(--wl-ink); }
.wl-cabinet .pagination > .active > a { background: var(--wl-accent); border-color: var(--wl-accent); }
.wl-cabinet .alert { border-radius: var(--wl-r-sm); }

/* 10 ---------- tablets & phones */
@media (max-width: 1199px) {
  .wl-hero { grid-template-columns: minmax(0, 1fr); }
  .wl-banner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wl-notes { align-items: flex-start; }
  .wl-note:nth-child(n) { margin-left: 0; }
  .wl-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-nums, .wl-net-tiles, .wl-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-sec > .wl-wrap.wl-split, .wl-sec > .wl-wrap.wl-app { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wl-hs { display: none; }
  .wl-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-footer-brand { grid-column: 1 / -1; }
  .wl-tool span { display: none; }
  .wl-tool { min-width: 44px; }
}
@media (max-width: 959px) {
  .wl-header-row { flex-wrap: wrap; gap: 10px; min-height: 0; padding-block: 12px; }
  .wl-header-row::after { content: ""; order: 2; flex-basis: 100%; height: 0; margin-top: -10px; }
  .wl-catalog-btn { order: 3; width: 48px; min-height: 48px; height: 48px; padding: 0; border-radius: 12px; }
  .wl-catalog-btn span { display: none; }
  .wl-search { order: 4; flex: 1 1 0; min-width: 0; height: 48px; }
  .wl-search-btn { display: none; }
  .wl-tools { margin-left: auto; }
  .wl-tools .wl-tool:first-child { display: none; }
  .wl-tool span { display: inline; }
  .wl-tool { flex-direction: row; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--wl-ground); font-size: 14px; font-weight: 600; }
  .wl-bento, .wl-promise, .wl-steps--4, .wl-steps--3, .wl-faq { grid-template-columns: minmax(0, 1fr); }
  .wl-mega { top: 0; z-index: 40; background: #fff; }
  .wl-mega-in { grid-template-columns: minmax(0, 1fr); border-radius: 0; box-shadow: none; max-height: 100%; height: 100%; padding-block: 12px calc(80px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; align-content: start; grid-template-rows: auto auto auto; }
  .wl-mega-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .wl-mega-head b { font-size: 22px; font-weight: 800; }
  .wl-mega-nets { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding-bottom: 12px; min-height: 54px; scrollbar-width: none; }
  .wl-mega-net { flex: none; min-height: 42px; background: var(--wl-ground); border-radius: 999px; }
  .wl-mega-list { overflow: visible; }
  .wl-mega-items { grid-template-columns: minmax(0, 1fr); }
  .wl-card--0, .wl-card--3 { grid-column: auto; }
  .wl-tabbar { display: flex; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; justify-content: space-around; background: #fff; border-top: 1px solid var(--wl-line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 18px rgba(10, 15, 31, .06); }
  .wl-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; min-height: 48px; justify-content: center; font-size: 12px; color: var(--wl-muted); }
  .wl-tabbar a:hover { color: var(--wl-accent); }
  body.wl-guest { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .wl-shell { grid-template-columns: minmax(0, 1fr); }
  .wl-side { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform .2s; }
  .wl-side.is-open { transform: none; box-shadow: 0 0 60px rgba(10, 15, 31, .25); }
  .wl-side-close, .wl-side-open { display: inline-flex; }
  .wl-topbar { padding: 0 16px; gap: 12px; min-height: 64px; }
  .wl-cab-title { font-size: 19px; }
  .wl-topbar-actions > a:not(.wl-balance) { display: none; }
  .wl-balance { height: 40px; font-size: 15px; }
  .wl-plus { width: 30px; height: 30px; font-size: 20px; }
  .wl-side-account { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wl-line); }
  .wl-side-account a { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--wl-r-sm); color: var(--wl-muted); font-weight: 500; }
  .wl-cabinet { padding: 16px; }
  .wl-cabinet .nav-pills .search { margin-left: 0; width: 100%; }
}
@media (max-width: 767px) {
  .wl-strip { font-size: 12px; }
  .wl-strip .wl-wrap span:last-child { display: none; }
  .wl-logo-mark { width: 36px; height: 36px; }
  .wl-logo-mark svg { width: 21px; height: 21px; }
  .wl-logo-word { font-size: 20px; }
  .wl-hero { padding-block: 12px 6px; gap: 12px; }
  .wl-banner { border-radius: 20px; padding: 22px 18px; gap: 18px; }
  .wl-banner-deco { width: 220px; height: 220px; }
  .wl-banner h1 { font-size: 27px; }
  .wl-banner-lead { font-size: 15px; }
  .wl-banner-btns .wl-btn { min-height: 46px; font-size: 15px; padding: 0 18px; }
  .wl-banner-btns .wl-btn--outline, .wl-notes { display: none; }
  .wl-gift { padding: 16px; }
  .wl-gift-head b { font-size: 18px; }
  .wl-banner-text { gap: 12px; }
  .wl-calc { padding: 18px; border-radius: 20px; }
  .wl-total strong { font-size: 28px; }
  .wl-sec { padding-block: 6px; }
  .wl-sec > .wl-wrap { padding: 20px 16px; border-radius: 20px; margin-inline: var(--wl-gutter); max-width: none; }
  .wl-sec > .wl-wrap.wl-narrow { margin-inline: var(--wl-gutter); }
  .wl-main > .wl-sec:first-child { padding-top: 12px; }
  .wl-head { margin-bottom: 16px; }
  .wl-head--row { align-items: baseline; }
  .wl-head h2, .wl-h2 { font-size: 22px; }
  .wl-h1 { font-size: 26px; }
  .wl-head p, .wl-lead { font-size: 15px; }
  .wl-more { font-size: 14px; }
  .wl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .wl-products .wl-product:nth-child(n+7) { display: none; }
  .wl-product-img { height: 124px; }
  .wl-product-ic { width: 60px; height: 60px; border-radius: 18px; }
  .wl-product-ic svg { width: 34px; height: 34px; }
  .wl-product-bars i { width: 8px; }
  .wl-product-price b { font-size: 19px; }
  .wl-product-name { font-size: 14px; min-height: 38px; }
  .wl-nums, .wl-net-tiles, .wl-pays { gap: 8px; }
  .wl-num-tile { padding: 16px; }
  .wl-num-tile b { font-size: 26px; }
  .wl-num-tile span { font-size: 13px; }
  .wl-net-tile { padding: 12px; gap: 10px; }
  .wl-net-tile-ic { width: 40px; height: 40px; }
  .wl-net-tile b { font-size: 14px; }
  .wl-bullets { font-size: 16px; }
  .wl-ba-row { gap: 8px; }
  .wl-ba-card { padding: 14px; }
  .wl-ba-who b { font-size: 18px; }
  .wl-ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-ba-grid i:nth-child(n+5) { display: none; }
  .wl-card { padding: 20px; }
  .wl-card h3 { font-size: 19px; }
  .wl-subs { grid-template-columns: minmax(0, 1fr); }
  .wl-pay { padding: 14px; }
  .wl-pay img { width: 120px; height: 44px; }
  .wl-pay b { font-size: 14px; }
  .wl-pay span { font-size: 13px; }
  .wl-app-cols { grid-template-columns: minmax(0, 1fr); }
  .wl-footer { padding-block: 32px 24px; }
  .wl-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .wl-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-auth-page { padding-block: 16px 32px; }
  .wl-auth-card { padding: 22px; }
  .wl-catalog > .container { padding: 16px; border-radius: 20px; }
  .wl-cat-select, .wl-cat-search { flex: 1 1 100%; }
  .wl-catalog .well-float { overflow: visible; padding: 0; }
  .wl-catalog table[data-wl-catalog], .wl-catalog table[data-wl-catalog] > tbody { display: block; width: 100%; }
  .wl-catalog table[data-wl-catalog] > thead { display: none; }
  .wl-catalog table[data-wl-catalog] > tbody > tr:not(.wl-cat-row) { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-areas: "name name btn" "price price btn" "min max max"; gap: 4px 12px; padding: 12px 8px; border-top: 1px solid var(--wl-line); }
  .wl-catalog table[data-wl-catalog] > tbody > tr > td { display: block; border: 0 !important; padding: 0 !important; background: transparent; }
  .wl-catalog table[data-wl-catalog] > tbody > tr.wl-cat-row { display: block; margin-top: 8px; }
  .wl-catalog table[data-wl-catalog] > tbody > tr.wl-cat-row > td { padding: 12px 8px !important; background: var(--wl-ground); border-radius: 10px; }
  .wl-catalog table[data-wl-catalog] > tbody > tr > td[data-filter-table-service-id] { display: none; }
  .wl-catalog table[data-wl-catalog] .service-name { grid-area: name; font-weight: 600; overflow-wrap: break-word; }
  .wl-catalog .wl-row-order { margin-left: 0; padding: 0 12px; }
  .wl-catalog table[data-wl-catalog] .service-name + td, .wl-catalog table[data-wl-catalog] td[data-wl-min], .wl-catalog table[data-wl-catalog] td[data-wl-min] + td { white-space: nowrap; overflow-wrap: normal; }
  .wl-catalog table[data-wl-catalog] .service-name + td { grid-area: price; font-weight: 800; font-size: 16px; }
  .wl-catalog table[data-wl-catalog] .service-name + td::after { content: " за 1000"; font-weight: 500; font-size: 13px; color: var(--wl-muted); }
  .wl-catalog table[data-wl-catalog] td[data-wl-min] { grid-area: min; font-size: 13px; color: var(--wl-muted); }
  .wl-catalog table[data-wl-catalog] td[data-wl-min]::before { content: "от "; }
  .wl-catalog table[data-wl-catalog] td[data-wl-min] + td { grid-area: max; font-size: 13px; color: var(--wl-muted); }
  .wl-catalog table[data-wl-catalog] td[data-wl-min] + td::before { content: "до "; }
  .wl-catalog table[data-wl-catalog] > tbody > tr > td:last-child:not([colspan]) { grid-area: btn; align-self: center; }
  .wl-catalog table[data-wl-catalog] > tbody > tr > td:empty:not(:last-child) { display: none; }
  .wl-bonus-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-bonus-tiers li { padding: 8px 10px; }
  .wl-bonus-tiers b { font-size: 18px; }
  .wl-order { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wl-order-sum { position: static; padding: 20px; }
  .wl-onets { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 0 4px 4px; scrollbar-width: none; }
  .wl-onet { flex: none; }
  .wl-methods { grid-template-columns: minmax(0, 1fr); }
  .wl-method { flex-direction: row; align-items: center; min-height: 64px; padding-right: 44px; flex-wrap: wrap; }
  .wl-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-qty-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wl-qty-presets button { padding: 0 4px; }
  /* tables become cards: each cell shows its column name (script.js copies it into data-label) */
  .wl-cabinet .well:has(.wl-cards) { padding: 0; background: transparent; border: 0; overflow: visible; }
  .wl-cards, .wl-cards tbody, .wl-cards tr, .wl-cards td { display: block; width: 100%; }
  .wl-cabinet .table.wl-cards { background: transparent; }
  .wl-cards thead { display: none; }
  .wl-cards tr { background: #fff; border-radius: var(--wl-r); padding: 10px 14px; margin-bottom: 10px; }
  .wl-cabinet .wl-cards > tbody > tr > td, .wl-cabinet .wl-cards > tbody > tr > td.nowrap { border: 0; padding: 5px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .wl-cards td::before { content: attr(data-label); color: var(--wl-muted); font-size: 13px; text-align: left; flex: none; }
  .wl-cards td:empty { display: none; }
}
@media (max-width: 360px) {
  .wl-nets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-pays, .wl-nums { grid-template-columns: minmax(0, 1fr); }
  .wl-banner h1 { font-size: 24px; }
  .wl-ba-who > span:first-child { display: none; }
  .wl-ba-who b { font-size: 16px; }
  .wl-ba-card { padding: 12px; }
  .wl-tabbar a { min-width: 48px; font-size: 11px; }
  .wl-logo-word { font-size: 18px; }
}

/* tables in articles/pages: no sideways scroll on phones — each row is a card, each value shows its column name (script.js) */
.wl-prose table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 15px; }
.wl-prose th, .wl-prose td { padding: 10px 12px; border-bottom: 1px solid var(--wl-line); text-align: left; vertical-align: top; }
.wl-prose th { color: var(--wl-muted); font-size: 13px; font-weight: 600; }
@media (max-width: 640px) {
  .wl-prose table.wl-tcards, .wl-prose table.wl-tcards tbody, .wl-prose table.wl-tcards tr, .wl-prose table.wl-tcards td { display: block; width: 100%; }
  .wl-prose table.wl-tcards thead { display: none; }
  .wl-prose table.wl-tcards tr { margin-bottom: 10px; padding: 8px 14px; border: 1px solid var(--wl-line); border-radius: 14px; background: #fff; }
  .wl-prose table.wl-tcards td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--wl-line); overflow-wrap: anywhere; }
  .wl-prose table.wl-tcards td:last-child { border-bottom: 0; }
  .wl-prose table.wl-tcards td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--wl-muted); font-size: 13px; font-weight: 600; }
}

/* shared gift widget (gift.js) in winlike colours */
.wl-gift-widget { --lmg-accent: var(--wl-accent); --lmg-accent-ink: #fff; --lmg-ink: var(--wl-ink); --lmg-muted: var(--wl-muted);
  --lmg-bg: transparent; --lmg-field: #fff; --lmg-line: var(--wl-line); --lmg-radius: 12px; --lmg-font: var(--wl-body); }
.wl-gift-widget[hidden] { display: none; }
.wl-gift:has(.wl-gift-widget[hidden]) { display: none; }
/* gift.js has the same rule as a container query since 8d0350a; this can go once the server serves the new widget */
.wl-gift-widget .lmg__net { flex-direction: column; gap: 4px; min-height: 60px; padding: 8px 4px; font-size: 12px; line-height: 1.1; }
.wl-gift-widget .lmg__net svg { width: 20px; height: 20px; }

/* home banner: headline on top, the gift as a light strip under it */
.wl-banner .wl-gift { margin-top: 8px; max-width: 760px; padding: 20px 22px; box-shadow: none; border-radius: 20px; gap: 10px; }
.wl-banner .wl-gift-head b { font-size: 18px; }
.wl-banner .wl-gift-ic { width: 40px; height: 40px; }
@media (min-width: 900px) {
  .wl-gift-widget .lmg { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .wl-gift-widget .lmg > * { grid-column: 1 / -1; }
  .wl-gift-widget .lmg > .lmg__label { grid-column: 1; margin: 0; }
  .wl-gift-widget .lmg > .lmg__nets { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  .wl-gift-widget .lmg__net { flex-direction: row; min-height: 40px; padding: 0 16px; font-size: 14px; gap: 8px; }
  .wl-gift-widget .lmg form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 16px; }
  .wl-gift-widget .lmg form .lmg__field { margin: 0; }
  .wl-gift-widget .lmg form .lmg__input { height: 52px; }
  .wl-gift-widget .lmg form .lmg__btn { width: auto; min-height: 52px; margin: 0; padding-inline: 22px; font-size: 16px; white-space: nowrap; }
  .wl-gift-widget .lmg form .lmg__note { display: none; }
  .wl-gift-widget .lmg > .lmg__fine { margin: 12px 0 0; text-align: left; }
  .wl-gift-widget .lmg > .lmg__fine::before { content: "Пришлём код на почту, без спама. "; }
}
.wl-gift-widget .lmg { padding: 0; }
.wl-banner .wl-gift { padding: 22px 24px; gap: 16px; }
.wl-banner .wl-gift-head small { font-size: 13px; }

/* cabinet fixes after go-live 29.09: catalog as wide as its title card, orders search on its own row */
.wl-cabinet .wl-sec { padding: 0 0 16px; }
.wl-cabinet .wl-sec > .wl-wrap { max-width: none; padding-inline: 0; }
.wl-cabinet .wl-catalog { padding: 0; }
.wl-cabinet .wl-catalog > .container { max-width: none; }
.wl-cabinet .nav-pills > li.search, .wl-cabinet .nav-pills > li.pull-right.search { float: none; flex: 1 1 100%; max-width: 440px; margin: 4px 0 0; }
.wl-cabinet .nav-pills .search .input-group { display: flex; width: 100%; }
.wl-cabinet .nav-pills .search .form-control { flex: 1 1 auto; height: 46px; border-radius: var(--wl-r-sm) 0 0 var(--wl-r-sm); }
.wl-cabinet .nav-pills .search .input-group-btn { width: auto; }
.wl-cabinet .nav-pills .search .input-group-btn .btn { height: 46px; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--wl-line); border-left: 0; border-radius: 0 var(--wl-r-sm) var(--wl-r-sm) 0; background: #fff; color: var(--wl-muted); }

/* API page */
.wl-api { display: grid; gap: 16px; max-width: 980px; }
.wl-api section { background: #fff; border-radius: var(--wl-r-lg); padding: 24px; }
.wl-api h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.wl-api h3 { margin: 0; font-size: 18px; font-weight: 800; }
.wl-api-head p { margin: 0 0 18px; color: var(--wl-muted); }
.wl-api-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wl-api-facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--wl-ground); }
.wl-api-facts span { font-size: 12px; font-weight: 600; color: var(--wl-muted); }
.wl-api-facts b { font-size: 15px; overflow-wrap: anywhere; }
.wl-api-facts a { color: var(--wl-accent); }
.wl-api-url { grid-column: span 2; }
.wl-api code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
[data-wl-copy] { cursor: copy; }
.wl-api-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.wl-api-action { padding: 4px 10px; border-radius: 8px; background: var(--wl-soft); color: var(--wl-accent-deep); }
.wl-api-type { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--wl-muted); }
.wl-api-type select { max-width: 320px; height: 42px; border-radius: 10px; }
.wl-api-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wl-api-table th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--wl-muted); border-bottom: 1px solid var(--wl-line); }
.wl-api-table td { padding: 9px 10px; border-bottom: 1px solid var(--wl-line); vertical-align: top; overflow-wrap: anywhere; }
.wl-api-table td:first-child { width: 34%; }
.wl-api-example { margin-top: 12px; }
.wl-api-example summary { cursor: pointer; font-weight: 700; color: var(--wl-accent); }
.wl-api-example pre { margin: 10px 0 0; padding: 14px; border: 0; border-radius: 12px; background: #1F2A44; color: #E6ECFA; font-size: 13px; max-height: 360px; overflow: auto; }
.wl-api > .wl-btn { justify-self: start; }
.wl-guest .wl-api { margin: 24px auto; padding-inline: var(--wl-gutter); }
@media (max-width: 760px) { .wl-api-facts { grid-template-columns: minmax(0, 1fr); } .wl-api-url { grid-column: auto; } .wl-api section { padding: 18px; } .wl-api-table td:first-child { width: 40%; } }
.wl-api-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.wl-api-url { grid-column: auto; }
.wl-api code { color: inherit; background: none; padding: 0; }
.wl-api .wl-api-action { padding: 4px 10px; background: var(--wl-soft); color: var(--wl-accent-deep); }
@media (max-width: 1100px) { .wl-api-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .wl-api-facts { grid-template-columns: minmax(0, 1fr); } }

/* «Вопрос по заказу»: headset button next to the order number */
.wl-oid { white-space: nowrap; }
.wl-oid > span { vertical-align: middle; }
.wl-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 10px; vertical-align: middle;
  border: 1.5px solid #D6E2FB; border-radius: 11px; background: #F5F8FF; color: var(--wl-accent); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.wl-help:hover, .wl-help:focus-visible { color: #fff; border-color: var(--wl-accent); background: var(--wl-accent); outline: none; }
.wl-help-tip { position: absolute; left: -4px; top: calc(100% + 8px); transform: none; width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 10px;
  background: var(--wl-ink); color: #fff; font: 500 12px/1.35 var(--wl-body); white-space: normal; text-align: left; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 5; }
.wl-help-tip::after { content: ""; position: absolute; left: 17px; bottom: 100%; margin-left: 0; border: 5px solid transparent; border-bottom-color: var(--wl-ink); }
.wl-help:hover .wl-help-tip, .wl-help:focus-visible .wl-help-tip { opacity: 1; }
@media (hover: none) { .wl-help-tip { display: none; } }

/* orders list as rows (29.09) */
.wl-cabinet .well:has(> .wl-orders), .wl-cabinet .well:has(.wl-orders) { padding: 8px 20px; }
.wl-orders thead { display: none; }
.wl-orders, .wl-orders tbody { display: block; width: 100%; }
.wl-orders tbody tr { display: grid; grid-template-columns: 96px minmax(0, 1.7fr) 150px 130px 170px 110px; gap: 4px 20px; align-items: center; padding: 16px 4px; border-bottom: 1px dashed var(--wl-line); }
.wl-orders tbody tr:last-child { border-bottom: 0; }
.wl-cabinet .wl-orders > tbody > tr > td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: normal; }
.wl-orders td small { display: block; margin-top: 3px; font-size: 13px; color: var(--wl-muted); }
.wl-orders td b { font-weight: 700; }
.wl-o-id { display: flex !important; align-items: center; gap: 8px; }
.wl-o-num { font-weight: 700; color: var(--wl-muted); font-variant-numeric: tabular-nums; }
.wl-orders .wl-help { margin-left: 0; }
.wl-o-svc { display: block; font-size: 15px; }
.wl-o-link { display: block; margin-top: 3px; font-size: 13px; color: var(--wl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-o-link a { color: var(--wl-accent); }
.wl-o-sum b, .wl-o-qty b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-chip-st { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--wl-ground); color: var(--wl-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.wl-chip-st.is-wait { background: #EEF1F6; color: #4A5670; }
.wl-chip-st.is-run { background: var(--wl-soft); color: var(--wl-accent-deep); }
.wl-chip-st.is-done { background: var(--wl-green-soft); color: var(--wl-green-deep); }
.wl-chip-st.is-part { background: #FFF4E5; color: #8A4B00; }
.wl-chip-st.is-cancel { background: var(--wl-red-soft); color: var(--wl-red); }
.wl-orders .order-actions { display: flex; gap: 6px; justify-content: flex-end; }
.wl-orders .order-actions .btn { min-height: 34px; border-radius: 10px; }
@media (max-width: 900px) {
  .wl-orders tbody tr { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .wl-o-id { grid-column: 1 / -1; order: -1; }
  .wl-o-main { grid-column: 1 / -1; }
  .wl-orders .order-actions { justify-content: flex-start; }
}

/* catalog in the cabinet: filter bar and table on the same edge */
.wl-cabinet .wl-catalog .well { padding: 0; }

/* new order: no PP search box, the category select stays hidden behind the network chips */
.wl-order #new-order-search, .wl-order .form-group:has(> #new-order-search) { display: none !important; }
.wl-order .wl-order-nets:not([hidden]) ~ .form-group:has(#orderform-category) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* SEO texts (wave 1): «about» block and links by network */
.wl-about h2 { margin: 0 0 14px; font-size: 26px; line-height: 1.25; }
.wl-about p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--wl-ink); }
.wl-netlinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px 24px; }
.wl-netlinks b { display: block; margin-bottom: 8px; font-size: 16px; }
.wl-netlinks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wl-netlinks a { color: var(--wl-muted); font-size: 15px; }
.wl-netlinks a:hover { color: var(--wl-accent); }
@media (max-width: 640px) { .wl-about h2 { font-size: 21px; } .wl-about p { font-size: 15px; } .wl-netlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* support chat button: above the bottom tab bar on phones */
@media (max-width: 959px) { .sc-btn { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; width: 56px !important; height: 56px !important; } .wl-auth .sc-btn { bottom: 18px !important; } }

/* orders: column titles, cancel as a quiet secondary button */
.wl-orders-head { display: grid; grid-template-columns: 96px minmax(0, 1.7fr) 150px 130px 170px 110px; gap: 4px 20px; padding: 10px 4px; border-bottom: 1px solid var(--wl-line);
  font-size: 12px; font-weight: 600; color: var(--wl-muted); text-transform: uppercase; letter-spacing: .03em; }
.wl-o-link a { color: var(--wl-accent); text-decoration: none; }
.wl-o-link a:hover { text-decoration: underline; }
.wl-orders .order-actions .btn, .wl-orders .order-actions a.btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1.5px solid var(--wl-line); border-radius: 10px;
  background: #fff; color: var(--wl-muted); font: 600 13px/1 var(--wl-body); box-shadow: none; }
.wl-orders .order-actions a[href$="/cancel"]:hover { border-color: #F3B8B2; background: var(--wl-red-soft); color: var(--wl-red); }
.wl-orders .order-actions .btn-primary { border-color: var(--wl-accent); background: var(--wl-soft); color: var(--wl-accent-deep); }
@media (max-width: 900px) { .wl-orders-head { display: none; } .wl-orders tbody tr { grid-template-columns: minmax(0, 1fr) auto; } }

/* PerfectPanel pop-ups (service description, order details…) in winlike style */
.wl .modal-backdrop.in { opacity: .4; background: #0A0F1F; }
.wl .modal-dialog { margin-top: 80px; }
.wl .modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(10, 15, 31, .25); font-family: var(--wl-body); color: var(--wl-ink); overflow: hidden; }
.wl .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; border-bottom: 0; }
.wl .modal-header::before, .wl .modal-header::after { display: none; }
.wl .modal-title, .wl .modal-header h4 { order: 1; margin: 0; font: 800 20px/1.3 var(--wl-body); }
.wl .modal-header .close { order: 2; float: none; width: 36px; height: 36px; margin: 0; border-radius: 10px; background: var(--wl-ground); opacity: 1; color: var(--wl-muted); font-size: 22px; font-weight: 400; text-shadow: none; }
.wl .modal-header .close:hover { background: var(--wl-soft); color: var(--wl-accent); }
.wl .modal-body { padding: 4px 24px 20px; font-size: 15px; line-height: 1.65; color: var(--wl-ink); white-space: normal; }
.wl .modal-body p { margin: 0 0 8px; }
.wl .modal-footer { padding: 0 24px 24px; border-top: 0; text-align: left; }
.wl .modal-footer .btn, .wl .modal-body .btn-primary, .wl .modal .btn-primary { min-height: 50px; width: 100%; border: 0; border-radius: 14px; background: var(--wl-accent); color: #fff; font: 700 16px/1 var(--wl-body); box-shadow: none; }
.wl .modal .btn-primary:hover { background: var(--wl-accent-deep); }
.wl .modal .btn-default { border: 1.5px solid var(--wl-line); border-radius: 14px; background: #fff; color: var(--wl-ink); }
.wl .modal .form-control { border: 1.5px solid var(--wl-line); border-radius: 12px; box-shadow: none; }
.wl-catalog .btn-default[data-description-id] { min-height: 36px; padding: 0 12px; border: 1.5px solid var(--wl-line); border-radius: 10px; background: #fff; color: var(--wl-muted); font: 600 13px/1 var(--wl-body); }
.wl-catalog .btn-default[data-description-id]:hover { border-color: #B9CCF5; color: var(--wl-accent); }
@media (max-width: 640px) { .wl .modal-dialog { margin: 16px; } .wl .modal-header { padding: 18px 18px 10px; } .wl .modal-body { padding: 4px 18px 18px; } .wl .modal-footer { padding: 0 18px 18px; } }

/* brandbook (docs/brand/BRANDBOOK.md) alignment, 29.09 */
.wl-chip-st.is-wait { background: #FFF6DC; color: #8A6500; }
.wl-chip-st.is-run { background: #EDF3FF; color: #3F5FB8; }
.wl-chip-st.is-done { background: #E8F7ED; color: #318355; }
.wl-chip-st.is-part { background: #FFF0E3; color: #A4551A; }
.wl-chip-st.is-cancel { background: #F1F3F7; color: #5B6478; }
.wl-chip-st.is-refund { background: #F3EDFF; color: #6A47B8; }
.wl-o-qty, .wl-o-sum, .wl-orders-head span:nth-child(4), .wl-orders-head span:nth-child(5) { text-align: right; }
.wl-o-qty b, .wl-o-sum b, .wl-o-qty small, .wl-o-sum small { font-variant-numeric: tabular-nums; }
.wl-orders .order-actions a[href$="/cancel"] { border-color: #F0C4BF; color: #B3261E; background: #fff; }
.wl-orders .order-actions a[href$="/cancel"]:hover { background: #FFF0ED; border-color: #E8A39B; color: #B3261E; }
.wl-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 16px; text-align: center; color: var(--wl-muted); }
.wl-empty p { margin: 0; font-size: 15px; }
.wl-prose a, .wl-about a, .wl-faq p a { color: var(--wl-accent); text-decoration: underline; text-decoration-color: #A8BCE8; text-underline-offset: 3px; }
.wl-prose a:hover, .wl-about a:hover, .wl-faq p a:hover { color: var(--wl-accent-deep); text-decoration-color: currentColor; }
.wl-catalog td.wl-rate { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .wl-o-qty, .wl-o-sum { text-align: left; } }

/* catalog: network chips + search, table in a padded card (29.09) */
.wl-cat-nets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wl-cat-nets[hidden], .wl-cat-select[hidden] { display: none !important; }
.wl-cat-net { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--wl-line); border-radius: 999px; background: #fff; color: var(--wl-ink); font: 600 14px/1 var(--wl-body); cursor: pointer; }
.wl-cat-net:hover { border-color: #B9CCF5; }
.wl-cat-net[aria-pressed="true"] { border-color: var(--wl-accent); background: var(--wl-soft); color: var(--wl-accent-deep); }
.wl-cat-bar .wl-cat-search { flex: 1 1 100%; max-width: 520px; }
.wl-cabinet .wl-catalog > .container { padding: 20px 24px 12px; background: #fff; border-radius: var(--wl-r-lg); }
.wl-cabinet .wl-catalog .well { padding: 0; background: transparent; }
@media (max-width: 640px) { .wl-cat-nets { gap: 6px; } .wl-cat-net { min-height: 38px; padding: 0 12px; font-size: 13px; } .wl-cabinet .wl-catalog > .container { padding: 16px; } }

/* lists (orders, subscriptions, drip-feed, refill…) as wide as the catalog */
.wl-cabinet .container-fluid { max-width: none; }
/* PP replaces #new-order-search with a .search-dropdown after load — hide that too */
.wl-order .form-group:has(> .search-dropdown), .wl-order .search-dropdown { display: none !important; }

/* account: API key card on top */
.wl-apikey { border: 1.5px solid #D6E2FB; }
.wl-apikey-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wl-apikey-head b { font-size: 18px; font-weight: 800; }
.wl-apikey-head a { color: var(--wl-accent); font-weight: 600; font-size: 14px; }
.wl-apikey #api_key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: copy; }

/* pending order after top-up */
.wl-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: #E8F7ED; color: #1F5E3A; }
.wl-pending b { flex: 1 1 100%; font-size: 15px; }
.wl-pending span { flex: 1 1 auto; font-size: 14px; }
.wl-pending .wl-btn { min-height: 44px; }