/* =========================================================
   МАГНИТЫ (magnity.php, v88). Подключается вместе с vizitki.css (общие блоки конструктора vz-*).
   JS: assets/magnity.js.
   ========================================================= */

/* ---------- герой: три магнита на разной глубине параллакса ---------- */
.mg-visual{aspect-ratio:1/0.86;}
.mg-visual .vz-l-a{left:-8%;top:-6%;width:94%;}
.mg-visual .vz-l-b{right:-10%;top:18%;width:68%;z-index:3;}
.mg-visual .vz-l-c{left:2%;bottom:-8%;width:62%;z-index:4;}
.mg-visual .svc-shape-sq{left:auto;right:6%;top:0;width:44%;}
.mg-visual .svc-shape-bar{left:-2%;bottom:34%;width:60%;--rot:-12deg;}
.mg-visual .svc-shape-circle{right:auto;left:46%;top:auto;bottom:6%;width:10%;}
.mg-visual .svc-sticker{right:2%;bottom:2%;z-index:5;}
@media (max-width:860px){ .mg-visual{aspect-ratio:1/0.9;} }
@media (prefers-reduced-motion:reduce){ .mg-visual .svc-shape-bar{transform:rotate(-12deg)!important;} }

/* ---------- предпросмотр ---------- */
.mg-stage canvas{width:auto;max-width:100%;cursor:default;touch-action:pan-y;}
.mg-stage.has-photo canvas{cursor:grab;touch-action:none;}
.mg-stage canvas.is-drag{cursor:grabbing;}
.mg-stage.is-acrylic canvas{filter:drop-shadow(0 4px 0 rgba(160,172,184,.9)) drop-shadow(0 14px 14px rgba(13,13,12,.28));}
.mg-hintline{margin:0;font-size:12.5px;color:var(--grey);text-align:center;}

/* ---------- блоки редактора ---------- */
.mg-sizes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;background:var(--black);border:2px solid var(--black);}
.mg-blanks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--black);border:2px solid var(--black);}
.mg-sizes .vz-choice small,.mg-blanks .vz-choice small{font-size:12px;}
.mg-shape{display:block;margin:0 auto 6px;width:34px;height:34px;}
.mg-blanks .vz-choice > span{text-align:center;}
.mg-custom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin-top:12px;padding:12px;background:var(--paper);border:2px solid var(--line);}
.mg-custom[hidden]{display:none;}
.mg-custom.is-bad{border-color:var(--black);background:#fff7cf;}
.mg-custom .vz-note{grid-column:1 / -1;margin:0;}

.mg-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px;}
.mg-row[hidden]{display:none;}
.mg-range{display:flex;align-items:center;gap:10px;flex:1 1 240px;min-width:0;}
.mg-range input[type=range]{flex:1;min-width:0;accent-color:var(--black);}
.mg-zbtn{width:34px;height:34px;border:2px solid var(--black);background:#fff;font:700 18px var(--font-body);line-height:1;cursor:pointer;}
.mg-zbtn:hover{background:var(--yellow);}
.mg-select{width:100%;padding:10px 12px;border:2px solid var(--black);background:#fff;font:600 15px var(--font-body);color:var(--ink);border-radius:var(--radius);}
.mg-tpos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--black);border:2px solid var(--black);}
.mg-tpos .vz-choice > span{padding:9px 8px;text-align:center;}
.mg-tpos .vz-choice b{font-size:12.5px;}
.mg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}

/* ---------- количество ---------- */
.mg-qtybox{display:flex;align-items:stretch;border:2px solid var(--black);width:max-content;max-width:100%;}
.mg-qtybox button{width:46px;border:0;background:#fff;font:900 22px var(--font-display);cursor:pointer;}
.mg-qtybox button:hover{background:var(--yellow);}
.mg-qtybox input{width:92px;border:0;border-left:2px solid var(--black);border-right:2px solid var(--black);text-align:center;font:900 22px var(--font-display);padding:10px 4px;background:#fff;color:var(--ink);-moz-appearance:textfield;}
.mg-qtybox input::-webkit-outer-spin-button,.mg-qtybox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.mg-chip{padding:7px 12px;border:2px solid var(--black);background:#fff;font:700 13px var(--font-body);cursor:pointer;}
.mg-chip:hover{background:var(--paper);}
.mg-chip.is-on{background:var(--yellow);}
.mg-tiernote{margin:12px 0 0;padding:9px 12px;background:var(--paper);border:2px solid var(--line);font-size:13.5px;}

/* ---------- таблица скидок ---------- */
.mg-tiers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;background:var(--black);border:2px solid var(--black);max-width:760px;}
.mg-tier{background:#fff;padding:12px 8px;text-align:center;}
.mg-tier b{display:block;font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1;}
.mg-tier span{display:block;margin-top:5px;font-size:12.5px;color:var(--grey);}
@media (max-width:700px){
  .mg-tiers{grid-template-columns:repeat(3,minmax(0,1fr));}
  .mg-sizes,.mg-blanks{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:420px){ .mg-tpos .vz-choice b{font-size:11.5px;} .mg-two{grid-template-columns:1fr;} }

/* ---------- сравнение видов: иконки ---------- */
.mg-pic{display:block;width:100%;height:auto;max-height:120px;object-fit:contain;}

/* последний вариант «Свой размер» на всю строку, без чёрных пустых клеток */
.mg-sizes .vz-choice:last-child{grid-column:1 / -1;}
/* на высоких экранах предпросмотр и итог остаются на виду, пока крутите форму */
@media (min-width:861px) and (min-height:880px){
  .mg-left{position:sticky;top:70px;}
}

/* в украшениях героя вместо чёрного круга чёрный квадратик: на странице только прямоугольные магниты, пусть ничто не похоже на круглый */
.mg-visual .svc-shape-circle{border-radius:0;}

/* v89: 10 готовых размеров винила и 4 заготовки акрила; на узких местах по две колонки (10 и 4 делятся на 2 без пустых клеток) */
.mg-sizes .vz-choice > span,.mg-blanks .vz-choice > span{padding:10px 8px 11px;}
.mg-sizes .vz-choice b{font-size:13.5px;}
.mg-orient-ic{display:block;width:30px;height:30px;margin:0 0 5px;}
@media (min-width:861px) and (max-width:1179px){
  .mg-sizes,.mg-blanks{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .mg-sizes,.mg-blanks{grid-template-columns:repeat(2,minmax(0,1fr));}
}