/* ===========================================================
   Попап «Где купить» — общий компонент (эталон: лендинг MK-M6).
   Печатается в wp_footer, вне main лендингов, поэтому токены
   объявлены локально — значения сняты с .mkr-m6 один в один.
   Десктоп — окно по центру, мобила — шторка снизу (media ниже).
   =========================================================== */
.mkr-wtb{
  --ink:#f8faff; --muted-2:rgba(216,222,234,.5);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --grad:linear-gradient(135deg,#2e69f6 0%,#6942fb 48%,#d45cff 100%);
  --grad-dim:linear-gradient(135deg,rgba(46,105,246,.6) 0%,rgba(105,66,251,.6) 48%,rgba(212,92,255,.6) 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:8px; --radius-xl:22px;
  position:fixed;z-index:120;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);background:rgba(3,4,9,.88);backdrop-filter:blur(10px);
  color:var(--ink);
  font-family:"Inter","Akzidenz-Grotesk Pro","Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"ss01","cv05","cv11";-webkit-font-smoothing:antialiased}
.mkr-wtb[hidden]{display:none}
.mkr-wtb *{box-sizing:border-box}
.mkr-wtb :where(a){color:inherit;text-decoration:none}
.mkr-wtb :where(p,h3){margin:0}
.mkr-wtb__box{position:relative;width:min(560px,100%);max-height:min(92vh,760px);overflow:auto;overscroll-behavior:contain;
  padding:22px 26px 20px;border-radius:var(--radius-xl);border:1px solid var(--line-2);
  background:radial-gradient(circle at 50% 0,rgba(105,66,251,.22),transparent 55%),linear-gradient(180deg,#0b0d16,#060710);
  box-shadow:0 40px 100px rgba(0,0,0,.6);animation:mkrWtbIn .32s var(--ease)}
@keyframes mkrWtbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mkr-wtb__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.mkr-wtb__logo{display:block;width:auto;height:15px;opacity:.92}
.mkr-wtb__close{width:36px;height:36px;display:grid;place-items:center;flex:none;
  padding:0;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.mkr-wtb__close svg{width:16px;height:16px;fill:none;stroke:#f8faff;stroke-width:2.2;stroke-linecap:round}
.mkr-wtb__close:hover{background:rgba(255,255,255,.12)}
.mkr-wtb__title{font-size:1.3rem;font-weight:730;letter-spacing:-.02em;color:var(--ink)}
.mkr-wtb__sub{margin-top:5px;font-size:.88rem;color:var(--muted-2)}
.mkr-wtb__list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
/* строка площадки: тот же приём с градиентным кантом, что у CTA лендингов.
   Грид: имя + цена в верхней строке, подпись — во всю ширину под ними,
   иначе на мобиле подпись зажимается в узкую колонку и рвётся на три строки */
.mkr-wtb__item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:2px;
  padding:9px 16px 10px;border:1px solid transparent;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box,var(--mp-dim,var(--grad-dim)) border-box;
  transition:background .3s ease}
.mkr-wtb__item:hover,.mkr-wtb__item:focus-visible{
  background:linear-gradient(180deg,rgba(5,6,8,.82),rgba(5,6,8,.82)) padding-box,var(--mp,var(--grad)) border-box}
/* имя + плашка живут в левой колонке и переносятся, цена — справа и никогда не
   перекрывается (раньше плашка сидела в колонке цены и на мобиле наезжала на неё) */
.mkr-wtb__name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;
  font-size:.95rem;font-weight:700;color:var(--ink)}
.mkr-wtb__badge{font-style:normal;font-size:.7rem;font-weight:760;letter-spacing:.02em;white-space:nowrap;
  padding:3px 8px;border-radius:999px;color:#0a1a05;background:#8fe04a}
.mkr-wtb__note{grid-column:1/-1;font-size:.74rem;font-weight:500;color:var(--muted-2)}
.mkr-wtb__price{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.mkr-wtb__price b{font-size:1rem;font-weight:780;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.mkr-wtb__item--av{--mp:linear-gradient(135deg,#97cf26,#33a852);--mp-dim:linear-gradient(135deg,rgba(151,207,38,.75),rgba(51,168,82,.75))}
.mkr-wtb__item--wb{--mp:linear-gradient(135deg,#cb11ab 0%,#7a1fa2 100%);--mp-dim:linear-gradient(135deg,rgba(203,17,171,.55),rgba(122,31,162,.55))}
.mkr-wtb__item--ym{--mp:linear-gradient(135deg,#ffd23d 0%,#ff9d00 100%);--mp-dim:linear-gradient(135deg,rgba(255,210,61,.5),rgba(255,157,0,.5))}
.mkr-wtb__item--oz{--mp:linear-gradient(135deg,#005bff,#4f8bff);--mp-dim:linear-gradient(135deg,rgba(0,91,255,.55),rgba(79,139,255,.55))}
.mkr-wtb__item--av .mkr-wtb__name{color:#d3f5ae}
/* пояснение к строке зарубежного кабинета (показывается, только когда строка есть) */
.mkr-wtb__why{margin-top:10px;font-size:.8rem;line-height:1.5;color:var(--muted-2)}
.mkr-wtb__why a{font-weight:650;color:var(--ink);border-bottom:1px solid var(--line-2)}
.mkr-wtb__why a:hover{border-bottom-color:#f8faff}
.mkr-wtb__warr{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.86rem;line-height:1.55;color:var(--muted-2)}
.mkr-wtb__glink{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:650;color:var(--ink);white-space:nowrap}
.mkr-wtb__glink svg{width:14px;height:14px;fill:none;stroke:#f8faff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.mkr-wtb__glink:hover svg{transform:translate(2px,-2px)}
@media(max-width:640px){
  .mkr-wtb{align-items:flex-end;padding:0}
  .mkr-wtb__box{width:100%;max-height:88dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-bottom:0;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));animation-name:mkrWtbUp}
  @keyframes mkrWtbUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}