/* Конфигуратор персонализации v2 — оверлей поверх карточки товара.
   Прототип для показа на стенде: витрина = буквы + тиснение, рендер оттиска на WebGL2. */

.pv2-overlay{
  position:fixed;inset:0;z-index:10000;display:none;
  background:rgba(40,32,22,.42);
  padding:24px 16px;overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.pv2-overlay.pv2-open{display:flex;align-items:flex-start;justify-content:center}
.pv2-win{
  background:#fff;border-radius:3px;box-shadow:0 24px 60px rgba(40,32,22,.28);
  position:relative;overflow:hidden;max-width:1140px;width:100%;
  font:400 15px/1.5 'Nunito Sans',-apple-system,Segoe UI,sans-serif;color:#4A4A4A;
  -webkit-font-smoothing:antialiased;
}
.pv2-win *{box-sizing:border-box}
.pv2-close{
  position:absolute;top:14px;right:16px;z-index:6;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.85);color:#4A4A4A;font-size:19px;line-height:1;cursor:pointer;
}
/* Значок над галереей — заметный вход в конфигуратор. Штатная кнопка в аккордеоне
   «Персонализация» остаётся: значок её не заменяет, а даёт короткий путь. */
.pv2-badge{
  /* Значок позиционируется в координатах документа (absolute от body), а не на экране:
     он едет вместе со страницей без единого пересчёта на прокрутке — то есть не дёргается,
     и при этом не зависит от слайдера, который переписывает стили своим детям.
     Координаты задаёт скрипт по рамке галереи. */
  position:absolute;z-index:6;
  display:flex;align-items:center;gap:8px;
  /* Та же «таблетка», высота, текст и отступы от края фото, что у меток товара (NEW, БЕРЕЖНЫЙ УХОД —
     template_styles.css шаблона). Тень и объём — только здесь: кнопка должна выделяться среди
     плоских меток (вариант Б, выбор Антона 22.10.2026). */
  height:30px;box-sizing:border-box;padding:0 13px 0 6px;border-radius:15px;
  background:linear-gradient(180deg,#fff 0%,#f4f0ea 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(40,32,22,.14),0 6px 16px rgba(40,32,22,.16);
  font:500 10.5px/1 'Nunito Sans',-apple-system,Segoe UI,sans-serif;
  letter-spacing:1px;text-transform:uppercase;color:#4A4A4A;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease;
}
.pv2-badge:hover{background:linear-gradient(180deg,#fff 0%,#efe9e1 100%);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(40,32,22,.16),0 8px 20px rgba(40,32,22,.2);color:#4A4A4A}
.pv2-badge-mono{
  width:20px;height:20px;flex:0 0 20px;border-radius:50%;border:1px solid #4A4A4A;
  display:flex;align-items:center;justify-content:center;
  font:500 6.8px/1 'Montserrat';letter-spacing:.1px;color:#4A4A4A;
}
.pv2-badge-short{display:none}

.pv2-head{display:none}
.pv2-scene{position:relative}
.pv2-plan{position:relative;background:#fff;overflow:hidden;display:flex;justify-content:center}
.pv2-plan canvas{display:block;max-width:100%;width:auto;height:auto}
.pv2-zoom{
  position:absolute;border-radius:50%;overflow:hidden;background:#eee;
  border:5px solid #fff;box-shadow:0 14px 34px rgba(40,32,22,.26);z-index:3;
}
.pv2-zoom canvas{display:block;width:100%;height:auto}

.pv2-bar{
  display:flex;align-items:flex-start;gap:16px 26px;flex-wrap:wrap;
  border-top:1px solid rgba(74,74,74,.14);padding:14px 22px;background:#FCF8F1;
}
.pv2-group{display:flex;flex-direction:column}
.pv2-row{height:52px;display:flex;align-items:center;gap:10px}
.pv2-bar .pv2-grow{margin-left:auto;flex:0 1 auto;min-width:0}
.pv2-bar .pv2-grow .pv2-lbl{visibility:hidden}
.pv2-foot{padding:0 22px 12px;background:#FCF8F1}
.pv2-hint{color:#8A8580;font-size:11.5px;letter-spacing:.2px}
.pv2-lbl{
  font:500 11px/1 'Nunito Sans';letter-spacing:1.3px;text-transform:uppercase;
  color:#8A8580;white-space:nowrap;display:block;margin-bottom:10px;height:11px;
}
.pv2-chars{display:flex;gap:8px;align-items:center}
.pv2-chars input{
  width:46px;height:46px;text-align:center;border:1px solid rgba(74,74,74,.28);border-radius:2px;
  font:500 22px/1 'Montserrat';color:#4A4A4A;background:#fff;text-transform:uppercase;
}
.pv2-chars input:focus{outline:0;border-color:#4A4A4A}
.pv2-dot{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#8A8580;cursor:pointer;user-select:none}
.pv2-dot input{
  appearance:none;-webkit-appearance:none;margin:0;width:18px;height:18px;
  border:1px solid rgba(74,74,74,.28);border-radius:2px;background:#fff;position:relative;cursor:pointer;
}
.pv2-dot input:checked{background:#4A4A4A;border-color:#4A4A4A}
.pv2-dot input:checked::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}

.pv2-foilgrp .pv2-lbl{min-width:186px}
.pv2-onefoil{font:400 14px/1 'Nunito Sans';color:#4A4A4A;white-space:nowrap}
.pv2-sep{width:1px;height:52px;align-self:flex-end;background:rgba(74,74,74,.14);margin:0 2px}
.pv2-foils{display:flex;gap:9px}
.pv2-foil{width:30px;height:30px;border-radius:50%;border:1px solid rgba(74,74,74,.28);cursor:pointer;padding:0}
.pv2-foil[data-v="0"]{background:#EDE7DE}
.pv2-foil[data-v="1"]{background:linear-gradient(140deg,#f6f7f8,#c7ccd1 55%,#eef1f3)}
.pv2-foil[data-v="2"]{background:linear-gradient(140deg,#f4dea6,#c9992f 55%,#f0d78f)}
.pv2-foil.pv2-on{box-shadow:0 0 0 1px #fff inset,0 0 0 2px #4A4A4A}
.pv2-cta{
  border:0;background:#4A4A4A;color:#fff;height:52px;padding:0 26px;border-radius:2px;cursor:pointer;
  font:500 13px/1 'Nunito Sans';letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;
}
.pv2-cta:hover{background:#2f2f2f}
.pv2-price{font:500 17px/1 'Nunito Sans';white-space:nowrap}
.pv2-cta-price{margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.32);letter-spacing:.6px}
.pv2-note{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  background:rgba(46,44,41,.94);color:#EDE7DE;padding:10px 16px;border-radius:2px;
  font-size:13px;z-index:8;display:none;
}
.pv2-tip{
  position:fixed;z-index:10010;display:none;pointer-events:none;
  font-size:12px;font-style:normal;font-weight:400;line-height:100%;
  letter-spacing:1.2px;text-transform:uppercase;color:#4A4A4A;
  padding:8px 10px;background:rgba(255,255,255,.6);border-radius:100px;
  backdrop-filter:blur(2px);
}
.pv2-loading{padding:60px 0;text-align:center;color:#8A8580;font-size:13px}
/* Пока грузятся снимки: геометрия окна уже окончательная, вместо пустого холста — заглушка, кружок скрыт.
   Готово — кадр и кружок проявляются (замечание Антона 22.10.2026: окно висело деформированным). */
.pv2-wait{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:#8A8580;font:500 10.5px/1 'Nunito Sans',-apple-system,Segoe UI,sans-serif;letter-spacing:1px;text-transform:uppercase;pointer-events:none}
.pv2-wait i{display:block;width:84px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,rgba(201,192,180,0) 0%,#c9c0b4 50%,rgba(201,192,180,0) 100%);background-size:200% 100%;
  animation:pv2-wait 1.1s linear infinite}
@keyframes pv2-wait{from{background-position:150% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.pv2-wait i{animation:none;background:#c9c0b4}}
.pv2-loading-state .pv2-wait{display:flex}
.pv2-loading-state .pv2-plan{background:#f3f0eb}
.pv2-plan canvas,.pv2-zoom{transition:opacity .25s ease}
.pv2-loading-state .pv2-plan canvas,.pv2-loading-state .pv2-zoom{opacity:0}

@media (max-width:900px){
  /* на телефоне значок компактнее: он не должен наезжать на изделие */
  .pv2-badge{height:28px;padding:0 11px 0 5px;gap:7px;border-radius:14px;font-size:10px;letter-spacing:.9px}
  .pv2-badge-mono{width:19px;height:19px;flex-basis:19px;font-size:6.2px}
  .pv2-badge-full{display:none}
  .pv2-badge-short{display:inline}

  /* Кадр на телефоне увеличен и обрезан по бокам, поэтому крестику над картинкой места нет:
     он уезжает в свою полоску сверху и изображение не перекрывает. */
  .pv2-head{
    display:flex;align-items:center;height:44px;padding:0 14px;background:#FCF8F1;
    border-bottom:1px solid rgba(74,74,74,.14);
  }
  .pv2-head .pv2-lbl{margin:0;height:auto}
  .pv2-close{top:7px;right:8px;width:30px;height:30px;font-size:17px;background:transparent}
  .pv2-overlay{padding:10px 8px}
  .pv2-bar{padding:14px;gap:14px 18px;flex-wrap:wrap}
  .pv2-bar .pv2-grow{margin-left:0;width:100%}
  .pv2-bar .pv2-grow .pv2-lbl{display:none}
  .pv2-bar .pv2-grow .pv2-row{width:100%}
  .pv2-sep{display:none}
  .pv2-cta{flex:1;padding:0 14px;width:100%}
  .pv2-foot{padding:0 14px 12px}
}