/* ==========================================================
   3D фигурка по вашему фото — базовые стили, цвета, состояния
   Геометрия (координаты, размеры, отступы) — в layout.css
   ========================================================== */

@font-face{
  font-family:"Unbounded";
  src:url("../fonts/Unbounded.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --violet:#876DFF;
  --gray:#CED8DA;
  --ink:#000;
  --card-top:#D7E1FF;
  --ozon:#005BFF;
  --hair:inset 0 0 0 .5px var(--violet);   /* тонкая обводка 0.5px как в макете */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0;background:#fff}
html{overflow-x:hidden}
body{overflow-x:clip}
body{
  font-family:"Unbounded",system-ui,sans-serif;
  font-weight:300;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-kerning:normal;
  overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* переключатели десктоп / мобайл */
.only-m{display:none!important}
@media (max-width:767px){
  .only-d{display:none!important}
  .only-m{display:revert!important}
  br.only-m,span.only-m{display:inline!important}
  img.only-m{display:block!important}
}

/* ---------- страница ---------- */
.page{position:relative;margin:0 auto;overflow-x:visible;overflow-y:clip;background:#fff;transform-origin:0 0}
.page > *{position:absolute}
:where(.page h1,.page h2,.page h3,.page h4,.page p){margin:0;font-weight:inherit;font-size:inherit}

/* ---------- баннеры ---------- */
.hero{overflow:hidden;background:linear-gradient(180deg,#876DFF 0%,#FF0000 100%)}
.hero > *{position:absolute}
.hero__hand{max-width:none}
/* баннеры «от края до края»: фон тянется на всю ширину окна (--bleed задаёт JS), содержимое — как в макете */
.hero--bleed{overflow-x:visible;overflow-y:clip;background:none;isolation:isolate}
.hero--bleed::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * var(--bleed,0px));right:calc(-1 * var(--bleed,0px));border-radius:inherit;background:linear-gradient(180deg,#876DFF 0%,#FF0000 100%)}
.hero__title,.hero__sub{margin:0;color:#fff;white-space:nowrap;text-transform:uppercase}
.hero__title span,.hero__sub span{display:inline}
.hero__price{margin:0;color:#fff;white-space:nowrap;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.135em}
.hero__tag{background:#F7CE45;color:#000;text-transform:uppercase}
.hero__tag > span{position:absolute;white-space:nowrap}
.pcard{position:absolute;overflow:hidden;border-radius:14px;background:#fff}
.pcard img{width:100%;height:100%;object-fit:cover}
.pcard::after{content:"";position:absolute;inset:0;border:3px solid #fff;border-radius:inherit}
.hero-btn{display:block;text-decoration:none;color:#000;cursor:pointer}
.hero-btn > *{position:absolute}
.hero-btn__box{background:#fff}
.hero-btn__text{white-space:nowrap;text-transform:uppercase;color:#000}
.hero-btn:hover .hero-btn__box{background:#fbfbff}
.hero-btn:active{transform:translateY(1px)}
@media (max-width:767px){
  .hero--top{background:linear-gradient(180deg,#9065EE 0%,#FF0000 100%)}
}

/* ---------- заголовок «4 шага» ---------- */
.how{white-space:nowrap;color:#000;text-transform:uppercase}
.how__scribble{pointer-events:none}

/* ---------- степпер ---------- */
.stepper{position:absolute;margin:0;padding:0;list-style:none;pointer-events:none}
.stepper > li{position:absolute;margin:0;padding:0}
.stepper .conn img{width:100%;height:100%}
.stepper .conn{transition:opacity .25s,transform .25s}
.stepper .conn.is-off{opacity:0}
.stepper .line{background:var(--violet);opacity:0;transition:opacity .25s}
.stepper .line.is-on{opacity:1}
.dot{width:var(--s);height:var(--s);transition:width .25s,height .25s,left .25s,top .25s}
.dot.is-on{width:var(--sa);height:var(--sa)}
.dot button{
  all:unset;box-sizing:border-box;width:100%;height:100%;border-radius:50%;
  background:var(--gray);color:#000;display:flex;align-items:center;justify-content:center;
  font-family:"Unbounded",sans-serif;font-size:inherit;font-weight:400;line-height:1;
  box-shadow:0 0 0 .6px #fff;pointer-events:none;transition:background .25s,color .25s;
}
.dot.is-on button{background:var(--violet);color:#fff;box-shadow:none}
.dot.is-link button{pointer-events:auto;cursor:pointer}
.dot button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* ---------- карточка визарда ---------- */
.wz__card{
  position:absolute;overflow:hidden;
  background:linear-gradient(180deg,var(--card-top) 0%,#fff 100%);
  box-shadow:var(--hair);
}
.wz{position:absolute;left:0;top:0;width:100%;height:0}
.wz__next{
  position:absolute;z-index:5;border:0;border-radius:50%;background:transparent;padding:0;
  box-shadow:var(--hair);transition:background .2s;
}
.wz__next img{position:absolute}
.wz__next:hover{background:rgba(135,109,255,.12)}
.panel{position:absolute;inset:0}
.panel > *{position:absolute}
.ptitle{margin:0;padding-left:29px;white-space:nowrap;color:#000}
.ptitle::before{content:attr(data-n);position:absolute;left:1.1px;top:0}
.ptitle span{display:block}
.pdesc{margin:0;white-space:nowrap;color:#000}
.pdesc span{display:inline}

/* кнопки */
.btn{
  border:0;padding:0;border-radius:8.7px;display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:19.6px;font-weight:400;line-height:normal;white-space:nowrap;
  transition:filter .15s,transform .1s,opacity .2s;
}
.btn span{display:block;line-height:normal}
.btn--primary{background:var(--violet);color:#fff}
.btn--outline{background:#fff;color:#000;box-shadow:var(--hair)}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default;filter:none;transform:none}

/* шаг 1 */
.hint,.thumbs{position:absolute;inset:0;pointer-events:none}
.hint__img{position:absolute;max-width:none}
.thumb{position:absolute;padding:0;border:0;overflow:hidden;background:#fff;pointer-events:auto}
.thumb--more{cursor:pointer}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb--more{background:transparent;box-shadow:var(--hair);color:#000;text-align:center;font-family:inherit}
.thumb__x{position:absolute;top:5px;right:5px;width:19px;height:19px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 .5px rgba(131,109,255,.7),0 1px 3px rgba(40,30,100,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}
.thumb__x svg{width:8px;height:8px;fill:none;stroke:#000;stroke-width:1.3;stroke-linecap:round}
.thumb__x:hover{background:#fff;transform:scale(1.08)}
.thumb__x:hover svg{stroke:var(--violet)}
.thumb__x:active{transform:scale(.94)}

/* шаг 2 */
.style{box-shadow:var(--hair);cursor:pointer;transition:background .2s}
.style > *{position:absolute}
.style h4{margin:0;white-space:nowrap;color:#000;font-weight:400}
.style .more{color:#000;text-decoration:underline;white-space:nowrap;text-underline-offset:.15em;text-decoration-thickness:.07em}
.style__img{pointer-events:none;max-width:none}
.style__pick{
  background:transparent;border:0;box-shadow:var(--hair);color:#000;padding:0;font-family:inherit;line-height:normal;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;
}
.style.is-selected{background:#fff;box-shadow:none}
.style.is-selected .style__pick{background:var(--violet);color:#fff;box-shadow:none}
.nav{background:none;border:0;opacity:1;transition:opacity .2s}
.nav img{position:absolute}
.nav:disabled{opacity:.3;cursor:default}
.styles{position:absolute;inset:0}
.styles .style{position:absolute}

/* шаг 3 */
.size{
  background:transparent;border:0;box-shadow:var(--hair);color:#000;padding:0;font-family:inherit;line-height:normal;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.size.is-on{background:var(--violet);box-shadow:none}
.sizes{position:absolute;inset:0;pointer-events:none}
.sizes .size{position:absolute;pointer-events:auto}
.hand3{pointer-events:none;max-width:none}
.price3{margin:0;white-space:nowrap;color:#000;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.135em}

/* шаг 4 */
.pill{box-shadow:var(--hair);display:flex;align-items:center;justify-content:center;color:#000;white-space:nowrap;line-height:normal}
.gen{position:absolute;inset:0;pointer-events:none}
.gen > *{position:absolute}
.gen__idle{inset:0}
.gen__idle > *{position:absolute}
.gcard{position:absolute;max-width:none}
.gen__done,.gen__wait{background:#fff;overflow:hidden;pointer-events:auto}
.gen__done > *,.gen__wait > *{position:absolute}
.gen__result{max-width:none}
/* поле правки и «Переделать» — только после первой генерации */
.rev__t,.redo{display:none}
.wz[data-rev="1"] .rev__t{display:block}
.wz[data-rev="1"] .redo{display:flex}
.rev__t{background:#fff;border:0;box-shadow:var(--hair);color:#000;font-family:inherit;resize:none;outline:0;overflow:auto;-webkit-appearance:none;appearance:none;transition:box-shadow .15s}
.rev__t::placeholder{color:rgba(0,0,0,.5);opacity:1}
.rev__t:focus{box-shadow:inset 0 0 0 1px var(--violet)}
.rev__t:disabled{opacity:.55}
.redo{background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--violet);color:#000;font-family:inherit;align-items:center;justify-content:center;line-height:normal;padding:0;transition:background .15s,transform .1s}
.redo span{display:block;line-height:normal}
.redo:hover{background:rgba(135,109,255,.08)}
.redo:active{transform:translateY(1px)}
.redo:disabled{opacity:.45;cursor:default;background:transparent;transform:none}
/* текст под заголовком: 0 — до первой генерации, 1 — есть ещё генерация (правка), 2 — бесплатные генерации закончились */
.wz:not([data-rev="1"]) .pd-r,.wz:not([data-rev="2"]) .pd-x,.wz:not([data-rev="0"]) .pd-i{display:none!important}
.wz[data-rev="1"] span.pd-r.only-d,.wz[data-rev="2"] span.pd-x.only-d{display:inline!important}
@media (max-width:767px){
  .wz[data-rev="1"] span.pd-r.only-d,.wz[data-rev="2"] span.pd-x.only-d{display:none!important}
  .wz[data-rev="1"] span.pd-r.only-m,.wz[data-rev="2"] span.pd-x.only-m{display:inline!important}
}
.gen[data-gen="idle"] .gen__done,.gen[data-gen="idle"] .gen__wait{display:none}
.gen[data-gen="wait"] .gen__idle,.gen[data-gen="wait"] .gen__done{display:none}
.gen[data-gen="done"] .gen__idle,.gen[data-gen="done"] .gen__wait{display:none}
.wait__pct{color:var(--violet);font-variant-numeric:tabular-nums}
.wait__bar{background:rgba(135,109,255,.16);overflow:hidden}
.wait__bar i{display:block;height:100%;width:0;background:var(--violet);border-radius:inherit;transition:width .2s linear}
.wait__text{color:#000}

/* ---------- галерея ---------- */
.gal > *{position:absolute}
.gal__title{margin:0;white-space:nowrap;color:#000;text-transform:uppercase}
.gal__desc{margin:0;white-space:nowrap;color:#000}
.gimg{padding:0;border:0;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:var(--hair)}
.gimg img{position:absolute;left:var(--gi,0);top:var(--gi,0);width:calc(100% - 2*var(--gi,0px));height:calc(100% - 2*var(--gi,0px));border-radius:calc(var(--gr,0px) - var(--gi,0px));object-fit:cover;transition:transform .35s}
.gimg:hover img{transform:scale(1.03)}
.gal__more{color:#000;text-decoration:underline;white-space:nowrap;text-underline-offset:.15em;text-decoration-thickness:.07em}

/* ---------- лайтбокс ---------- */
.lb{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lb__img{max-width:min(92vw,900px);max-height:84vh;width:auto;height:auto;object-fit:contain;border-radius:14px;background:#fff}
.lb__cap{margin-top:14px;color:#fff;font-size:14px;font-weight:400;text-align:center}
.lb__x{position:absolute;right:18px;top:12px;background:none;border:0;color:#fff;font-size:38px;line-height:1;padding:6px 10px}

/* ---------- оформление заказа ---------- */
.ov{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);overflow:auto;display:flex;align-items:flex-start;justify-content:center}
.order{position:relative;flex:none;margin:auto;background:#D8E1FF;box-shadow:var(--hair);color:#000;overflow:hidden}
.order > *{position:absolute}
.order__ttl,.order__l,.order__pay,.order__price,.order__note,.order__deliv{white-space:nowrap;margin:0}
.order__price{color:var(--violet);text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:.06em}
.order__img{object-fit:cover}
.order__ozon{background:#0059FF;color:#fff;text-align:center}
.order__sep{background:var(--violet)}
.f{display:block}
.f > *{position:absolute}
.f span{white-space:nowrap;color:#000}
.f input{background:#fff;border:0;outline:0;color:#000;font-family:inherit;-webkit-appearance:none;appearance:none}
.f input::placeholder{color:#000;opacity:1}
.f input.is-bad,.agree.is-bad i{box-shadow:0 0 0 1.5px #FF4D4D}
.agree{display:block;cursor:pointer}
.agree > *{position:absolute}
.agree input{opacity:0;width:1px;height:1px}
.agree i{background:#fff;border:1px solid #000}
.agree input:checked + i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--violet)}
.agree input:focus-visible + i{outline:2px solid var(--violet);outline-offset:2px}
.agree__t{white-space:nowrap;color:#000}
.agree__t a{font-weight:550;color:#000;text-decoration:underline}
.pay{border:0;padding:0;background:none;cursor:pointer;display:block}
.pay > *{position:absolute}
.pay__box{background:var(--ozon)}
.pay__t{white-space:nowrap;color:#fff}
.pay:hover .pay__box{filter:brightness(1.06)}
.pay:active{transform:translateY(1px)}
.pay:disabled{opacity:.7;cursor:default}
.pay__sh,.pay__logo{max-width:none}
.secure{display:block;white-space:nowrap}
.secure > *{position:absolute}

/* контур поверх содержимого (картинки не перекрывают обводку) */
.gen__done::after,.gen__wait::after,.order::after{
  content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--hair);pointer-events:none;
}
.nav:disabled{opacity:1}

/* крестик закрытия окна заказа */
.order__close,.rq__close{z-index:3;top:16px;right:16px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:var(--hair);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}
.order__close svg,.rq__close svg{width:13px;height:13px;fill:none;stroke:#000;stroke-width:1.4;stroke-linecap:round}
.order__close:hover,.rq__close:hover{background:#fff}
.order__close:hover svg,.rq__close:hover svg{stroke:var(--violet)}
.order__close:active,.rq__close:active{transform:scale(.94)}

/* ---------- плашка ХИТ на карточках стилей ---------- */
.style__hit{position:absolute;z-index:2;background:#FFF2D0;color:#000}

/* ---------- липкая шапка (после первого экрана) ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;background:#fff;transform:translateY(-101%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;pointer-events:none}
.hdr.is-on{transform:none;visibility:visible;transition:transform .28s ease;pointer-events:auto}
.hdr__in{position:relative;margin:0 auto}
.hdr__in > *{position:absolute}
.hdr__lbl,.hdr__link{white-space:nowrap;color:#000;text-decoration:none}
.hdr__link:hover,.hdr__sk:hover{color:var(--violet)}
.hdr__ic img{display:block;width:100%;height:100%}
.hdr__ic{transition:transform .15s}
.hdr__ic:hover{transform:scale(1.08)}
.hdr__sk{display:flex;align-items:center;justify-content:center;box-shadow:var(--hair);color:#000;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.hdr__sk:hover{background:rgba(135,109,255,.08)}

/* ---------- чат с мастерской ---------- */
.chat{position:fixed;right:0;bottom:0;width:0;height:0;z-index:45}
.chat > *{position:absolute}
.chat__btn{border:0;padding:0;background:var(--violet);color:#fff;font-family:inherit;cursor:pointer;box-shadow:0 2px 8px rgba(80,60,200,.25);transition:filter .15s,transform .1s}
.chat__btn:hover{filter:brightness(1.06)}
.chat__btn:active{transform:translateY(1px)}
.chat__btn > *{position:absolute}
.chat__btn svg{fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.chat__btn svg circle{fill:#fff;stroke:none}
.chat__btn span{white-space:nowrap;text-align:left}
.chat__panel{background:linear-gradient(180deg,var(--card-top) 0%,#fff 100%);box-shadow:var(--hair),0 6px 24px rgba(40,30,120,.18);overflow:hidden;color:#000}
.chat__panel > *{position:absolute}
.chat__ttl,.chat__desc{margin:0;white-space:nowrap}
.chat__x{padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:var(--hair);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.chat__x svg{fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round}
.chat__x:hover svg{stroke:var(--violet)}
.chat__log{overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.chat__msg{max-width:84%;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
.chat__msg--me{align-self:flex-end;background:var(--violet);color:#fff}
.chat__msg--sys{align-self:flex-start;background:#fff;box-shadow:var(--hair);color:#000}
.chat__sep{background:var(--violet)}
.chat__t{background:#fff;border:0;box-shadow:var(--hair);color:#000;font-family:inherit;resize:none;outline:0;-webkit-appearance:none;appearance:none}
.chat__t::placeholder{color:rgba(0,0,0,.5);opacity:1}
.chat__t:focus{box-shadow:inset 0 0 0 1px var(--violet)}
.chat__t.is-bad,.chat__agree.is-bad i{box-shadow:0 0 0 1.5px #FF4D4D}
.chat__agree{display:block;cursor:pointer;white-space:nowrap}
.chat__agree > *{position:absolute}
.chat__agree input{opacity:0;width:1px;height:1px}
.chat__agree i{background:#fff;border-radius:50%;box-shadow:var(--hair)}
.chat__agree input:checked + i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--violet)}
.chat__agree input:focus-visible + i{outline:2px solid var(--violet);outline-offset:2px}
.chat__agree a{color:#000;text-decoration:underline}
.chat__send{background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--violet);color:#000;font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .1s}
.chat__send:hover{background:rgba(135,109,255,.08)}
.chat__send:active{transform:translateY(1px)}
.chat__send:disabled{opacity:.5;cursor:default}
.chat__panel:not([hidden]){animation:chatIn .2s ease}
@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.chat__panel.has-msgs .chat__desc{display:none}
.hdr{box-shadow:inset 0 -1px 0 var(--violet)}

/* ---------- прогресс-бар: текущий шаг крупнее ---------- */
.dot.is-cur{width:var(--sc);height:var(--sc)}

/* ---------- карусель стилей ---------- */
.styles__track{position:absolute;inset:0;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.style[inert]{pointer-events:none}
.more-styles{display:none;background:none;border:0;padding:0;color:#000;font-family:inherit;cursor:pointer}
.more-styles span{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.07em;white-space:nowrap}
.more-styles img{position:absolute;transition:transform .2s}
.more-styles:hover img{transform:translateX(4px)}
.more-styles span{position:absolute;display:block}

/* ---------- «Далее»: заметное появление и пульсация ---------- */
.wz__next:not([hidden]){animation:nextPop .55s cubic-bezier(.2,1.5,.4,1) both,nextRing 1.7s ease-out .55s infinite}
.wz__next:not([hidden]) img{animation:nextNudge 1.7s ease-in-out .55s infinite}
.wz__next:hover,.wz__next:focus-visible{animation:none}
.wz__next:hover img,.wz__next:focus-visible img{animation:none}
@keyframes nextPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
@keyframes nextRing{
  0%{box-shadow:var(--hair),0 0 0 0 rgba(135,109,255,.55);background:rgba(135,109,255,.14)}
  70%{box-shadow:var(--hair),0 0 0 16px rgba(135,109,255,0);background:rgba(135,109,255,0)}
  100%{box-shadow:var(--hair),0 0 0 16px rgba(135,109,255,0);background:rgba(135,109,255,0)}}
@keyframes nextNudge{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.wz__next:not([hidden]),.wz__next:not([hidden]) img{animation:none}}
@keyframes stFade{from{opacity:0}to{opacity:1}}
.hand3.is-new{animation:handIn .35s ease}
@keyframes handIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- отзывы ---------- */
.rvs{position:absolute;color:#000}
.rvs > *{position:absolute}
.rvs__shadow{max-width:none;pointer-events:none}
.rvs__pill{background:#FFCC00;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1}
.rvs__pill span{display:block;position:relative;top:-.4px}
.rvs__title,.rvs__desc{margin:0}
.rvs__list{inset:0;pointer-events:none}
.rv{position:absolute;box-shadow:var(--hair);pointer-events:auto;transition:transform .5s cubic-bezier(.3,.7,.2,1),opacity .35s ease}
.rv > *{position:absolute;margin:0}
.rv__name,.rv__text{color:#000}
.rv__photo{overflow:hidden;background:#eee}
.rv__photo img{position:absolute;left:.5px;top:-10.5px;width:103px;height:181px;display:block;max-width:none}
.rv__photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px var(--violet);pointer-events:none}
.rv__stars{pointer-events:none}
.rv__star{position:absolute;top:0;fill:#FFD100}
.rv.is-far{opacity:0;pointer-events:none}
.rv.is-jump{transition:none;opacity:0}
.rvs__arr{background:none;border:0;padding:0;box-shadow:var(--hair);cursor:pointer;transition:background .2s}
.rvs__arr img{position:absolute}
.rvs__arr:hover{background:rgba(135,109,255,.12)}
.rvs__arr:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* ================= новая версия: заметка, «художественный метод», выбор стиля, заявка ================= */
.note__ring{pointer-events:none;max-width:none}
.note__t{margin:0;color:#000;white-space:nowrap;text-transform:uppercase;text-align:center}
.note__t span{display:inline}

.art{color:#000;isolation:isolate}
.art::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * (var(--bleed,0px) + var(--al,0px)));right:calc(-1 * (var(--bleed,0px) + var(--ar,0px)));background:#D7E1FF;box-shadow:inset 0 .5px 0 var(--violet),inset 0 -.5px 0 var(--violet)}
.art > *{position:absolute}
.art__shadow{max-width:none;pointer-events:none}
.art__pill{background:#FFCC00;display:flex;align-items:center;justify-content:flex-start;color:#000;text-transform:uppercase;white-space:nowrap}
.art__pill span{position:absolute;display:block}
.art__ring{display:block;box-sizing:border-box;border:.6px solid #000}
.art__ic{max-width:none}
.art__p{margin:0;color:#000;white-space:nowrap}
.art__ph{overflow:hidden;background:#fff}
.art__ph img{position:absolute;max-width:none;object-fit:cover}

.sty{background:linear-gradient(180deg,var(--card-top) 0%,#fff 100%);box-shadow:var(--hair);color:#000}
.sty > *{position:absolute}
.sty__title{margin:0;color:#000;text-transform:uppercase;white-space:nowrap}
.sty .nav{cursor:pointer}
.sty .nav::after{content:"";position:absolute;inset:-18px -14px}
.style:hover,.style:focus-visible{background:#fff}
.style:active{transform:scale(.99)}
.style{transition:background .2s,transform .1s}
.sty[data-pg="1"] .styles__track{animation:stFade .35s ease}

.rq{position:relative;flex:none;margin:auto;background:#D7E1FF;box-shadow:var(--hair);color:#000;overflow:hidden}
.rq > *{position:absolute}
.rq__ttl,.rq__desc{margin:0;white-space:nowrap}
.rq__chip{display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--violet);color:#000;white-space:nowrap}
.rq .agree__t{white-space:nowrap}
.rq .pay__t{text-align:center}
.rq.is-sent .f,.rq.is-sent .agree,.rq.is-sent .pay,.rq.is-sent .rq__chip,.rq.is-sent .rq__desc,.rq.is-sent .rq__err{display:none}
.rq .rq__ok{display:none;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:18px;font-weight:600;line-height:1.4;padding:0 32px;white-space:normal}
.rq.is-sent .rq__ok{display:block}
.rq .agree i{border-width:.6px}
.rq__err{display:none;left:0;right:0;text-align:center;color:#d62d2d;font-size:11px;font-weight:400;line-height:1.3}
.rq__err.is-on{display:block}
