/* Экран расчёта в языке fiftyfourms.com/inspiration:
   тёмный фон целиком, центрированная шапка, капс с разрядкой,
   тонкие начертания, пилюли и карточки со скруглением. */

/* Philosopher — шрифт с сайта FiftyFourms, открытая лицензия OFL.
   GT America у них коммерческий, его лицензия на наш домен не распространяется:
   вместо него Onest — близкий по характеру гротеск с тонкими начертаниями. */
@font-face { font-family:'Philosopher'; font-weight:400;
  src:url('/fonts/Philosopher-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Philosopher'; font-weight:700;
  src:url('/fonts/Philosopher-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Onest'; font-weight:100 900;
  src:url('/fonts/Onest.ttf') format('truetype'); font-display:swap; }

:root {
  --bg:#181818;          /* фон страницы */
  --surface:#1F1F1F;     /* карточки и поля */
  --surface-2:#242424;   /* строки таблицы через одну */
  --line:#2E2E2E;
  --ink:#E8E8E8;
  --muted:#969696;
  --cool:#AEB8C2;        /* холодный вторичный */
  --accent:#D9722B;      /* терракота, осветлённая под тёмный фон */
  --gold:#F0A15B;        /* окантовка полей и кнопок */
  --paper:#F7F1EA;       /* светлые поля ввода */
  --ink-dark:#241A15;
  --danger:#E0654F;
  --warn:#D9A441;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --r:14px; --rp:999px;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; background:var(--bg); }
body { color:var(--ink); font-family:'Onest',sans-serif;
       font-size:16px; font-weight:300; line-height:1.5;
       -webkit-font-smoothing:antialiased; }

/* ── Шапка ─────────────────────────────────────────────────────── */
.kp-top { padding:var(--s4) var(--s5) var(--s6); text-align:center; }
.kp-top__bar { display:flex; align-items:center; justify-content:space-between;
               gap:var(--s3); padding-bottom:var(--s5);
               border-bottom:1px solid var(--line); margin-bottom:var(--s6); }
.kp-logo { font-size:15px; font-weight:300; letter-spacing:.34em;
           text-transform:uppercase; color:var(--ink); text-decoration:none; }
.kp-logo b { font-weight:500; }
.kp-top__meta { font-size:12px; letter-spacing:.12em; text-transform:uppercase;
                color:var(--muted); }
.kp-h1 { font-family:'Philosopher',serif; font-size:clamp(30px,3.6vw,46px);
         font-weight:400; letter-spacing:.06em; text-transform:uppercase;
         line-height:1.2; color:var(--cool); margin:0 auto var(--s3); max-width:22ch; }
.kp-h1 em { font-style:normal; color:var(--gold); }
.kp-sub { color:var(--ink); font-weight:300; font-size:16px;
          max-width:64ch; margin:0 auto; }

/* ── Пилюли ────────────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
        min-height:44px; padding:11px 26px; border-radius:var(--rp);
        border:1px solid var(--line); background:transparent; color:var(--ink);
        font:inherit; font-size:13px; font-weight:400; letter-spacing:.1em;
        text-transform:uppercase; cursor:pointer; text-decoration:none;
        transition:background .2s ease, color .2s ease, border-color .2s ease; }
.pill:hover { border-color:var(--cool); color:#fff; }
/* Окантовка у всех кнопок: золото держит их вместе с полями в одном языке */
.pill { border-color:var(--gold); color:var(--gold); }
.pill:hover { border-color:#FFC489; color:#FFC489; background:rgba(240,161,91,.08); }
.pill--light { background:var(--paper); border-color:var(--gold); color:var(--ink-dark); }
.pill--light:hover { background:#fff; border-color:#FFC489; color:var(--ink-dark); }
.pill--accent { background:var(--accent); border-color:var(--gold); color:#fff; }
.pill--accent:hover { background:var(--gold); border-color:var(--gold); color:#181818; }
.pill[disabled] { opacity:.45; cursor:not-allowed; }
.pill:focus-visible, .field:focus-visible, td[contenteditable]:focus-visible,
.ph-cap:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* ── Рабочая зона ─────────────────────────────────────────────── */
.kp-work { max-width:1320px; margin:0 auto; padding:0 var(--s5) var(--s6);
           display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--s5);
           align-items:start; }
.eyebrow { font-size:11px; font-weight:400; letter-spacing:.18em;
           text-transform:uppercase; color:var(--muted); margin:0 0 var(--s2); }
h2.kp-h2 { font-family:'Philosopher',serif; font-size:25px; font-weight:400;
           letter-spacing:.03em; margin:0 0 var(--s3); color:var(--ink); }

.drop { border:1px dashed var(--line); border-radius:var(--r);
        background:var(--surface); padding:var(--s5); text-align:center;
        transition:border-color .2s, background .2s; }
.drop.is-over { border-color:var(--gold); background:#202020; }
.drop p { margin:0 0 var(--s3); color:var(--muted); }
.drop textarea { width:100%; min-height:96px; padding:var(--s3);
                 border-radius:var(--r); border:1px solid var(--gold);
                 background:var(--paper); color:var(--ink-dark);
                 font:inherit; font-size:15px; resize:vertical; }
.drop textarea::placeholder { color:#9A8B80; }
.drop textarea:focus { outline:none; border-color:#FFC489;
                       box-shadow:0 0 0 3px rgba(240,161,91,.22); }

/* ── Таблица позиций ──────────────────────────────────────────── */
/* Таблица шире экрана и скроллится внутри себя. Чтобы она не тянула
   за собой всю страницу, каждому звену до неё запрещено расширяться. */
.kp-work > div, .kp-work section { min-width:0; }
.tbl-wrap { width:100%; max-width:100%; overflow:auto;
            -webkit-overflow-scrolling:touch; background:var(--surface);
            border:1px solid var(--line); border-radius:var(--r);
            /* contain отсекает влияние широкой таблицы на ширину страницы */
            contain:paint; }
table.items { width:100%; border-collapse:separate; border-spacing:0;
              font-size:14px; min-width:834px; table-layout:fixed; }

/* Ширины заданы явно: у пустых ячеек нет содержимого, и колонки
   схлопывались, разъезжаясь при каждом вводе. */
.c-n     { width:40px; }
.c-mat   { width:132px; }
.c-dim   { width:78px; }
.c-shape { width:110px; }
.c-qty   { width:66px; }
.c-calc  { width:66px; }
.c-del   { width:42px; }

table.items th { text-align:left; padding:15px 8px; white-space:nowrap;
                 font-size:10px; font-weight:400; letter-spacing:.12em;
                 text-transform:uppercase; color:#8A8A8A;
                 border-bottom:1px solid var(--line); background:#1C1C1C; }
table.items th:first-child { border-top-left-radius:var(--r); }
table.items th:last-child  { border-top-right-radius:var(--r); }
table.items td { padding:7px 6px; border-bottom:1px solid #262626;
                 vertical-align:middle; color:var(--ink); }
table.items tr:last-child td { border-bottom:none; }
table.items tbody tr:hover td { background:#1E1E1E; }

/* Редактируемая ячейка выглядит полем: иначе непонятно, куда писать.
   display:block на td ломает табличную раскладку — оформляем саму ячейку. */
td.cell[contenteditable] { padding:11px 10px; border:1px solid #333;
  border-radius:8px; background:#1A1A1A; cursor:text; line-height:20px;
  transition:border-color .16s ease, background .16s ease; }
td.cell[contenteditable]:hover { border-color:#4A4A4A; background:#202020; }
td.cell[contenteditable]:focus { outline:none; border-color:var(--gold);
  background:#161616; box-shadow:0 0 0 3px rgba(240,161,91,.16); }
td.cell[contenteditable]:empty::before { content:attr(data-ph); color:#5E5E5E; }
td.num.cell[contenteditable] { text-align:right; }

table.items select { width:100%; padding:10px 26px 10px 10px; min-height:42px;
  border:1px solid #333; border-radius:8px; background:#1A1A1A;
  color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A8A' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; }
table.items select:hover { border-color:#4A4A4A; }
table.items select:focus { outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,161,91,.16); }
table.items select option { background:var(--surface); }

td.c-n { color:#7A7A7A; font-variant-numeric:tabular-nums; }
td.c-calc { color:var(--cool); font-variant-numeric:tabular-nums; }
td.num, th.num { text-align:right; }
th.c-shape, td.c-shape { text-align:left; }

tr.row--bad td { background:#241C1A; }
tr.row--bad td.c-n { box-shadow:inset 3px 0 0 var(--danger); }
tr.row--bad td.cell[contenteditable] { border-color:#5A3A34; }

.row-del { border:none; background:none; cursor:pointer; color:#5E5E5E;
           font-size:20px; line-height:1; width:36px; height:36px;
           border-radius:50%; transition:color .16s, background .16s; }
.row-del:hover { color:var(--ink); background:#2E2E2E; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden;
                   clip:rect(0 0 0 0); white-space:nowrap; }

.flag { display:flex; align-items:flex-start; gap:7px; margin:7px 2px 2px;
        font-size:12px; line-height:1.35; }
.flag::before { content:''; width:5px; height:5px; border-radius:50%;
                flex:none; margin-top:6px; }
.flag--danger { color:var(--danger); } .flag--danger::before { background:var(--danger); }
.flag--warn { color:var(--warn); } .flag--warn::before { background:var(--warn); }

/* ── Фото ─────────────────────────────────────────────────────── */
.photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
          gap:var(--s3); margin:var(--s3) 0 var(--s5); }
.ph-card { position:relative; margin:0; min-width:0; background:var(--surface);
           border-radius:var(--r); overflow:hidden; }
.ph-card img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.ph-card figcaption { padding:10px 12px 12px; }
.ph-cap { width:100%; border:none; background:none; color:var(--ink);
          font:inherit; font-size:13px; font-weight:300; padding:3px 5px;
          border-radius:5px; }
.ph-cap:hover, .ph-cap:focus { background:#2A2A2A; outline:none; }
.ph-del { position:absolute; top:10px; right:10px; width:34px; height:34px;
          border:none; border-radius:50%; background:rgba(0,0,0,.6);
          color:#fff; font-size:17px; line-height:1; cursor:pointer; }
.ph-del:hover { background:rgba(0,0,0,.85); }

/* ── Панель итога ─────────────────────────────────────────────── */
.sum { position:sticky; top:var(--s3); background:var(--surface);
       border:1px solid var(--line); border-radius:var(--r); padding:var(--s4); }
.sum__label { font-size:11px; letter-spacing:.16em; text-transform:uppercase;
              color:var(--muted); }
.sum__total { font-family:'Philosopher',serif; font-size:42px; font-weight:400;
              line-height:1.1; letter-spacing:.01em;
              margin:var(--s1) 0 var(--s4); color:var(--ink); }
.sum__row { display:flex; justify-content:space-between; gap:var(--s3);
            padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
.sum__row:last-of-type { border-bottom:none; }
.sum__row span { color:var(--muted); }
.sum__row b { font-weight:400; font-variant-numeric:tabular-nums; }
.sum__actions { display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s4); }
.sum__actions .pill { width:100%; }
.sum__note { font-size:12.5px; color:var(--muted); margin:var(--s3) 0 0; }
.sum--incomplete { border-color:var(--gold); }

/* Поля светлые с золотой окантовкой: на тёмном фоне они читаются как
   места для ввода, а не как декорация. */
.field { width:100%; min-height:46px; padding:12px 14px; border-radius:10px;
         border:1px solid var(--gold); background:var(--paper); color:var(--ink-dark);
         font:inherit; font-size:15px; font-weight:400; }
.field::placeholder { color:#9A8B80; }
.field option { background:var(--paper); color:var(--ink-dark); }
.field:hover { border-color:#FFC489; }
.field:focus { outline:none; border-color:#FFC489;
               box-shadow:0 0 0 3px rgba(240,161,91,.22); }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2);
          margin-top:var(--s4); }
.fields label { font-size:11px; letter-spacing:.12em; text-transform:uppercase;
                color:var(--muted); display:block; margin-bottom:5px; }

.spin { display:inline-block; width:14px; height:14px; border:2px solid #ffffff55;
        border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

@media (max-width:1080px) {
  .kp-work { grid-template-columns:minmax(0,1fr); }
  .sum { position:static; }
}
@media (max-width:720px) {
  .kp-top { padding:var(--s3) var(--s3) var(--s5); }
  /* На узком экране мета в строку с логотипом ломается на три строки */
  .kp-top__bar { flex-direction:column; gap:var(--s2); text-align:center;
                 padding-bottom:var(--s4); margin-bottom:var(--s5); }
  .kp-top__meta { font-size:11px; }
  .kp-work { padding:0 var(--s3) var(--s5); }
  .fields { grid-template-columns:1fr; }
}

/* ── Витрина изделий ──────────────────────────────────────────── */
.showcase { border-top:1px solid var(--line); margin-top:var(--s6);
            padding:var(--s6) var(--s5) var(--s6); text-align:center; }
.showcase h2 { font-family:'Philosopher',serif; font-size:clamp(24px,2.6vw,32px);
               font-weight:400; letter-spacing:.06em; text-transform:uppercase;
               color:var(--cool); margin:0 0 var(--s2); }
.showcase p.lead { color:var(--muted); max-width:62ch; margin:0 auto var(--s5);
                   font-size:15px; }
.showcase__grid { display:grid; gap:var(--s3); max-width:1320px; margin:0 auto;
                  grid-template-columns:repeat(6,1fr); align-items:stretch; }
/* margin:0 обязателен: у <figure> браузерный отступ 40px по бокам съедал
   ширину карточки. height:auto — иначе атрибут height перебивает пропорцию. */
.sc-card { position:relative; margin:0; min-width:0; text-align:left;
           border-radius:var(--r); overflow:hidden; background:var(--surface);
           display:flex; flex-direction:column; }
.sc-card img { display:block; width:100%; height:auto; aspect-ratio:4/5;
               object-fit:cover; transition:transform .5s ease; }
.sc-card:hover img { transform:scale(1.04); }
.sc-card__body { padding:12px 14px 16px; display:flex;
                 flex-direction:column; flex:1; }
.sc-card__t { font-size:13px; font-weight:400; color:var(--ink);
              letter-spacing:.02em; margin:0 0 3px; }
.sc-card__s { font-size:12px; color:var(--muted); margin:0 0 8px; }
.sc-card__p { font-size:12px; color:var(--gold); letter-spacing:.04em;
              text-transform:uppercase; margin:auto 0 0; }
@media (max-width:1180px) { .showcase__grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px)  { .showcase { padding:var(--s5) var(--s3); }
                            .showcase__grid { grid-template-columns:repeat(2,1fr); } }

/* ── Премиальные детали ───────────────────────────────────────── */

/* Тонкая золотая черта под номером раздела — как засечка на дорогой бумаге */
.eyebrow { position:relative; padding-left:34px; }
.eyebrow::before { content:''; position:absolute; left:0; top:50%;
                   width:24px; height:1px; background:var(--gold); opacity:.75; }

/* Карточки дышат мягкой тенью, без «пластика» */
.sum, .tbl-wrap, .drop { box-shadow:0 1px 2px rgba(0,0,0,.35),
                                    0 12px 32px -18px rgba(0,0,0,.9); }

/* Итог — главное число страницы */
.sum__total { position:relative; padding-bottom:var(--s3); }
.sum__total::after { content:''; position:absolute; left:0; bottom:8px;
                     width:44px; height:1px;
                     background:linear-gradient(90deg,var(--gold),transparent); }

/* Шапка: логотип с волосяной линией снизу вместо жирной границы */
.kp-top__bar { border-bottom-color:#262626; }

/* Витрина: подпись поднимается при наведении */
.sc-card::after { content:''; position:absolute; inset:0; pointer-events:none;
                  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.35));
                  opacity:0; transition:opacity .4s ease; }
.sc-card:hover::after { opacity:1; }

/* Кнопка-действие чуть заметнее остальных */
.pill--light { box-shadow:0 8px 22px -14px rgba(240,161,91,.8); }

/* Заголовки секций — с воздухом сверху, как в печатной вёрстке */
h2.kp-h2 { margin-top:2px; }
.kp-work section + section { margin-top:var(--s5); }

/* Страница не едет вбок ни на одной ширине.
   overflow-x:hidden, заданный и на html, и на body, переносится браузером
   на окно и перестаёт работать — clip обрезает, не создавая скролл-контекст. */
body { max-width:100%; overflow-x:clip; }

/* ── Преимущества плёнки ──────────────────────────────────────── */
.benefits { border-top:1px solid var(--line); margin-top:var(--s6);
            padding:var(--s6) var(--s5) 0; }
.benefits__head { max-width:70ch; margin:0 auto var(--s5); text-align:center; }
.benefits__head .eyebrow { display:inline-block; padding-left:34px; }
.benefits h2 { font-family:'Philosopher',serif; font-size:clamp(24px,2.6vw,32px);
               font-weight:400; letter-spacing:.06em; text-transform:uppercase;
               color:var(--cool); margin:0 0 var(--s3); }
.benefits .lead { color:var(--muted); font-size:15px; margin:0; }
.benefits__grid { display:grid; grid-template-columns:repeat(3,1fr);
                  gap:var(--s3); max-width:1320px; margin:0 auto; }
.bf { background:var(--surface); border:1px solid rgba(240,161,91,.38);
      border-radius:var(--r); padding:var(--s4);
      transition:border-color .22s ease, background .22s ease; }
.bf:hover { border-color:var(--gold); background:#212121; }
.bf__ico { display:inline-flex; align-items:center; justify-content:center;
           width:46px; height:46px; margin-bottom:var(--s3);
           border:1px solid rgba(240,161,91,.4); border-radius:50%;
           color:var(--gold); }
.bf__ico svg { width:26px; height:26px; }
.bf h3 { font-size:16px; font-weight:500; letter-spacing:.01em; color:var(--ink);
         margin:0 0 10px; line-height:1.35; }
.bf p { font-size:13.5px; line-height:1.65; color:var(--muted); margin:0; }
.benefits__facts { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
                   max-width:1320px; margin:var(--s5) auto 0;
                   padding-top:var(--s5); border-top:1px solid var(--line); }
.bfact { text-align:left; }
.bfact b { display:block; font-family:'Philosopher',serif; font-size:24px;
           font-weight:400; color:var(--gold); margin-bottom:6px; }
.bfact span { font-size:12.5px; line-height:1.5; color:var(--muted); }
@media (max-width:1180px) { .benefits__grid { grid-template-columns:repeat(2,1fr); }
                            .benefits__facts { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px)  { .benefits { padding:var(--s5) var(--s3) 0; }
                            .benefits__grid { grid-template-columns:1fr; }
                            .benefits__facts { grid-template-columns:1fr; gap:var(--s4); } }

/* ── Контакты в шапке ─────────────────────────────────────────── */
.kp-contacts { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
               justify-content:flex-end; }
/* Контакты — фирменные кнопки: золотая окантовка держит их в одном языке
   со всей страницей, иконки остаются узнаваемо своими. */
.kp-contact { display:inline-flex; align-items:center; gap:9px; min-height:46px;
              padding:11px 22px; border:1px solid rgba(240,161,91,.45);
              border-radius:var(--rp); color:var(--ink); text-decoration:none;
              font-size:14px; letter-spacing:.03em; white-space:nowrap;
              background:rgba(240,161,91,.05); position:relative;
              transition:border-color .2s ease, color .2s ease,
                         background .2s ease, transform .2s ease; }
.kp-contact:hover { border-color:var(--gold); background:rgba(240,161,91,.12);
                    transform:translateY(-1px); }
.kp-contact:active { transform:translateY(0); }

/* Телефон — главный контакт: чуть плотнее и с золотым числом */
.kp-contact--tel { font-variant-numeric:tabular-nums; font-size:15px;
                   letter-spacing:.04em; color:var(--gold);
                   border-color:rgba(240,161,91,.65); }
.kp-contact--tel:hover { background:var(--gold); color:#181818;
                         border-color:var(--gold); }

.kp-contact svg { flex:none; }
.kp-contact--wa svg { color:#4FBF6A; }
.kp-contact--tg svg { color:#5BA9E0; }
.kp-contact--wa:hover { border-color:#4FBF6A; background:rgba(79,191,106,.12); }
.kp-contact--tg:hover { border-color:#5BA9E0; background:rgba(91,169,224,.12); }
.kp-top__meta--under { margin:var(--s3) 0 0; font-size:11px; }

@media (max-width:900px) {
  .kp-contacts { width:100%; justify-content:center; }
  .kp-contact { padding:9px 14px; font-size:13px; }
}

/* У круга одна величина — диаметр. Поле ширины закрыто прочерком. */
td.c-na { color:#4E4E4E; text-align:right; padding:11px 10px; }
.th-alt { color:#6E6E6E; }

/* Кнопка Telegram */
.pill--tg:hover { border-color:#5BA9E0; color:#5BA9E0; background:rgba(91,169,224,.09); }
.pill--tg svg { flex:none; }