/**
 * Калькулятор вартості — стилі з макета _mockups/calc-v7.html.
 *
 * Перенесено без зміни вигляду, але все загорнуто в .gtk-calc: Astra
 * фарбує кнопки, поля, h1, dialog і output, а селектор із контейнером
 * дає більшу специфічність і перебиває її без !important.
 *
 * Змінні макета лишилися локальними на .gtk-calc і зведені до токенів
 * теми: --accent = --gtk-bronze, --ink = --gtk-ink, --cream = --gtk-cream.
 *
 * Шрифти Cormorant Garamond і Lora тема вже вантажить — тут лише
 * посилання на сімейства.
 */

.gtk-calc{--accent:var(--gtk-bronze,#A87444);
    --ink:var(--gtk-ink,#2B2B2B);
    /*
     * Приглушений текст і волосінь — токенами теми, а не власними числами.
     *
     * Три відтінки сірого й свій колір лінії залишалися від макета: поруч із
     * каталогом калькулятор через це виглядав трохи іншим сайтом. --muted і
     * --soft тепер один токен: у дизайн-системі приглушений текст один.
     */
    --muted:var(--gtk-text-muted,#707070);
    --soft:var(--gtk-text-muted,#707070);
    --cream:var(--gtk-cream,#F2E6D9);
    --hair:var(--gtk-line,rgba(43,43,43,.14));
    --paper:var(--gtk-sand,#FFFFFF);
    --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    --text:"Lora",Georgia,serif;
    accent-color:var(--accent);}
.gtk-calc *{box-sizing:border-box}
/*
 * Рівні цифри замість старостильних.
 *
 * Cormorant типово малює цифри старостильними: «3» і «9» опускаються
 * нижче рядка, «1» і «2» лишаються на висоті х. У суцільному тексті це
 * гарно, а в калькуляторі кожне число — розмір або ціна, і стрибаючий
 * ряд цифр читається як помилка набору.
 */
.gtk-calc{font-family:var(--text);color:var(--gtk-text,#5A5A5A);background:var(--paper);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
.gtk-calc{max-width:1320px;margin:0 auto;padding:40px 48px 120px}
/* ── header ── */
.gtk-calc .crumbs{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.gtk-calc .crumbs a{color:inherit;text-decoration:none}
.gtk-calc .crumbs span{margin:0 .5em}
.gtk-calc .head{margin:72px 0 28px}
.gtk-calc .eyebrow{margin:0 0 16px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.gtk-calc h1{font-family:var(--serif);font-weight:var(--gtk-weight-display,500);font-size:clamp(44px,5.6vw,76px);line-height:.98;margin:0;letter-spacing:-.015em}
.gtk-calc h1 em{font-style:normal;color:var(--accent)}
.gtk-calc .lede{max-width:52ch;margin:22px 0 0;color:var(--muted);font-size:16px;line-height:1.75}
.gtk-calc .tabs{display:flex;gap:40px;margin:48px 0 72px}
.gtk-calc .tab{position:relative;padding:6px 0 10px;cursor:pointer;background:none;border:0;font:inherit;color:var(--soft);text-align:left;transition:color .15s}
.gtk-calc .tab i{display:block;font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--accent);margin-bottom:4px;opacity:.7}
.gtk-calc .tab b{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1;letter-spacing:-.01em}
.gtk-calc .tab:hover{color:var(--ink)}
.gtk-calc .tab[aria-selected=true]{color:var(--ink)}
.gtk-calc .tab[aria-selected=true]::after{content:"";position:absolute;left:0;width:28px;bottom:0;height:1px;background:var(--ink)}
.gtk-calc .tab:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* ── layout ── */
.gtk-calc .calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:96px;align-items:start}
/* ── visual ── */
.gtk-calc .visual{position:sticky;top:32px}
.gtk-calc .stage{position:relative;aspect-ratio:3/2;overflow:hidden}
.gtk-calc .stage svg{position:absolute;inset:0;width:100%;height:100%}
.gtk-calc .stage.fade svg{animation:fade .4s ease}
@keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.gtk-calc .caption{margin-top:8px;padding-top:22px;border-top:1px solid var(--hair)}
/*
 * Креслення окремим рядом, а не збоку від назви.
 *
 * Поруч із назвою каменю їм лишалося кілька сотень пікселів, і розріз
 * доводилося тиснути до 200px — деталь, заради якої розріз і малюють,
 * зникала. Власний ряд дає ширину лівої колонки, і схеми можна показати
 * у розмірі, у якому вони читаються.
 *
 * Висоту задає aspect-ratio за viewBox, а не пара фіксованих чисел: так
 * SVG не спотвориться, хоч би до якої ширини його стиснуло.
 */
.gtk-calc .drawings{display:grid;grid-template-columns:minmax(0,340px) minmax(0,240px);gap:clamp(24px,4vw,48px);align-items:end;margin-top:18px;padding-top:20px;border-top:1px solid var(--hair)}
.gtk-calc .caption .name{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.05;margin:0}
.gtk-calc .caption .name small{display:block;font-family:var(--text);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.gtk-calc .caption .spec-line{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.9}
.gtk-calc .drawings figure{margin:0}
.gtk-calc .drawings svg{display:block;width:100%;height:auto}
.gtk-calc .profile svg{aspect-ratio:230/124}
.gtk-calc .drawings figcaption{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-top:6px}
/* ── form ── */
.gtk-calc .field{margin-bottom:44px}
.gtk-calc .label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.gtk-calc .label i{font-style:normal;color:var(--accent);margin-right:12px;opacity:.8}
.gtk-calc .label em{font-style:normal;color:var(--ink);letter-spacing:0;text-transform:none;font-family:var(--serif);font-size:20px}
.gtk-calc .swatches{display:flex;gap:26px;flex-wrap:wrap}
.gtk-calc .swatch{position:relative;cursor:pointer;width:108px}
.gtk-calc .swatch input{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
/*
 * display:block тут не косметика, а умова, щоб рамка взагалі з'явилася.
 *
 * .ph — це span, тобто рядковий елемент. Ширина, aspect-ratio й overflow
 * на такому не діють зовсім, а outline малюється навколо рядкового боксу —
 * навколо висоти рядка, а не навколо знімка. Виходив бронзовий
 * прямокутник 14×20 px збоку від підпису. Поки рамки не було, ніхто цього
 * не помічав: знімок усередині сам блоковий і займав своє місце.
 */
.gtk-calc .swatch .ph{display:block;width:108px;aspect-ratio:1;overflow:hidden;opacity:.72;transition:opacity .2s}
.gtk-calc .swatch .ph img{width:100%;display:block}
.gtk-calc .swatch:hover .ph{opacity:1}
/*
 * Обраний камінь — у рамці, а не збільшений.
 *
 * Було scale(1.04) плюс знята прозорість: на широкому екрані різницю ще
 * можна вловити, на телефоні три текстури стоять поруч, і чотири відсотки
 * масштабу разом із восьмистами тисячними прозорості не читаються ніяк.
 * Гірше: збільшення зрушувало сусідні підписи на пів пікселя, і при зміні
 * вибору ряд ледь помітно смикався.
 *
 * Рамка нічого не зрушує — outline малюється поза потоком, — і видно її з
 * будь-якої відстані. Зазор у чотири пікселі лишає між каменем і рамкою
 * білу смужку, інакше бронза читалася б як частина текстури.
 */
.gtk-calc .swatch:has(:checked) .ph{opacity:1;outline:2px solid var(--accent);outline-offset:4px}
/* Підпис теж span — блокуємо з тієї самої причини, що й знімок вище:
   інакше margin, padding і риска рахуються від рядкового боксу. */
.gtk-calc .swatch .t{display:block;margin-top:12px;font-family:var(--serif);font-size:19px;line-height:1.1;font-weight:500;color:var(--muted);transition:color .15s;position:relative;padding-top:10px;white-space:nowrap}
/*
 * Риска на всю ширину назви, а не двадцять чотири пікселі.
 *
 * Коротка риска над словом читалася як декор і на телефоні губилася між
 * підписами. Підкреслена назва на всю ширину — той самий прийом, що вже
 * працює в опціях нижче, тож обраний стан скрізь виглядає однаково.
 */
.gtk-calc .swatch .t::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.gtk-calc .swatch:has(:checked) .t{color:var(--ink);font-weight:600}
.gtk-calc .swatch:has(:checked) .t::before{transform:scaleX(1)}
/*
 * Підпис може заходити в проміжок між зразками.
 *
 * Знімок 108 px, а «дрібнозернистий» на тринадцятому кеглі просить 114.
 * Розширювати сам зразок не можна — розсиплеться ряд із трьох фото.
 * Натомість дозволяємо підпису вийти рівно настільки, скільки дає
 * проміжок: 16 px менше за найвужчий gap (18 px на телефоні), тож на
 * сусідній зразок текст не налізе за жодної ширини екрана.
 */
.gtk-calc .swatch .t small{display:block;font-family:var(--text);font-size:13px;font-weight:400;color:var(--soft);margin-top:5px;letter-spacing:.02em;width:max-content;max-width:calc(100% + 16px);white-space:normal}
/*
 * Фокус із клавіатури — далі від краю, ніж рамка обраного.
 *
 * Обидва кільця бронзові, і на обраному камені вони збігалися б у одне
 * потовщене: незрозуміло, це фокус чи вибір. Вісім пікселів проти
 * чотирьох дають два помітно різні кільця.
 */
.gtk-calc .swatch:has(:focus-visible) .ph{outline:2px solid var(--accent);outline-offset:8px}
.gtk-calc .opts{display:flex;flex-wrap:wrap;gap:4px 30px}
.gtk-calc .opt{position:relative;cursor:pointer;padding:4px 0 6px;font-family:var(--serif);font-size:23px;line-height:1;color:var(--soft);transition:color .15s;display:flex;align-items:baseline;gap:6px}
.gtk-calc .opt input{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.gtk-calc .opt small{font-family:var(--text);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
/*
 * Підкреслення обраного — бронзове, як і в каменів.
 *
 * Чорнильна лінія під чорнильним словом зливалася з ним у одну пляму, і
 * обрана обробка відрізнялася від необраної лише насиченістю сірого.
 * Бронза — єдиний колір, яким на цьому сайті позначено вибір; тепер він
 * однаковий і на текстурах, і на словах.
 */
.gtk-calc .opt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.gtk-calc .opt:hover{color:var(--ink)}
.gtk-calc .opt:has(:checked){color:var(--ink)}
.gtk-calc .opt:has(:checked)::after{transform:scaleX(1)}
.gtk-calc .opt:has(:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.gtk-calc .opts.icons{gap:6px 36px}
.gtk-calc .opts.icons .opt{flex-direction:column;align-items:flex-start;gap:8px;font-size:17px;padding-bottom:8px}
.gtk-calc .opts.icons .opt svg{width:52px;height:24px;display:block}
.gtk-calc .opts.icons .opt svg path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
/* сторони кромки */
.gtk-calc .sides{margin-top:26px}
.gtk-calc .sides[hidden]{display:none}
.gtk-calc .sides .sub{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.gtk-calc .side{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;padding:10px 0;border-top:1px solid var(--hair)}
.gtk-calc .side:last-child{border-bottom:1px solid var(--hair)}
.gtk-calc .side .nm{font-family:var(--serif);font-size:19px}
.gtk-calc .side .nm small{display:block;font-family:var(--text);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.gtk-calc .side .opts{gap:2px 22px}
.gtk-calc .side .opt{font-size:19px;padding:2px 0 4px}
.gtk-calc .side .mm{display:inline-flex;align-items:baseline;gap:4px;margin-left:4px}
.gtk-calc .side .mm input{font-family:var(--serif);font-size:19px;width:3.2ch;border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);padding:0;outline:none;-moz-appearance:textfield;text-align:center}
.gtk-calc .side .mm input::-webkit-outer-spin-button, .gtk-calc .side .mm input::-webkit-inner-spin-button{-webkit-appearance:none}
.gtk-calc .side .mm small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.gtk-calc .side .mm[hidden]{display:none}
.gtk-calc .plan svg{aspect-ratio:150/106}
.gtk-calc .addons{margin-top:22px}
.gtk-calc .addon{display:flex;align-items:center;gap:18px;padding:14px 0;border-top:1px solid var(--hair);position:relative}
.gtk-calc .addon .main{flex:1;display:flex;align-items:center;gap:18px;cursor:pointer}
.gtk-calc .addon:last-child{border-bottom:1px solid var(--hair)}
.gtk-calc .addon input[type=checkbox]{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.gtk-calc .addon .box{width:16px;height:16px;border:1px solid var(--ink);display:grid;place-items:center;flex:0 0 auto}
.gtk-calc .addon .box::after{content:"";width:8px;height:8px;background:var(--ink);opacity:0;transition:opacity .15s}
.gtk-calc .addon:has(input[type=checkbox]:checked) .box::after{opacity:1}
.gtk-calc .addon svg{width:52px;height:24px;flex:0 0 auto;color:var(--muted)}
.gtk-calc .addon svg path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.gtk-calc .addon .t{flex:1;font-family:var(--serif);font-size:19px;line-height:1.1}
.gtk-calc .addon .cnt .opt small{margin-left:2px}
.gtk-calc .addon .t small{display:block;font-family:var(--text);font-size:13px;color:var(--soft);margin-top:4px;line-height:1.5}
.gtk-calc .addon .cnt{display:none;gap:16px;align-items:baseline;margin-right:6px}
.gtk-calc .addon .cnt .opt{font-size:20px;padding:2px 0 4px}
.gtk-calc .addon:has(input[type=checkbox]:checked) .cnt{display:flex}
.gtk-calc .addon b{font-weight:400;font-family:var(--serif);font-size:18px;white-space:nowrap;color:var(--muted)}
.gtk-calc .addon:has(input[type=checkbox]:checked) b{color:var(--ink)}
.gtk-calc .addon .main:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.gtk-calc .addon[hidden]{display:none}
/* розміри */
.gtk-calc .dims{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.gtk-calc .num{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--ink);padding-bottom:2px}
.gtk-calc .num input{font-family:var(--serif);font-size:46px;font-weight:400;width:4.2ch;border:0;background:transparent;color:var(--ink);padding:0;outline:none;-moz-appearance:textfield;line-height:1}
.gtk-calc .num input::-webkit-outer-spin-button, .gtk-calc .num input::-webkit-inner-spin-button{-webkit-appearance:none}
.gtk-calc .num span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.gtk-calc input[type=range]{width:100%;margin:14px 0 0}
.gtk-calc .hint{font-size:14px;color:var(--soft);margin-top:12px}
.gtk-calc .qty{display:inline-flex;align-items:center;gap:26px}
.gtk-calc .qty button{width:34px;height:34px;border:0;background:transparent;font:400 30px/1 var(--serif);color:var(--soft);cursor:pointer;padding:0;transition:color .15s}
.gtk-calc .qty button:hover{color:var(--ink)}
.gtk-calc .qty output{min-width:2ch;text-align:center;font:400 34px/1 var(--serif);color:var(--ink)}
/* ціна */
.gtk-calc .price{border-top:1px solid var(--ink);padding-top:28px;margin-top:8px}
.gtk-calc .price .row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.gtk-calc .price .total{font-family:var(--serif);font-size:clamp(50px,5.4vw,72px);font-weight:400;line-height:.92;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.gtk-calc .price .total small{font-size:.46em;margin-left:.1em;color:var(--muted)}
.gtk-calc .price .per{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:12px}
.gtk-calc .price .unit{text-align:right;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);line-height:1.8}
.gtk-calc .price .unit b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:0;text-transform:none;color:var(--ink)}
.gtk-calc .lines{list-style:none;padding:0;margin:28px 0 0;font-size:15px}
.gtk-calc .lines li{display:flex;align-items:baseline;gap:10px;padding:6px 0;color:var(--muted)}
.gtk-calc .lines li b{font-weight:400;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.gtk-calc .lines li .dots{flex:1;border-bottom:1px dotted var(--hair);transform:translateY(-4px)}
.gtk-calc .actions{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.gtk-calc .btn{padding:19px 30px;font:500 12px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--cream);transition:background .15s,border-color .15s}
.gtk-calc .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.gtk-calc .btn.ghost{background:transparent;color:var(--ink)}
.gtk-calc .btn.ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.gtk-calc .link{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink);line-height:1.5;transition:color .15s,border-color .15s;text-decoration:none}
.gtk-calc .link:hover{color:var(--accent);border-color:var(--accent)}
.gtk-calc .link.soft{color:var(--soft);border-color:var(--hair)}
.gtk-calc .note{font-size:14px;color:var(--soft);margin-top:22px;line-height:1.7;max-width:46ch}
/* одинична плита: «від», примітка під ціною, позначка в специфікації */
.gtk-calc .from{font-family:var(--text);font-style:normal;font-size:.28em;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);vertical-align:.72em;margin-right:.24em}
.gtk-calc .note--single{color:var(--accent);border-left:1px solid var(--accent);padding-left:14px;margin-top:20px}
.gtk-calc .note--single + .note{margin-top:14px}
.gtk-calc .spec-row .sum .tbc{display:block;font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.gtk-calc .spec-foot .totals b .from{vertical-align:.62em}
.gtk-calc .in-spec{margin-top:18px;font-size:15px;color:var(--muted)}
.gtk-calc .in-spec[hidden]{display:none}
/* ── специфікація ── */
.gtk-calc .spec{margin-top:120px;padding-top:40px;border-top:1px solid var(--ink)}
.gtk-calc .spec[hidden]{display:none}
.gtk-calc .spec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}
.gtk-calc .spec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1;margin:0;letter-spacing:-.01em}
.gtk-calc .spec-head .eyebrow{margin-bottom:12px}
.gtk-calc .spec-head p.sum{margin:0;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);text-align:right;line-height:1.9}
.gtk-calc .spec-list{list-style:none;padding:0;margin:0}
.gtk-calc .spec-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto 150px 40px;gap:24px;align-items:center;padding:20px 0;border-top:1px solid var(--hair);animation:rowin .35s ease}
@keyframes rowin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.gtk-calc .spec-row:last-child{border-bottom:1px solid var(--hair)}
.gtk-calc .spec-row .n{font-size:13px;letter-spacing:.18em;color:var(--accent)}
.gtk-calc .spec-row .what b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1}
.gtk-calc .spec-row .what small{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px;line-height:1.7}
.gtk-calc .spec-row .q{display:inline-flex;align-items:center;gap:16px}
.gtk-calc .spec-row .q button{width:28px;height:28px;border:0;background:transparent;font:400 24px/1 var(--serif);color:var(--soft);cursor:pointer;padding:0}
.gtk-calc .spec-row .q button:hover{color:var(--ink)}
.gtk-calc .spec-row .q output{min-width:2ch;text-align:center;font:400 24px/1 var(--serif)}
.gtk-calc .spec-row .q small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.gtk-calc .spec-row .sum{text-align:right}
.gtk-calc .spec-row .sum b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.gtk-calc .spec-row .sum small{display:block;font-size:13px;color:var(--soft);margin-top:6px}
.gtk-calc .spec-row .x{width:32px;height:32px;border:0;background:transparent;font:400 26px/1 var(--serif);color:var(--soft);cursor:pointer;padding:0;justify-self:end}
.gtk-calc .spec-row .x:hover{color:var(--accent)}
.gtk-calc .spec-foot{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:32px}
.gtk-calc .spec-foot .totals{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);line-height:2}
.gtk-calc .spec-foot .totals b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4vw,56px);letter-spacing:-.02em;text-transform:none;color:var(--ink);line-height:1;margin-top:8px;font-variant-numeric:lining-nums tabular-nums}
.gtk-calc .spec-foot .totals b small{font-size:.46em;color:var(--muted);margin-left:.1em}
.gtk-calc .spec-foot .actions{margin:0;justify-content:flex-end}
/* фото наживо */
.gtk-calc .photos{margin-top:36px}
.gtk-calc .photos .label{margin-bottom:12px}
.gtk-calc .photos .label em{font-size:17px;color:var(--muted)}
.gtk-calc .photo-row{display:grid;grid-template-columns:1fr}
.gtk-calc .photo{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;cursor:zoom-in;background:#f3efe9}
.gtk-calc .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.gtk-calc .photo:hover img{transform:scale(1.03)}
.gtk-calc .photo .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.gtk-calc .photo.ph{cursor:default}
.gtk-calc .photo.ph img{opacity:.35;filter:saturate(.6)}
.gtk-calc .photo.ph .cap{color:var(--muted);background:none;text-align:center;padding:0;top:50%;bottom:auto;transform:translateY(-50%);line-height:1.8}
.gtk-calc .photos-hint{font-size:14px;color:var(--soft);margin:12px 0 0}
.gtk-calc .lb{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh}
.gtk-calc .lb::backdrop{background:rgba(20,18,16,.86)}
.gtk-calc .lb img{display:block;max-width:min(92vw,1100px);max-height:80vh;object-fit:contain}
.gtk-calc .lb p{margin:14px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);text-align:center}
.gtk-calc .lb-x{position:absolute;top:-6px;right:-6px;width:40px;height:40px;border:0;background:var(--ink);color:var(--cream);font:400 26px/1 var(--serif);cursor:pointer}
.gtk-calc .toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--cream);padding:14px 22px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw}
.gtk-calc .toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1000px){
.gtk-calc{padding:24px 22px 80px}
.gtk-calc .head{margin:44px 0 20px}
.gtk-calc .tabs{gap:26px;margin:32px 0 44px;overflow-x:auto;scrollbar-width:none}
.gtk-calc .tab{flex:0 0 auto}
.gtk-calc .tab b{font-size:22px}
.gtk-calc .calc{grid-template-columns:1fr;gap:44px}
.gtk-calc .visual{position:static}
.gtk-calc .stage{aspect-ratio:16/9}
.gtk-calc .drawings{grid-template-columns:1fr 1fr;gap:16px}
.gtk-calc .side{grid-template-columns:1fr}
.gtk-calc .caption .name{font-size:28px}
.gtk-calc .photos{margin-top:28px}
.gtk-calc .photo-row{gap:8px}
.gtk-calc .swatches{gap:18px}
.gtk-calc .swatch{width:calc((100% - 36px)/3)}
.gtk-calc .swatch .ph{width:100%}
.gtk-calc .swatch .t{font-size:17px}
.gtk-calc .opt{font-size:21px}
.gtk-calc .field{margin-bottom:36px}
.gtk-calc .dims{grid-template-columns:1fr;gap:24px}
.gtk-calc .addon{flex-wrap:wrap;gap:8px 18px}
.gtk-calc .addon .main{flex:1 1 100%}
.gtk-calc .addon .cnt{margin-left:34px}
.gtk-calc .addon b{margin-left:auto}
.gtk-calc .calc, .gtk-calc .visual, .gtk-calc .form{min-width:0}
.gtk-calc .num input{font-size:38px}
.gtk-calc .spec{margin-top:72px}
.gtk-calc .spec-head{flex-direction:column;align-items:flex-start;gap:12px}
.gtk-calc .spec-head p.sum{text-align:left}
.gtk-calc .spec-row{grid-template-columns:28px minmax(0,1fr) 40px;gap:14px}
.gtk-calc .spec-row .q{grid-column:2;justify-self:start}
.gtk-calc .spec-row .sum{grid-column:2;text-align:left}
.gtk-calc .spec-row .x{grid-row:1;grid-column:3}
.gtk-calc .spec-foot{grid-template-columns:1fr}
.gtk-calc .spec-foot .actions{justify-content:flex-start}
}

/* ── модалка запиту менеджеру (у макеті була лише заглушка-тост) ── */
.gtk-calc .req{border:0;padding:38px 40px 34px;background:var(--paper);color:var(--ink);max-width:min(92vw,460px);position:relative}
.gtk-calc .req::backdrop{background:rgba(20,18,16,.86)}
.gtk-calc .req h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;margin:0 0 14px;letter-spacing:-.01em}
.gtk-calc .req .eyebrow{margin-bottom:10px}
.gtk-calc .req-what{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--hair)}
.gtk-calc .req-field{display:block;margin-bottom:18px}
.gtk-calc .req-field span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.gtk-calc .req-field input,.gtk-calc .req-field textarea{width:100%;font:400 17px/1.5 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:4px 0;outline:none;border-radius:0}
.gtk-calc .req-field textarea{font-size:15px;resize:vertical}
.gtk-calc .req-field input:focus,.gtk-calc .req-field textarea:focus{border-color:var(--accent)}
.gtk-calc .req-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gtk-calc .req-foot{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.gtk-calc .req-msg{font-size:12px;color:var(--muted);line-height:1.5}
.gtk-calc .req .btn[disabled]{opacity:.5;cursor:default}
@media (max-width:1000px){
.gtk-calc .req{padding:28px 22px 24px}
.gtk-calc .req h3{font-size:27px}
}


/*
 * ── Вибір каменю на телефоні ──────────────────────────────────────────
 *
 * Три текстури стоять у ряд на всю ширину екрана, і на 375 кожна — це
 * дев'яносто вісім пікселів. Різниця в прозорості, якої на моніторі
 * вистачало, тут з'їдається самим малюнком каменю: сірий Покостівський
 * при .72 виглядає так само, як червоно-бурий Токівський при одиниці.
 * Тому необрані глушимо сильніше — .6, — а обраний тримає рамку.
 */
@media (max-width:767px){
.gtk-calc .swatch .ph{opacity:.6}
.gtk-calc .swatch:hover .ph,.gtk-calc .swatch:has(:checked) .ph{opacity:1}
/*
 * Назва на шістнадцятому кеглі, а не на сімнадцятому.
 *
 * Обрана назва стала напівжирною, і «Старобабанське» на сімнадцяти
 * пікселях уже не влазить у колонку. Рядок один — це умова: назва, що
 * переноситься на друге слово, з'їдає місце в підпису під нею.
 */
.gtk-calc .swatch .t{font-size:16px}
}