/* ── калькулятор. Прайс, сроки и формулы — в 04-calc.js (с пояснениями — calculator/price.ts). Вид и плёнка — плитки с картинкой, размер и тираж — чипы, свой размер/тираж — чип-поле ── */
/* два раздельных листа: слева опции, справа итог (тёмный лист, как .vsheet.is-dark) */
.calc__box{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:stretch}
.calc__main{padding:clamp(22px,3vw,40px)}
.calc__head .lead{margin-top:12px}
/* Левый лист калькулятора. Шаги идут сверху вниз, над каждым подпись: номер в серой плашке и название капсом. Кнопки во всю ширину, выбранное — чёрная заливка. Номер шага — CSS-счётчик: текст легенд «Размер»/«Количество» переписывает JS. */
#calc .calc__opts{margin-top:22px;display:grid;align-content:start;gap:16px;counter-reset:st}
#calc .grp{position:relative;min-width:0;margin:0;padding:0;border:0}
#calc .grp legend{float:left;width:100%;margin:0 0 9px;padding:0;display:flex;align-items:center;gap:8px;
    font-size:11.5px;font-weight:700;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:#6e6e6a}
#calc .grp legend+*{clear:both}
#calc .grp--x legend{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#calc .grp legend::before{counter-increment:st;content:counter(st);flex:none;display:flex;align-items:center;justify-content:center;
    width:23px;height:23px;border-radius:8px;background:rgba(20,18,18,.07);font-size:12px;font-weight:700;letter-spacing:normal;color:#4a4136}
/* плитки «Что печатаем» и «Плёнка»: фото на подложке крупнее плитки — сверху торчит, низ уходит под край. Высота плитки от картинки не зависит (78px). */
#calc .tiles{display:grid;gap:14px}
#calc .tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
#calc .tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
#calc .tile{position:relative;display:block;min-width:0;cursor:pointer}
#calc .tile input,#calc .chip input[type=radio]{position:absolute;opacity:0;pointer-events:none}
#calc .tile__in{position:relative;display:flex;align-items:center;gap:14px;height:100%;padding:10px 16px 10px 10px;border-radius:20px;
    background:#fff;color:var(--ink);clip-path:inset(-80px 0 0 0 round 0 0 20px 20px);   /* срез низа = скругление плитки */
    transition:transform .2s cubic-bezier(.3,1.4,.5,1),background .2s}
#calc .tile__in>span{min-width:0}
/* рамка из двух половин: верхняя под картинкой (фото лежит на рамке), нижняя поверх (фото уходит под неё) */
#calc .tile__in::before,#calc .tile__in::after{content:"";position:absolute;left:0;right:0;border:1px solid var(--line);pointer-events:none}
#calc .tile__in::before{top:0;bottom:50%;border-bottom:0;border-radius:20px 20px 0 0}
#calc .tile__in::after{top:50%;bottom:0;border-top:0;border-radius:0 0 20px 20px;z-index:2}
#calc .tile:hover .tile__in{transform:translateY(-2px)}
#calc .tile input:checked + .tile__in{background:var(--ink);color:#fff;transform:none}
#calc .tile input:checked + .tile__in::before,#calc .tile input:checked + .tile__in::after{border-color:transparent}
#calc .tile b{display:block;font-size:16.5px;line-height:1.2}
#calc .tile em{display:block;margin-top:3px;font-style:normal;font-size:13.5px;line-height:1.3;color:var(--muted)}
#calc .tile input:checked + .tile__in em{color:rgba(255,255,255,.65)}
#calc .tile__ph{position:relative;flex:none;width:80px;height:58px;margin-left:4px}
#calc .tile__ph img{position:absolute;left:50%;bottom:-27px;width:auto;max-width:none;height:104px;border-radius:11px;
    transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 6px 10px rgba(20,18,18,.28));transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
#calc .tile:hover .tile__ph img{transform:translate(-50%,-6px) rotate(-8deg)}
#calc .tile__ph img[src*="mat-1"]{filter:brightness(1.07) drop-shadow(0 6px 10px rgba(20,18,18,.28))}
/* подложка на фото серее соседних */
#calc .tile__ph:has(img[src*="kind-0"]){width:96px;margin-left:12px}
/* квадратное фото шире вертикального листа */
/* плёнки: плитки втрое уже — квадратное фото подрезано по бокам в вертикальную карточку, шрифт мельче */
#calc .tiles--3 .tile__in{gap:10px;padding-right:10px}
#calc .tiles--3 .tile__ph{width:66px}
#calc .tiles--3 .tile__ph img{bottom:-17px;width:70px;height:92px;object-fit:cover;border-radius:12px}
#calc .tiles--3 .tile b{font-size:13.5px}
#calc .tiles--3 .tile em{font-size:12px;line-height:1.25}
@media(min-width:1001px) and (max-width:1250px){
  /* 1001–1250: калькулятор ещё в две колонки, плитка плёнки ~180px — «Голографическая» не влезала рядом с фото. Плёнки вертикальные, как на мобилке: фото сверху, текст снизу */
  #calc #mat{padding-top:16px}
  #calc #mat .tile__in{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;min-height:112px;padding:62px 12px 11px}
  #calc #mat .tile__ph{position:absolute;left:0;right:0;top:-16px;width:auto;height:76px;margin:0}
  #calc #mat .tile__ph img{bottom:0;width:62px;height:80px}
  #calc #qty .chip .own{padding:0 6px}
}
/* «Свой тираж» в ячейке ~110px */
#calc .chip input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
#calc .tile input:focus-visible + .tile__in{outline:3px solid var(--y);outline-offset:-3px}
/* внутрь: снаружи низ срезал бы clip-path */
/* чипы: размер и тираж — ряд равных ячеек во всю ширину, «своё» — поле ввода в двойной ячейке */
#calc .chips{display:flex;flex-wrap:wrap;gap:8px}
#calc #size,#calc #qty{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#calc #size .chip:has(.own),#calc #qty .chip:has(.own){grid-column:span 2}
#calc #size .chip[hidden],#calc #qty .chip[hidden]{display:none}
#calc .chip{position:relative;cursor:pointer}
#calc .chip span,#calc .chip .own{display:inline-flex;align-items:center;justify-content:center;width:100%;height:44px;padding:0 8px;border-radius:99px;
    font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;background:#fff;color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(20,18,18,.06);transition:transform .2s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,background .2s}
#calc .chip:hover span{transform:translateY(-2px)}
#calc .chip input:checked + span,#calc .chip input:checked + .own{background:var(--ink);color:#fff;box-shadow:none;transform:none}
#calc .chip .own{padding:0 14px;border:0;font:inherit;font-size:16px;font-weight:500;text-align:center;outline:none;cursor:text;
    background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 2px rgba(20,18,18,.06)}
#calc .chip .own:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
#calc .chip .own::placeholder{color:inherit;opacity:.7}
/* «как отдадим» — равные сегменты: название + пояснение */
#calc #pack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#calc .chip--desc span{height:auto;min-height:56px;padding:8px 18px;flex-direction:column;align-items:flex-start;border-radius:18px;line-height:1.25}
#calc .chip--desc span small{margin-top:2px;font-size:13px;font-weight:500;opacity:.65}
#calc .chip input:checked + span small{color:rgba(255,255,255,.65);opacity:1}
/* форматы листа стикерпака  — как плитки «Что печатаем»: слева лист пака В МАСШТАБЕ формата (А7 : А6 : А5 = 105 : 148 : 210 мм по высоте → 52 : 73 : 104px), низ под рамкой, А5 торчит над плиткой. Рамка из двух половин, как у плиток: верх под картинкой, низ поверх. */
#calc #size[data-mode="sheet"] .chip span{position:relative;height:78px;padding:8px 14px 8px 96px;flex-direction:column;align-items:flex-start;justify-content:center;
    border-radius:20px;line-height:1.2;font-size:16.5px;box-shadow:none;clip-path:inset(-80px 0 0 0 round 0 0 20px 20px)}
#calc #size[data-mode="sheet"] .chip span small{font-size:13.5px}
#calc #size[data-mode="sheet"] .chip span::before,#calc #size[data-mode="sheet"] .chip span::after{content:"";position:absolute;left:0;right:0;border:1px solid var(--line);pointer-events:none}
#calc #size[data-mode="sheet"] .chip span::before{top:0;bottom:50%;border-bottom:0;border-radius:20px 20px 0 0}
#calc #size[data-mode="sheet"] .chip span::after{top:50%;bottom:0;border-top:0;border-radius:0 0 20px 20px;z-index:2}
#calc #size[data-mode="sheet"] .chip input:checked + span::before,#calc #size[data-mode="sheet"] .chip input:checked + span::after{border-color:transparent}
#calc .fmt{position:absolute;left:48px;bottom:-14px;width:var(--w);height:var(--h);transform:translateX(-50%) rotate(-6deg);
    background:url(../img/calc/kind-1.webp) center/100% 100% no-repeat;border-radius:6px;filter:drop-shadow(0 6px 10px rgba(20,18,18,.28));
    transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
#calc .chip:hover .fmt{transform:translate(-50%,-6px) rotate(-8deg)}
#calc #size .chip:nth-child(1) .fmt{--w:40px;--h:52px}
#calc #size .chip:nth-child(2) .fmt{--w:57px;--h:73px}
#calc #size .chip:nth-child(3) .fmt{--w:80px;--h:104px}
/* «Нужен дизайн» — плашка-переключатель со своей галочкой, рядом — про макет */
/* ряд по той же сетке, что «Как отдадим» (3 колонки): галочка — 2 ячейки, чтобы пояснение влезло в строку и высота совпала с соседями (56px); отступы и шрифты — как у вариантов выдачи */
#calc .grp--x{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:center}
#calc .grp--x .check{grid-column:span 2;position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px;border-radius:18px;
    cursor:pointer;font-size:16px;font-weight:600;line-height:1.25;background:#fff;
    box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(20,18,18,.06);transition:transform .2s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,background .2s}
#calc .check:hover{transform:translateY(-2px)}
#calc .check small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--ink);opacity:.65}
#calc .check input{flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border-radius:7px;cursor:pointer;
    appearance:none;-webkit-appearance:none;background:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(20,18,18,.25)}
#calc .check input::after{content:"";width:10px;height:5px;border:solid var(--ink);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);opacity:0}
#calc .check input:checked{background:#fff}
#calc .check input:checked::after{opacity:1}
#calc .check input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#calc .check:has(input:checked){background:var(--ink);color:#fff;box-shadow:none;transform:none}
#calc .check:has(input:checked) small{color:#fff}
#calc .grp--x .calc__art{grid-column:1/-1;margin:2px 0 0 4px;font-size:12.5px;line-height:1.4;color:var(--muted)}
#calc .calc__art a{color:var(--ink);text-decoration:underline;white-space:nowrap}
.calc__sum{color:#f3f1ec;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px;
    background:linear-gradient(128deg,#25272a,#1b1c1e 50%,#222326);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 40px -28px rgba(0,0,0,.6)}
.calc__title{margin:0;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:.95}
.calc__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.calc__price i{font-style:normal;font-size:22px;font-weight:700;color:inherit}
/* без жёлтого акцента */
.calc__price b{font-family:var(--font-head);font-weight:800;font-size:clamp(60px,5.8vw,92px);line-height:.9}
.calc__price span{font-size:15px;color:rgba(255,255,255,.6)}
.calc__mark{margin:0;font-size:13px;color:var(--y)}
.calc__pick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.calc__pick li{padding:5px 11px;border-radius:99px;font-size:13px;font-weight:600;line-height:1.2;color:rgba(255,255,255,.82);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.calc__facts{display:grid;grid-template-columns:1fr 1fr;border-radius:16px;background:rgba(255,255,255,.06)}
.calc__facts>div{display:flex;flex-direction:column;gap:4px;padding:12px 16px}
.calc__facts>div+div{border-left:1px solid rgba(255,255,255,.1)}
.calc__facts>div[hidden]{display:none}
.calc__facts span{font-size:12.5px;color:rgba(255,255,255,.55)}
.calc__facts b{font-size:17px;line-height:1.2}
/* превью выбранного в чеке: панель выше формы, а пустой чёрный прямоугольник читался как недогруз */
/* превью выбранного = РУКА ДЕРЖИТ ЛИСТ (ориентир размера). Рука — img/calc/hand.webp: исходник на чёрном с хромакей-карточкой А7 (фон и карточка вырезаны), лист/стикер лежит ПОД ней — большой палец сверху сам собой. Карточка А7 — самый малый формат, любой лист её перекрывает, срезов пальцев не видно. Масштаб честный: --mm px на мм. Геометрия из исходника 1122×1402 (карточка 316×446 px = 74×105 мм → 4.27 px/мм), кадр руки обрезан по y 632–1250: 84.5 × 144.7 мм, нижний левый угол карточки («щепоть») — 53.2 мм от левого края кадра и 126.5 мм от низа. Какую картинку показать — CSS по выбору слева (:has), без JS. */
.calc__pre{flex:1;min-height:380px;container-type:size;   /* размер сцены знают дочерние (cqh) — масштаб подгоняется под высоту, А5 не режется */
   display:grid;place-items:end center;overflow:hidden;margin:0 calc(-1 * clamp(20px,2vw,28px));
    background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent);
    -webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
/* запястье тает к кнопке */
.pre-stage{--mm:1.15px;--hmm:148;--sh:calc(var(--hmm) * var(--mm));--sw:calc(var(--sh) * .707);   /* А-формат: ширина = высота / √2 */
    --ax:calc(50% - var(--sw) / 2);--lift:calc(126.5 * var(--mm) - var(--drop));
    /* «голо»: рука крупнее и ниже — запястье уходит за край, щепоть ближе к центру панели. --drop — на сколько опущена */
    --D:16;--drop:calc(var(--D) * var(--mm));   /* опускание руки в мм (а не px) — чтобы ужималось вместе с масштабом */
    position:relative;width:100%;height:100%;min-height:400px}
/* паки: главное — лист, рука кадрируется как у стикеров (запястье за краем). Лист по центру панели по высоте */
/* масштаб = желаемый, но не больше, чем влезает по высоте сцены: верх листа = (126.5 − D + высота листа) мм, 16px — воздух сверху. Так А5 на низком экране/панели ужимается целиком, а не режется. */
#calc:has(#kind input[value="1"]:checked) .pre-stage{--D:56;--mm:min(1.85px,calc((100cqh - 16px) / (126.5 - var(--D) + var(--hmm))))}
#calc:has(#size[data-mode="sheet"] input[value="1"]:checked) .pre-stage{--D:78}
#calc:has(#size[data-mode="sheet"] input[value="2"]:checked) .pre-stage{--D:102}
/* стикеры: верх подложки = (188.7 − D) мм + 0.7 высоты кадра */
#calc:has(#kind input[value="0"]:checked) .pre-stage{--D:100;--mm:min(2.5px,calc((100cqh - 16px) / (88.7 + var(--hmm) * .7)))}
/* без наклона: на фото лист стоит ровно, а запястье срезано горизонтально по низу */
.pre-hand{position:absolute;z-index:2;bottom:calc(-1 * var(--drop));left:calc(var(--ax) - 53.2 * var(--mm));width:calc(84.5 * var(--mm));height:auto;pointer-events:none;
    transition:left .35s cubic-bezier(.3,1.4,.5,1)}
/* без drop-shadow: с маской тень обрезалась по рамке картинки — на листе был серый прямоугольник */
/* лист: нижний левый угол — в щепоти */
.pre-stage>img:not(.pre-hand),.pre-stage>i{display:none;position:absolute;z-index:1;left:var(--ax);bottom:var(--lift);
    height:var(--sh);width:auto;border-radius:4px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));
    animation:prePop .45s cubic-bezier(.3,1.5,.5,1);transition:height .35s cubic-bezier(.3,1.4,.5,1),left .35s cubic-bezier(.3,1.4,.5,1)}
/* пак: на фото kind-1 лист занимает x 5–303 из 309 и y 6–395 из 400 и он шире А-формата (0.77 против 0.707). Кадр растягиваем так, чтобы сам ЛИСТ был ровно --sw × --sh (поджатие по ширине ~8%), и сдвигаем на поля фото. Край листа — ровно по краю карточки на фото (+0.3 мм против щели): указательный палец обрезан этим краем, лист левее — палец «обрывается» на бумаге. */
.pre-stage>img.pre--p0,.pre-stage>i.pre--p1,.pre-stage>i.pre--p2{
    height:calc(var(--sh) * 400 / 390);width:calc(var(--sw) * 309 / 299);aspect-ratio:auto;border-radius:0;
    left:calc(var(--ax) - var(--sw) * 5 / 299 + .45 * var(--mm));   /* край листа = обрез указательного в файле ретушёра (x 229 из 361 кадра, +0.45 мм от края бывшей карточки) */bottom:calc(var(--lift) - var(--sh) * 5 / 390 - .3 * var(--mm))}
/* стикеры держит ВТОРАЯ рука — пустая щепоть (img/calc/hand-pinch.webp, исходник на чёрном): стикер встаёт между большим и указательным, за пальцами — вырезать ничего не пришлось. Масштаб — по ногтю большого пальца, как у руки с листом (12.6 мм; 60 px → 4.76 px/мм). Кадр y 248–1180: 101 × 195.8 мм. Над ногтем большого — кончик указательного, щепоть: 86.6 мм от левого края, верх указательного — 195.4 мм от низа. */
/* стикер ЗАЖАТ: указательный сзади, большой спереди. Рука — два слоя: вся рука под стикером (z 0), сверху только большой палец (hand-pinch-front.webp, та же геометрия кадра, z 3). Стикер — между ними. */
.pre-hand--pinch{display:none;z-index:0;left:calc(50% - 88 * var(--mm));width:calc(101.5 * var(--mm))}
/* ретушь: кадр y 245–1180, x 293–776 */
.pre-hand--front{z-index:3}
#calc:has(#kind input[value="0"]:checked) .pre-hand--card{display:none}
/* рука с листом отбрасывает тень на бумагу — узкая полоска листа между обрезом указательного и большим пальцем (она есть и на исходном фото) без тени читалась как белый артефакт */
.pre-hand--card{filter:drop-shadow(-1px 1px 1.5px rgba(0,0,0,.45)) drop-shadow(-2px 4px 6px rgba(0,0,0,.28))}
#calc:has(#kind input[value="0"]:checked) .pre-hand--pinch{display:block}
.pre-stage>img.pre--s0,.pre-stage>img.pre--s1,.pre-stage>img.pre--s2{z-index:1;left:50%;translate:-50% 0;bottom:calc(188.7 * var(--mm) - var(--sh) * .3 - var(--drop))}
/* низ подложки уходит за большой палец (верх ногтя 188.7 мм), спереди указательного */
/* что × плёнка: s = стикеры, p = стикерпак; 0 глянец, 1 голография, 2 свечение */
#calc:has(#kind input[value="0"]:checked):has(#mat input[value="0"]:checked) .pre--s0,
  #calc:has(#kind input[value="0"]:checked):has(#mat input[value="1"]:checked) .pre--s1,
  #calc:has(#kind input[value="0"]:checked):has(#mat input[value="2"]:checked) .pre--s2,
  #calc:has(#kind input[value="1"]:checked):has(#mat input[value="0"]:checked) .pre--p0,
  #calc:has(#kind input[value="1"]:checked):has(#mat input[value="1"]:checked) .pre--p1,
  #calc:has(#kind input[value="1"]:checked):has(#mat input[value="2"]:checked) .pre--p2{display:block}
/* размер в мм по высоте картинки. Пак: высота листа А7/А6/А5 = 105/148/210. Стикер: фото на белой подложке, стикер занимает ~62% кадра — высота кадра = сторона / 0.62. «Свой размер» — как 30 мм. */
#calc:has(#size[data-mode="sheet"] input[value="0"]:checked) .pre-stage{--hmm:105}
#calc:has(#size[data-mode="sheet"] input[value="1"]:checked) .pre-stage{--hmm:148}
#calc:has(#size[data-mode="sheet"] input[value="2"]:checked) .pre-stage{--hmm:210}
#calc:has(#size[data-mode="size"] input[value="0"]:checked) .pre-stage{--hmm:16}
#calc:has(#size[data-mode="size"] input[value="1"]:checked) .pre-stage{--hmm:24}
#calc:has(#size[data-mode="size"] input[value="2"]:checked) .pre-stage{--hmm:32}
#calc:has(#size[data-mode="size"] input[value="3"]:checked) .pre-stage{--hmm:40}
#calc:has(#size[data-mode="size"] input[value="4"]:checked) .pre-stage{--hmm:81}
#calc:has(#size[data-mode="size"] input[value="5"]:checked) .pre-stage{--hmm:48}
/* Заглушки до настоящих фото: пак на голографии и на свечении собраны из фото белого пака. Голография — радужный перелив поверх листа (multiply), маска по силуэту листа; свечение — стикеры в салатовый + ореол. */
.pre-stage>i{aspect-ratio:309/400;background:url(../img/calc/kind-1.webp) center/100% 100% no-repeat;
    -webkit-mask:url(../img/calc/kind-1.webp) center/100% 100% no-repeat;mask:url(../img/calc/kind-1.webp) center/100% 100% no-repeat}
.pre-stage .pre--p1{background-image:linear-gradient(115deg,rgba(255,140,210,.5),rgba(130,200,255,.5) 35%,rgba(170,255,200,.45) 60%,rgba(255,225,130,.5) 85%),url(../img/calc/kind-1.webp);
    background-size:100% 100%;background-blend-mode:multiply,normal}
.pre-stage .pre--p2{filter:hue-rotate(38deg) saturate(1.6) brightness(1.06) drop-shadow(0 0 14px rgba(190,255,90,.55)) drop-shadow(0 18px 24px rgba(0,0,0,.45))}
@media(prefers-reduced-motion:reduce){
  .pre-stage>*{animation:none!important;transition:none!important}
}
@media(max-width:1000px){
  .calc__pre{display:none}
}
.calc__sum .btn{margin-top:0}
/* переворот правого листа: лицо — расчёт, оборот — оформление. 3D-поворот по вертикальной оси, высота = лицевая сторона (оборот занимает ту же ячейку сетки) */
.calc__flip{display:grid;perspective:1800px}
.calc__flip>.calc__sum,.calc__flip>.calc__back{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    transition:transform .8s cubic-bezier(.6,0,.2,1)}
.calc__back{transform:rotateY(180deg)}
.calc__flip.is-back>.calc__sum{transform:rotateY(-180deg)}
.calc__flip.is-back>.calc__back{transform:rotateY(0)}
@media(prefers-reduced-motion:reduce){
  .calc__flip>*{transition:opacity .2s}
  .calc__back{opacity:0}
  .calc__flip.is-back>.calc__back{opacity:1}
  .calc__flip.is-back>.calc__sum{opacity:0}
}
.calc__back{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,28px);color:#f3f1ec;
    background:linear-gradient(128deg,#25272a,#1b1c1e 50%,#222326);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 40px -28px rgba(0,0,0,.6)}
.calc__ret{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border:0;border-radius:99px;background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.75);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.calc__ret:hover{background:rgba(255,255,255,.12);color:#fff}
.calc__ret:hover .arr{transform:translateX(-3px)}
.ord__sum{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ord__sum .calc__pick{margin-bottom:10px}
.ord__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.ord__price span{font-size:13px;color:rgba(255,255,255,.55)}
.ord__price b{font-family:var(--font-head);font-weight:800;font-size:30px;line-height:1}
.ord__price small{flex-basis:100%;font-size:13px;color:rgba(255,255,255,.55)}
.calc__back .fld{margin-bottom:0}
.calc__back .agree{margin:2px 0 4px}
/* оборот в двух режимах: заказ (по «Оформить заказ») и индивидуальный расчёт (по корешку «Большой тираж?») */
.calc__back .ord--big{display:none}
.calc__back.is-big .ord--big{display:revert}
.calc__back.is-big .ord--order{display:none}
.calc__back.is-big .fld.ord--big{display:grid}
.ord__big{margin:0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.7)}
.ord__note{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.5);text-align:center}
/* кнопка в тёмной панели — плоская, без жёлтого «бортика» снизу, со стрелкой в круге; на hover стрелка уезжает вправо, кнопка чуть светлеет. Только здесь — общий .btn--y не трогаем. */
.calc__min{font-size:13px;color:rgba(255,255,255,.6);text-align:center}
.calc__min a{display:block;width:fit-content;margin:6px auto 0;color:inherit;text-decoration:underline;text-underline-offset:3px}
/* отдельной строкой: на мобилке «·» повисал в конце строки */
/* корешок: линия перфорации (точки) с полукруглыми вырубками по краям листа, под ней — строка-ссылка */
.calc__stub{position:relative;display:block;margin:6px calc(-1 * clamp(20px,2vw,28px)) calc(-1 * clamp(20px,2vw,28px));
    padding:16px clamp(20px,2vw,28px) clamp(16px,1.6vw,20px);font-size:13px;line-height:1.4;color:rgba(255,255,255,.6);text-decoration:none;
    background:radial-gradient(circle,rgba(255,255,255,.28) 1px,transparent 1.4px) 0 0/7px 2px repeat-x;transition:color .2s}
.calc__stub::before,.calc__stub::after{content:"";position:absolute;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--paper)}
.calc__stub::before{left:-6px}
.calc__stub::after{right:-6px}
.calc__stub b{color:#f3f1ec;font-weight:700}
.calc__back{position:relative}
.calc__stub--back{margin-top:auto;pointer-events:none}
/* прижат к низу оборота — на той же высоте, что корешок лица */
.calc__stub:hover{color:#f3f1ec}
.calc__stub .arr{color:var(--y)}
.calc__stub:hover .arr{transform:translateX(3px)}
.big{margin-top:14px;display:flex;align-items:center;gap:24px;padding:24px clamp(24px,3vw,44px);border-radius:var(--r-card);background:var(--y)}
.big b{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.4vw,36px);line-height:1}
.big p{margin:0;flex:1;max-width:52ch}
@media(min-width:1000px){
  /* ── калькулятор в высоту экрана (десктоп): заголовок и лид в строку, опции в 2 колонки, всё плотнее ── */
  #calc{padding-top:clamp(48px,6vw,96px);scroll-margin-top:calc(20px - clamp(48px,6vw,96px))}
  /* по якорю — лист в 20px от верха */
  #calc .h2{font-size:clamp(36px,3.2vw,50px)}
  #calc .lead{max-width:56ch;font-size:16px}
  #calc .calc__main{padding:clamp(20px,2vw,28px)}
  #calc .calc__sum{padding:clamp(20px,2vw,28px);gap:10px}
  #calc .calc__title{font-size:clamp(24px,2vw,30px);margin-bottom:4px}
  #calc .calc__price b{font-size:clamp(44px,3.6vw,58px)}
  /* цену мельче — с заголовком и чипами она перебивала панель */
  #calc .big b{font-size:clamp(20px,1.7vw,26px)}
  #calc .big p{font-size:14px}
  #calc .big .btn{height:44px;padding:0 18px;font-size:15px;margin-left:auto;flex:none}
  #calc .big p{max-width:62ch}
}
@media(max-width:1000px){
  .calc__box{grid-template-columns:1fr}
}
@media(max-width:700px){
  #calc .tiles--2,#calc .tiles--3{grid-template-columns:1fr}
  #calc #pack{grid-auto-flow:row}
  #calc #size,#calc #qty{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 7–9 ячеек в ряд на телефоне не влезают */
  #calc #qty{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 7 вариантов + «своё» ровно в 3 ряда, без висящей ячейки */
  #calc #size[data-mode="size"] .chip:has(.own){grid-column:span 3}
  /* «Свой размер» — до конца ряда: на 375px в 2 ячейки текст обрезался */
  #calc .chip .own{padding:0 10px}
  /* мобилка: плитки вертикальные — фото сверху (торчит над плиткой, как на десктопе), текст снизу; по 2 в ряд. Нечётная последняя плёнка — на всю ширину, горизонтальной. Форматы листа — 3 в ряд, тоже вертикально */
  #calc .calc__opts{gap:22px}
  /* плотнее: фото плиток может заходить на подпись группы */
  #calc .tiles--2,#calc .tiles--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;row-gap:18px;padding-top:16px}
  /* фото не заходит на подпись группы */
  #calc .tile__in{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;min-height:112px;padding:62px 12px 11px}
  #calc .tile__ph,#calc .tiles--3 .tile__ph,#calc .tile__ph:has(img[src*="kind-0"]){position:absolute;left:0;right:0;top:-16px;width:auto;height:76px;margin:0}
  #calc .tile__ph img,#calc .tiles--3 .tile__ph img{bottom:0;height:80px;width:auto}
  #calc .tiles--3 .tile__ph img{width:62px;height:80px}
  #calc .tile b,#calc .tiles--3 .tile b{font-size:14.5px}
  #calc .tile em,#calc .tiles--3 .tile em{font-size:12px;line-height:1.25}
  #calc #mat{grid-template-columns:1fr;row-gap:10px;padding-top:0}
  /* плёнка — горизонтальными плитками в столбик */
  #calc #mat .tile__in{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;min-height:0;padding:10px 12px 10px 10px}
  #calc #mat .tile__ph{position:relative;top:auto;flex:none;width:76px;height:58px}
  #calc #mat .tile__ph img{bottom:-17px}
  #calc #size[data-mode="sheet"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:0}
  /* А5 торчит вверх справа — там подпись группы уже кончилась */
  #calc #size .chip:nth-child(1) .fmt{--w:28px;--h:36px}
  #calc #size .chip:nth-child(2) .fmt{--w:40px;--h:51px}
  #calc #size .chip:nth-child(3) .fmt{--w:56px;--h:73px}
  /* те же пропорции А7:А6:А5, мельче */
  #calc #size[data-mode="sheet"] .chip span{height:auto;min-height:96px;padding:50px 8px 9px;align-items:center;justify-content:flex-end;text-align:center;font-size:15px}
  #calc #size[data-mode="sheet"] .chip span small{font-size:12px}
  #calc #size[data-mode="sheet"] .fmt{left:50%;bottom:auto;top:calc(44px - var(--h))}
  #calc .grp--x{grid-template-columns:1fr}
  #calc .grp--x .check{grid-column:auto}
  #calc .grp--x .calc__art{margin:2px 0 0}
  .big{flex-direction:column;align-items:flex-start}
}
/* макет: кнопка-поле в стиле инпутов, список файлов с удалением; перетаскивание на весь блок */
.file__lab{font-size:13px;font-weight:600;color:rgba(255,255,255,.6)}
.file__lab em{font-style:normal;font-weight:500;color:rgba(255,255,255,.4)}
.file__btn{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#f3f1ec;font-size:15px;font-weight:600;cursor:pointer;transition:box-shadow .2s,background .2s}
.file__btn:hover,.file.is-over .file__btn{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1.5px var(--y)}
.file__btn:has(input:focus-visible){box-shadow:inset 0 0 0 1.5px var(--y)}
.file__btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file__btn svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--y);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.file__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.file__list li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:10px;background:rgba(255,255,255,.06);font-size:13.5px}
.file__list span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file__list small{flex:none;color:rgba(255,255,255,.5)}
.file__list button{flex:none;all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:rgba(255,255,255,.7)}
.file__list button:hover,.file__list button:focus-visible{background:rgba(255,255,255,.1);color:#fff}
.file__err:not(:empty){display:block}
@media(max-width:374px){
  /* «заказать» — только стрелкой, место заголовку корешка (aria-label у ссылки есть) */
  #calc .chip span{font-size:14.5px}
}
@media(max-width:1000px){
  /* лицо и оборот калькулятора в одну колонку: высоту задаёт видимая сторона, а не большая из двух (иначе под итогом пустота) */
  .calc__flip{position:relative}
  .calc__flip:not(.is-back)>.calc__back,.calc__flip.is-back>.calc__sum{position:absolute;inset:0 0 auto}
}
@keyframes prePop{from{scale:.88;opacity:.4}to{scale:1;opacity:1}}