/* Конструктор макета 5 г (блок «Макет», макеты Е), вторая редакция 06.10.2026.
   Порядок панели — порядок действий человека: 1 логотип → 2 фон (лента по кругу) → 3 оборот → шаг 4 в карточке справа.
   Переменные страницы (--txt, --noch, --mute, --liniya, --ser, --latun, --petrol) с запасными значениями. */
#primKadr{aspect-ratio:1600/984!important;background:#F5F6F6!important;border-radius:6px}
.mk-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.prim-kadr .phl,.prim-kadr .et,.prim-kadr .et-ramka,.prim-kadr .mk-foto{display:none!important}
.kn-pusto{position:absolute;left:50%;bottom:3%;white-space:nowrap;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);
 padding:9px 16px;border-radius:999px;background:rgba(15,61,71,.92);color:#fff;font:500 14px/1.25 var(--txt,"Onest",sans-serif);cursor:pointer;
 box-shadow:0 8px 20px -10px rgba(7,31,37,.5);transition:background-color .2s,transform .16s cubic-bezier(.23,1,.32,1)}
.kn-pusto i{font-size:18px;flex:none;color:var(--latun,#D9A441)}
.kn-pusto:hover{background:var(--petrol,#0F3D47)} .kn-pusto:active{transform:translateX(-50%) scale(.98)}
.prim-kadr.est-logo .kn-pusto{display:none}

.kn-upr{display:block!important;margin-top:8px}
.kn-shag{padding:18px 0;border-top:1px solid var(--liniya,#D3E0E4)}
.kn-shag:first-child{border-top:0}
.kn-sh-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 16px/1.2 var(--txt,"Onest",sans-serif);color:var(--noch,#12262B)}
.kn-sh-h b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--latun,#D9A441);color:#071F25;font:700 13px/1 var(--txt,"Onest",sans-serif)}

.kn-zagr-row{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.kn-zagr{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:8px;background:var(--petrol,#0F3D47);color:#fff;
 font:600 15px/1 var(--txt,"Onest",sans-serif);cursor:pointer;position:relative;transition:background-color .2s,transform .16s cubic-bezier(.23,1,.32,1)}
.kn-zagr i{font-size:20px}
.kn-zagr:hover{background:var(--petrol-s,#1A6A79)} .kn-zagr:active{transform:scale(.98)}
.kn-zagr:focus-within{outline:3px solid var(--latun,#D9A441);outline-offset:3px}
.kn-zagr input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kn-z2{display:none} .prim.est-logo .kn-z1{display:none} .prim.est-logo .kn-z2{display:inline}
.prim.est-logo .kn-zagr{background:#fff;color:var(--petrol,#0F3D47);box-shadow:inset 0 0 0 1px var(--petrol,#0F3D47)}
.prim.est-logo .kn-zagr:hover{background:var(--ser,#F2F7F8)}
.kn-hint{margin:0;font:400 13.5px/1.45 var(--txt,"Onest",sans-serif);color:var(--mute,#5B6B70);max-width:32em}
.kn-msg{margin:12px 0 0;padding:10px 14px;border-radius:8px;background:#FBEFEA;color:#8A2F17;font:500 13.5px/1.45 var(--txt,"Onest",sans-serif)}
.kn-logo-ctl{display:none;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px}
.prim.est-logo .kn-logo-ctl{display:flex}
.kn-upr .razm{display:inline-flex;gap:6px}
.kn-upr .razm button{width:44px;height:40px;border:1px solid var(--liniya,#D3E0E4);border-radius:8px;background:#fff;font-size:18px;line-height:1;cursor:pointer;color:var(--noch,#12262B)}
.kn-upr .razm button:hover{border-color:var(--petrol,#0F3D47)}
.kn-rezh{display:none;padding:3px;border-radius:10px;background:var(--ser,#F2F7F8);box-shadow:inset 0 0 0 1px var(--liniya,#D3E0E4)}
.prim.logo-neprozr .kn-rezh{display:inline-flex}
.kn-rezh button,.kn-ob-t button{min-height:36px;padding:0 14px;border:0;border-radius:8px;background:transparent;font:500 14px/1 var(--txt,"Onest",sans-serif);color:var(--noch,#12262B);cursor:pointer;white-space:nowrap}
.kn-rezh button[aria-pressed=true],.kn-ob-t button[aria-selected=true]{background:#fff;box-shadow:0 1px 2px rgba(18,38,43,.12),0 0 0 1px rgba(18,38,43,.08)}

/* фоны: ярлыки групп и лента по кругу */
.kn-gr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding:2px}
.kn-gr::-webkit-scrollbar{display:none}
.kn-gr button{flex:none;min-height:32px;padding:0 12px;border:1px solid var(--liniya,#D3E0E4);border-radius:999px;background:#fff;font:500 13.5px/1 var(--txt,"Onest",sans-serif);color:var(--mute,#5B6B70);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.kn-gr button:hover{border-color:var(--petrol,#0F3D47);color:var(--noch,#12262B)}
.kn-gr button[aria-pressed=true]{background:var(--petrol,#0F3D47);border-color:var(--petrol,#0F3D47);color:#fff}
.kn-lenta-w{display:flex;align-items:center;gap:8px;min-width:0}
.kn-lenta{position:relative;flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:56px;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
 padding:5px 4px;scroll-padding-left:4px;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.kn-lenta::-webkit-scrollbar{display:none}
.kn-lenta .fn{width:56px;height:56px;border-radius:10px;border:0;padding:0;cursor:pointer;scroll-snap-align:start;box-shadow:inset 0 0 0 1px rgba(18,38,43,.14);transition:transform .16s cubic-bezier(.23,1,.32,1)}
.kn-lenta .fn:active{transform:scale(.95)}
.kn-lenta .fn[aria-pressed=true]{box-shadow:inset 0 0 0 1px rgba(18,38,43,.14),0 0 0 2px #fff,0 0 0 4px var(--petrol,#0F3D47)}
.kn-str{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--liniya,#D3E0E4);background:#fff;color:var(--noch,#12262B);font-size:16px;cursor:pointer;display:grid;place-items:center}
.kn-str:hover{border-color:var(--petrol,#0F3D47)}
@media(hover:none),(max-width:767px){.kn-str{display:none}}
@media(hover:hover){.kn-lenta .fn:hover{transform:translateY(-2px)}}

/* оборот */
.kn-ob-t{display:inline-flex;padding:3px;border-radius:10px;background:var(--ser,#F2F7F8);box-shadow:inset 0 0 0 1px var(--liniya,#D3E0E4);margin-bottom:14px;max-width:100%}
.kn-pozh{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.kn-pozh button{min-height:36px;padding:6px 14px;border:1px solid var(--liniya,#D3E0E4);border-radius:999px;background:#fff;font:500 14px/1.3 var(--txt,"Onest",sans-serif);color:var(--noch,#12262B);cursor:pointer;text-align:left}
.kn-pozh button:hover{border-color:var(--petrol,#0F3D47)}
.kn-pozh button[aria-pressed=true]{background:var(--petrol,#0F3D47);border-color:var(--petrol,#0F3D47);color:#fff}
.kn-f{display:grid;gap:6px;min-width:0}
.kn-f>span{font:500 13px/1.3 var(--txt,"Onest",sans-serif);color:var(--mute,#5B6B70)}
.kn-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kn-3.kn-2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin-bottom:10px}
.kn-txt{width:100%;max-width:440px;min-height:44px;padding:0 14px;border:1px solid var(--liniya,#D3E0E4);border-radius:8px;background:#fff;box-sizing:border-box;
 font:400 16px/1.3 var(--txt,"Onest",sans-serif);color:var(--noch,#12262B)}
.kn-3 .kn-txt{max-width:none}
.kn-txt::placeholder{color:#8A9599} .kn-txt:hover{border-color:#B7C6CB}
.kn-upr .prim-podp{margin:0;padding-top:14px;border-top:1px solid var(--liniya,#D3E0E4);font-size:13.5px;color:var(--mute,#5B6B70)}
.kn-upr button:focus-visible,.kn-txt:focus-visible,.kn-pusto:focus-visible{outline:3px solid var(--latun,#D9A441);outline-offset:3px}

/* карточка справа: шаги и форма */
.kn-shagi{list-style:none;counter-reset:kn;margin:18px 0 6px;padding:0;display:grid;gap:12px}
.kn-shagi li{counter-increment:kn;position:relative;padding-left:38px;font:400 15.5px/1.5 var(--txt,"Onest",sans-serif);color:var(--ink,#2E3B41)}
.kn-shagi li:before{content:counter(kn);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
 background:var(--ser,#F2F7F8);box-shadow:inset 0 0 0 1px var(--latun,#D9A441);color:var(--noch,#12262B);font:700 13px/1 var(--txt,"Onest",sans-serif)}
.kn-shagi b{font-weight:600;color:var(--noch,#12262B)}
.kartochka button.btn{border:0;cursor:pointer;width:100%;font-family:inherit}
.kn-err{margin:6px 0 0;font:500 13px/1.4 var(--txt,"Onest",sans-serif);color:#B3261E}
.kartochka .kn-final .soglasie{color:var(--mute,#5B6B70)}
.kn-gotovo{margin-top:6px;padding:18px 18px 16px;border-radius:12px;background:var(--ser,#F2F7F8);box-shadow:inset 0 0 0 1px var(--liniya,#D3E0E4)}
.kn-gotovo i{font-size:28px;color:var(--akva-t,#0E7C77)}
.kn-gotovo b{display:block;margin:6px 0 4px;font:700 18px/1.3 var(--zag,"Manrope",sans-serif);color:var(--noch,#12262B)}
.kn-gotovo p{margin:0;font-size:15px;line-height:1.5}
.kn-gotovo:focus{outline:none}

@media(max-width:767px){
 .kn-zagr{width:100%;justify-content:center}
 .kn-3,.kn-3.kn-2{grid-template-columns:1fr}
 .kn-ob-t{display:flex} .kn-ob-t button{flex:1;padding:0 8px}
 .kn-pusto{font-size:13px;padding:8px 14px}
 .kn-shagi li{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.kn-zagr,.kn-lenta .fn,.kn-pusto,.kn-gr button{transition:none}}

/* Телефон: mob-app.css прячет кадры без img, mob-lishnee.css — панель и форму этого блока. Возвращаем превью; кнопки-заменители .ml-kn прячем. */
html body.v-e .sek[data-r="Макет"] .kadr:has(#primKadr){display:block!important}
html body.v-e [data-r="Макет"] .ml-kn{display:none!important}
html body.v-e [data-r="Макет"] .kartochka .fajl.on{display:flex!important}
.kn-bar,.kn-sh4{display:none!important}
@media(min-width:768px){
 html body.v-e [data-r="Макет"] .prim-upr.kn-upr,html body.v-e [data-r="Макет"] .kn-upr .prim-podp{display:block!important}
 html body.v-e [data-r="Макет"] .kartochka .kn-final .pole{display:block!important}
}
/* Телефон, до 767 px, главные: блок — короткий вход на один экран, конструктор на отдельной странице (Евгения, 06.10.2026) */
.kn-mob{display:none}
@media(max-width:767px){
 html body [data-r="Макет"]:not(.kn-str) .kn-upr,html body [data-r="Макет"]:not(.kn-str) .kn-final,
 html body [data-r="Макет"]:not(.kn-str) .kartochka>.cherta,html body [data-r="Макет"]:not(.kn-str) .kartochka>.of-cif,
 html body [data-r="Макет"]:not(.kn-str) .kartochka>h2,html body [data-r="Макет"]:not(.kn-str) .kn-shagi,
 html body [data-r="Макет"]:not(.kn-str) .kartochka .fajl,html body [data-r="Макет"]:not(.kn-str) .kn-pusto,
 html body [data-r="Макет"]:not(.kn-str) .kn-gotovo{display:none!important}
 html body [data-r="Макет"]:not(.kn-str) .kn-mob{display:block}
 html body [data-r="Макет"]:not(.kn-str) .offer.prim-of .kartochka{margin-top:14px!important;padding:22px 20px!important}
 html body [data-r="Макет"]:not(.kn-str) #primKadr{position:relative!important;top:auto;box-shadow:none}
 .kn-mob h2{margin:0 0 10px;font-size:26px;line-height:1.2}
 .kn-mob p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink,#2E3B41)}
 .kn-mob .btn{margin-top:18px!important;width:100%;justify-content:center}
}
.kn-bol{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 14.5px/1.3 var(--txt,"Onest",sans-serif);color:var(--petrol,#0F3D47)}
.kn-bol:hover{color:var(--petrol-s,#1A6A79)}
/* Превью держим на виду, пока человек меняет фон и оборот: на телефоне шоколадки прилипают к верху экрана,
   на десктопе карточка с кнопкой «Получить макет» едет рядом с панелью */
html body.v-e [data-r="Макет"] .offer>.kadr,html body.v-e [data-r="Макет"] .offer .kadr{overflow:visible!important}
@media(min-width:768px) and (max-width:1180px){
 [data-r="Макет"] #primKadr{position:sticky!important;top:8px;z-index:5;box-shadow:0 10px 24px -14px rgba(7,31,37,.35)}
}
@media(min-width:1181px){
 [data-r="Макет"] .offer.prim-of .kartochka{position:sticky;top:96px;align-self:start}
}

/* «В цвет логотипа» и «Свой цвет» в ленте фонов */
.kn-lenta .fn{position:relative;display:grid;place-items:center;font-size:22px;color:#fff}
.kn-lenta .fn-logo{background:var(--lg,#fff);color:var(--noch,#12262B);box-shadow:inset 0 0 0 1px rgba(18,38,43,.22)}
.kn-lenta .fn-logo[aria-disabled=true]{background:#fff;color:#8A9599;box-shadow:inset 0 0 0 1px rgba(18,38,43,.18);cursor:not-allowed;background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(18,38,43,.06) 6px 7px)}
.kn-lenta .fn-logo:not([aria-disabled]):not(.svetl){color:#fff}
.kn-lenta .fn-svoy{background:conic-gradient(from 200deg,#0F3D47,#1F4D3A,#D9A441,#6B1E2E,#1B2A4A,#0F3D47)}
.kn-lenta .fn-svoy.vybran{background:var(--sv)}
.kn-lenta .fn-svoy i{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.kn-lenta .fn-svoy input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}

/* шрифт оборота */
.kn-shrift-w{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:0 0 14px}
.kn-shrift-w[hidden]{display:none}
.kn-f-m{font:500 13px/1.3 var(--txt,"Onest",sans-serif);color:var(--mute,#5B6B70)}
.kn-shrift{display:flex;gap:6px;flex-wrap:wrap}
.kn-shrift button{min-height:40px;padding:0 14px;border:1px solid var(--liniya,#D3E0E4);border-radius:8px;background:#fff;font-size:20px;line-height:1;color:var(--noch,#12262B);cursor:pointer}
.kn-shrift button:hover{border-color:var(--petrol,#0F3D47)}
.kn-shrift button[aria-pressed=true]{border-color:var(--petrol,#0F3D47);box-shadow:inset 0 0 0 1px var(--petrol,#0F3D47);background:var(--ser,#F2F7F8)}
@media(max-width:767px){.kn-shrift{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}.kn-shrift::-webkit-scrollbar{display:none}.kn-shrift button{flex:none}}

/* форма справа всегда открыта; ритм полей как у остальных форм: 22 px между полями */
html body [data-r="Макет"] .kn-final .pole{margin:22px 0 0!important}
html body [data-r="Макет"] .kn-final .kuda{margin:22px 0 0!important}
html body [data-r="Макет"] .kn-final .pole-msg{margin:6px 0 0}
html body [data-r="Макет"] .kn-final .btn{margin-top:26px}

/* телефон: загрузка логотипа уже есть на превью и в нижней кнопке, третью не показываем (06.10) */
@media(max-width:767px){.kn-zagr-row .kn-zagr{display:none}.kn-zagr-row{padding-top:0}}
/* ---------- второй заход 07.10.2026: перетаскивание, надпись, готовая этикетка, варианты, тираж, скачивание ---------- */
.kn-tstr{display:none!important}
html body .kn-str .kn-tstr:not([hidden]){display:block!important}
html body .kn-str .kn-skach.kn-tstr:not([hidden]){display:inline-flex!important}
.prim-kadr.est-logo #mkCanvas{cursor:grab;touch-action:none}
.prim-kadr.est-logo.tyanut #mkCanvas{cursor:grabbing}
.prim.est-gotova .prim-kadr #mkCanvas{cursor:default;touch-action:auto}
.prim.est-gotova .kn-logo-ctl,.prim.est-gotova .kn-nadp{display:none!important}
.kn-upr .razm button i{font-size:19px;vertical-align:middle}
.kn-upr .razm .kn-sbros{width:auto;padding:0 14px;font:500 14px/1 var(--txt,"Onest",sans-serif)}
.kn-dvig{flex-basis:100%}
.kn-nadp{margin-top:14px}
.kn-got{margin-top:14px}
.kn-got-z{display:inline-flex;align-items:center;gap:8px;min-height:40px;font:500 14.5px/1.3 var(--txt,"Onest",sans-serif);color:var(--petrol,#0F3D47);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kn-got-z i{font-size:20px}
.kn-got-z:hover{color:var(--petrol-s,#1A6A79)}
.kn-got-u{min-height:36px;margin:4px 0 6px;padding:0 14px;border:1px solid var(--liniya,#D3E0E4);border-radius:8px;background:#fff;font:500 14px/1 var(--txt,"Onest",sans-serif);color:var(--noch,#12262B);cursor:pointer}
.kn-var{margin-bottom:14px}
.kn-var .kn-f-m{margin:0 0 8px}
.kn-var-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:420px}
.kn-var-r button{display:grid;gap:6px;padding:6px;border:1px solid var(--liniya,#D3E0E4);border-radius:10px;background:#fff;cursor:pointer;text-align:center;font:500 12.5px/1.25 var(--txt,"Onest",sans-serif);color:var(--mute,#5B6B70)}
.kn-var-r button:hover{border-color:var(--petrol,#0F3D47)}
.kn-var-r button[aria-pressed=true]{border-color:var(--petrol,#0F3D47);box-shadow:inset 0 0 0 1px var(--petrol,#0F3D47);color:var(--noch,#12262B)}
.kn-var-r canvas{width:100%;height:auto;border-radius:6px;display:block}
.kn-tir-r{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.kn-tir-r .kn-f{width:180px}
.kn-tir-ch{display:flex;flex-wrap:wrap;gap:8px}
.kn-tir-ch button{min-height:44px;padding:0 16px;border:1px solid var(--liniya,#D3E0E4);border-radius:999px;background:#fff;font:500 14px/1 var(--txt,"Onest",sans-serif);color:var(--noch,#12262B);cursor:pointer}
.kn-tir-ch button:hover{border-color:var(--petrol,#0F3D47)}
.kn-tir-ch button[aria-pressed=true]{background:var(--petrol,#0F3D47);border-color:var(--petrol,#0F3D47);color:#fff}
.kn-cena{margin:14px 0 4px;font:400 16px/1.4 var(--txt,"Onest",sans-serif);color:var(--noch,#12262B)}
.kn-cena b{font-size:22px;font-weight:700;color:var(--petrol,#0F3D47)}
.kn-skach{align-items:center;gap:8px;min-height:44px;margin:4px 0 16px;padding:0 18px;border:1px solid var(--petrol,#0F3D47);border-radius:8px;background:#fff;font:600 14.5px/1 var(--txt,"Onest",sans-serif);color:var(--petrol,#0F3D47);cursor:pointer}
.kn-skach i{font-size:19px}
.kn-skach:hover{background:var(--ser,#F2F7F8)}
@media(max-width:767px){.kn-tir-r .kn-f{width:100%}.kn-tir-ch{width:100%}.kn-tir-ch button{flex:1 1 0;padding:0 8px}.kn-skach{width:100%;justify-content:center}}

/* 21.10: скачивание макета закрыто */
#primSkach{display:none!important}
#primKadr,#primKadr canvas,#primKadr img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}