/* ==========================================================================
   Art-Couture - общая оболочка десктопных листов. Редакция 1.
   Файл перенесён из дизайн-проекта: ui_kits/desktop/kit.css.

   Подключается после токенов. Здесь живёт то, чего в мобильной версии нет
   по существу: наведение курсором, выпадающие панели, липкие колонки.

   Что изменено при переносе на сайт - и только это:
     · убрана обвязка стенда (.ac-lab, .ac-win, .ac-fold, .ac-set, .ac-spec):
       на сайте нет окна браузера внутри страницы;
     · body больше не красится в цвет стенда и не носит --ac-lab-pad;
     · .ac-veil и .ac-scrim стали position:fixed вместо absolute -
       на стенде окно не прокручивалось, на сайте прокручивается;
     · путь к знаку мастерской ведёт в /assets/ac/img/.
   Геометрия, цвет и поведение не тронуты.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ac-bg);font-family:var(--ac-font-ui);font-size:var(--ac-size-body);line-height:var(--ac-lh-ui);color:var(--ac-ink);font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased}
a{color:var(--ac-ink);text-decoration:none}
a:hover{color:var(--ac-ink-hover)}
h1,h2,h3,h4,p,dl,dd,figure,fieldset{margin:0}
fieldset{padding:0;border:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
summary{cursor:pointer}
:focus-visible{outline:2px solid var(--ac-focus);outline-offset:2px}
.ac-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Атрибут `hidden` обязан скрывать. Правило браузера по умолчанию имеет
   тот же вес, что любой класс с `display`, и проигрывает ему по порядку:
   кнопка `.ac-btn` с `display:inline-flex` оставалась видимой, будучи
   помеченной `hidden`. Поймано прогоном layout-check.js - он и ищет
   «видно при [hidden]». */
[hidden]{display:none !important}

/* --- полоса содержимого --------------------------------------------------- */
.ac-w{width:100%;max-width:calc(var(--ac-d-max) + var(--ac-gut) * 2);margin:0 auto;padding:0 var(--ac-gut)}

/* --- шапка ---------------------------------------------------------------- */
/* Липкая и в потоке. Она же несёт постоянное действие: на мобильной версии
   «Заявка» и телефон живут в нижнем модуле, на десктопе - здесь, поэтому
   кнопок в герое нет и там. */
.ac-hd{position:sticky;top:0;z-index:60;background:var(--ac-glass);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);border-bottom:1px solid var(--ac-line)}
.ac-hd--over{position:absolute;top:0;left:0;right:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
/* Пока панель открыта, шапка и панель - один лист, а не полоса и плашка
   под ней. Три вещи выдавали чужую плашку: нижняя граница шапки резала
   их ровно по стыку; шапка полупрозрачна и насыщает подложку, а панель
   сплошная, поэтому оттенки расходились; на главной шапка вообще лежит
   поверх кадра. Здесь шапка берёт цвет панели, теряет фильтр и границу.
   Правило стоит после `--over` нарочно: у них одинаковый вес, и решает
   порядок. */
.ac-hd.is-cat,.ac-hd.is-srv,.ac-hd.is-find{background:var(--ac-glass-mega);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
/* Три зоны: разделы слева, знак по центру, служебное справа. Логотип стоит
   ровно посередине полосы содержимого - колонки 1fr держат ось, что бы
   ни лежало по бокам. Навигация набрана моноширинным капслоком: язык
   мастерской (артикул, проба, вес) поднят в шапку, и антиква логотипа
   остаётся единственным крупным начертанием. */
/* Колонки `1fr auto 1fr` держат знак ровно посередине полосы. Но середина
   ряда и середина воздуха - разное: пока левая зона весила 272 px, а правая
   539, знак стоял по центру, а выглядел приклеенным к правой группе (замер
   17.09.2026 на 1440: пустоты слева от знака 318 px, справа 51).

   Устройство после разбора с владельцем: каждая боковая зона растянута
   во всю свою колонку и расходится по краям. У знака - то, куда идут
   (навигация слева, «Отзывы» и «Вопросы» справа), у краёв полосы - контакт
   слева и средства с действием справа. Знак получает равный воздух
   с обеих сторон, а оба края полосы заняты. */
.ac-hd__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:var(--ac-s6);height:var(--ac-d-hd)}
.ac-hd__l{justify-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:var(--ac-s5)}
.ac-nav{display:flex;align-items:center;gap:var(--ac-s6)}
/* Знак - файл мастерской: антиква, линейка с «jewellery» и алмаз под ней.
   Стоит фоном на ссылке, чтобы одно правило работало и в шапке, и в подвале;
   набранная словами подпись остаётся в разметке - для чтения вслух и поиска. */
.ac-hd__w{position:relative;justify-self:center;display:block;width:var(--ac-logo-w);height:var(--ac-logo-h);background:url("/assets/ac/img/logo.svg") no-repeat center/contain}
.ac-hd__w b,.ac-hd__w span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ac-hero--dark .ac-hd__w{filter:invert(1)}
/* Правая зона тянется во всю колонку и расходится: ближняя группа к знаку,
   дальняя к краю. Раньше вся зона прижималась к краю целиком. */
.ac-hd__r{justify-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:var(--ac-s5)}
.ac-hd__near,.ac-hd__far{display:flex;align-items:center;gap:var(--ac-s5)}
.ac-nav__l{position:relative;display:inline-flex;align-items:center;gap:7px;height:var(--ac-d-hd);padding:0;border:0;background:none;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);font-weight:var(--ac-w-med);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:inherit;white-space:nowrap;cursor:pointer}
.ac-nav__l::after{content:"";position:absolute;left:0;right:100%;bottom:24px;height:1px;background:currentColor;transition:right var(--ac-dur) var(--ac-ease)}
.ac-nav__l:hover::after,.ac-nav__l[aria-current]::after{right:0}
.ac-nav__l svg{color:var(--ac-ink-mute);transition:transform var(--ac-dur) var(--ac-ease)}
/* Значки стоят плотно: поиск, избранное и сравнение - один ряд средств,
   а не три равноправных пункта. Зазор 2 px вместо общих 20 отдаёт правой
   зоне полсотни пикселей. Сами цели остаются крупными: у каждого значка
   своя площадь 36 px. */
.ac-hd__ic{display:flex;align-items:center;gap:2px}
/* Телефон живёт в двух местах разметки и показывается ровно в одном:
   слева на широких, справа ниже 1200 (переключение - в narrow.css).
   Переставить элемент между колонками сетки одним CSS нельзя. */
.ac-tel--r{display:none}
/* Значок в шапке: своя площадь 36 px, заливки нет - заливку носит только
   «Заявка», и только когда в ней есть позиции. */
.ac-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--ac-r-pill);color:inherit;transition:background var(--ac-dur) var(--ac-ease)}
.ac-ic:hover{background:var(--ac-ghost)}
.ac-tel{font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);letter-spacing:var(--ac-track-mono);white-space:nowrap}
.ac-cta{position:relative;display:inline-flex;align-items:center;gap:var(--ac-s2);height:var(--ac-d-cta);padding:0 var(--ac-s5);border-radius:calc(var(--ac-d-cta) / 2);background:var(--ac-cta);color:var(--ac-on-ink);font-size:var(--ac-size-sm);font-weight:var(--ac-w-med);white-space:nowrap;transition:background var(--ac-dur) var(--ac-ease)}
.ac-cta:hover,.ac-cta:active{color:var(--ac-on-ink);background:var(--ac-cta-press)}
.ac-cta i{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:rgba(255,255,255,.24);font-style:normal;font-size:var(--ac-size-xs);font-weight:var(--ac-w-semi)}
.ac-gh{display:inline-flex;align-items:center;justify-content:center;gap:var(--ac-s2);height:var(--ac-d-cta);min-width:var(--ac-d-cta);padding:0 var(--ac-s4);border-radius:var(--ac-r-pill);background:var(--ac-ghost);color:var(--ac-ink);font-size:var(--ac-size-sm);transition:background var(--ac-dur) var(--ac-ease)}
.ac-gh:hover{background:rgba(28,27,25,.1);color:var(--ac-ink)}
.ac-gh--ic{padding:0;width:var(--ac-d-cta)}

/* --- мега-панель ---------------------------------------------------------- */
/* Опускается матовым стеклом на всю ширину по клику, не по наведению:
   наведение открывает панель случайно, а панель на 300 px - это не подсказка,
   а половина экрана. Открыта всегда одна; страница под ней притемняется
   и остаётся видимой. Закрывается повторным кликом, кликом вне и Esc. */
/* Размытия здесь нет: фон листа сплошной, размывать нечего, а считать его
   браузер продолжал бы на каждом кадре появления. */
.ac-mega{position:absolute;top:100%;left:0;right:0;z-index:59;opacity:0;visibility:hidden;transform:translateY(-10px);background:var(--ac-glass-mega);border-bottom:1px solid var(--ac-line);box-shadow:0 24px 48px rgba(28,27,25,.1);transition:opacity var(--ac-dur) var(--ac-ease),transform var(--ac-dur) var(--ac-ease),visibility var(--ac-dur)}
.ac-hd.is-cat .ac-mega--cat,.ac-hd.is-srv .ac-mega--srv,.ac-hd.is-find .ac-mega--find{opacity:1;visibility:visible;transform:none}
.ac-hd.is-cat [data-mega=cat]::after,.ac-hd.is-srv [data-mega=srv]::after{right:0}
.ac-hd.is-cat [data-mega=cat] svg,.ac-hd.is-srv [data-mega=srv] svg{transform:rotate(180deg)}
.ac-hd.is-find .ac-ic{background:var(--ac-ghost)}
/* Боковые поля обязательны: короткий padding затирает горизонтальный отступ
   .ac-w, и колонки панели встают вплотную к краю окна. */
.ac-mega__in{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ac-s10) var(--ac-s16);padding:var(--ac-s10) var(--ac-gut) var(--ac-s12)}
.ac-mega__c{display:grid;gap:2px;align-content:start}
.ac-mega__c b{margin-bottom:var(--ac-s3);font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);font-weight:var(--ac-w-reg);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-mega__c a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ac-s3);min-height:36px;font-family:var(--ac-font-display);font-size:var(--ac-size-h3);font-weight:var(--ac-w-med);letter-spacing:-.012em}
.ac-mega__c em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}
.ac-mega__c--srv a{display:grid;gap:2px;min-height:0;padding:9px 0}
.ac-mega__c--srv a span{font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}
.ac-mega__p{display:grid;gap:var(--ac-s3);align-content:start}
.ac-mega__p span{aspect-ratio:4/3;overflow:hidden;border-radius:var(--ac-r-photo);background:var(--ac-photo-bg)}
.ac-mega__p img{width:100%;height:100%;object-fit:cover;transition:transform 520ms var(--ac-ease)}
.ac-mega__p:hover img{transform:scale(1.03)}
.ac-mega__p b{font-family:var(--ac-font-display);font-size:var(--ac-size-sm);font-weight:var(--ac-w-med)}
.ac-mega__p em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}
.ac-mega__n{display:grid;gap:var(--ac-s3);align-content:start;padding:var(--ac-s5);border-radius:var(--ac-r-card);background:var(--ac-surface)}
.ac-mega__n p{font-size:var(--ac-size-sm);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
.ac-mega__all{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--ac-s6);padding-top:var(--ac-s5);border-top:1px solid var(--ac-line);font-size:var(--ac-size-sm)}
.ac-mega__all em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}
/* Притемнение страницы под панелью. На стенде было absolute - окно там
   не прокручивалось; на сайте страница длинная, поэтому fixed. */
.ac-veil{position:fixed;inset:0;z-index:55;background:var(--ac-scrim);opacity:0;visibility:hidden;transition:opacity var(--ac-dur) var(--ac-ease),visibility var(--ac-dur)}
.is-dim>.ac-veil{opacity:1;visibility:visible}

/* --- лист поиска -------------------------------------------------------- */
/* Поле не висит в шапке постоянно: по кнопке опускается тот же матовый лист,
   что и мега-панель. Один язык на три состояния шапки. */
.ac-mega--find .ac-mega__in{display:block;padding:var(--ac-s12) var(--ac-gut)}
.ac-fs{max-width:880px;margin:0 auto}
.ac-sf{position:relative;display:flex;align-items:center;gap:var(--ac-s4);height:68px;padding:0 var(--ac-s5);border-bottom:1px solid var(--ac-line-strong);cursor:text}
.ac-sf>svg{flex:0 0 auto;color:var(--ac-ink-mute)}
.ac-sf input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;font-family:var(--ac-font-display);font-size:26px;font-weight:var(--ac-w-med);letter-spacing:-.02em;outline:0}
.ac-sf input::placeholder{color:var(--ac-ink-mute);font-weight:var(--ac-w-reg)}
.ac-sf__x{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--ac-r-pill);background:var(--ac-ghost);color:var(--ac-ink-mute)}
.ac-fcols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--ac-s16);padding-top:var(--ac-s5)}
.ac-cnt{padding:var(--ac-s2) var(--ac-s3);font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);letter-spacing:var(--ac-track-mono);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-gt{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ac-s3);padding:var(--ac-s4) var(--ac-s3) var(--ac-s1)}
.ac-gt span{font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-gt em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);color:var(--ac-ink-mute)}
.ac-fnd{display:grid;gap:1px}
.ac-fnd>a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--ac-s3);padding:var(--ac-s2) var(--ac-s3);border-radius:10px}
.ac-fnd>a:hover{background:var(--ac-bg)}
.ac-fnd__ph{width:44px;height:44px;overflow:hidden;border-radius:8px;background:var(--ac-photo-bg)}
.ac-fnd__ph img{width:100%;height:100%;object-fit:cover}
.ac-fnd__b{display:grid;gap:1px;min-width:0}
.ac-fnd__t{font-size:var(--ac-size-sm);line-height:1.3}
.ac-fnd__m{font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);color:var(--ac-ink-mute)}
.ac-fnd__p{font-family:var(--ac-font-display);font-size:var(--ac-size-sm);font-weight:var(--ac-w-semi);letter-spacing:-.01em}
.ac-all{display:flex;align-items:center;justify-content:space-between;min-height:var(--ac-tap);padding:0 var(--ac-s3);margin-top:var(--ac-s2);border-top:1px solid var(--ac-line);font-size:var(--ac-size-sm);color:var(--ac-ink-body)}
mark{border-radius:3px;background:var(--ac-mark);box-shadow:0 0 0 2px var(--ac-mark);color:inherit}
.ac-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 var(--ac-s3)}
.ac-tag{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 var(--ac-s3);border-radius:var(--ac-r-pill);background:var(--ac-bg);font-size:var(--ac-size-sm)}
.ac-tag:hover{background:var(--ac-surface-sunk)}
.ac-tag em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}

/* --- герой ---------------------------------------------------------------- */
.ac-hero{position:relative;display:flex;align-items:flex-end;height:var(--ac-hero-dh);overflow:hidden;color:var(--ac-hero-ink)}
.ac-hero__f{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--ac-hero-crop) var(--ac-hero-cropy);background:var(--ac-hero-skel)}
.ac-hero__v{position:absolute;inset:0;z-index:-1;background:var(--ac-hero-veil)}
.ac-hero__c{width:100%;padding-bottom:var(--ac-s20)}
.ac-hero__b{max-width:660px;display:grid;gap:var(--ac-s5)}
.ac-hero__m{width:52px;height:38px;color:var(--ac-hero-ink);opacity:.7}
.ac-hero h1{font-family:var(--ac-font-display);font-size:var(--ac-size-hero);font-weight:var(--ac-w-semi);line-height:1.04;letter-spacing:var(--ac-track-hero);text-wrap:balance}
.ac-hero__s{max-width:34em;font-size:var(--ac-size-lead);line-height:var(--ac-lh-body);color:var(--ac-hero-ink-soft);text-wrap:pretty}
.ac-hero__h{display:inline-flex;align-items:center;gap:8px;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-mono);text-transform:uppercase;color:var(--ac-hero-ink-soft)}
.ac-hero--dark{color:var(--ac-hero-ink-inv);--ac-hero-veil:var(--ac-hero-veil-dark);--ac-hero-ink:var(--ac-hero-ink-inv);--ac-hero-ink-soft:var(--ac-hero-ink-inv-soft)}

/* Кадра героя ещё нет: сезонная съёмка не сдана, а через дизайн-проект
   бинарники не выгружаются. Пока стоит тон-заглушка из токенов - тот же,
   что показывается, пока настоящий кадр не загрузился. Появится файл -
   правило удаляется, и ничего больше менять не нужно. */
.ac-hero--nophoto{background:var(--ac-hero-skel)}

/* --- типографика ---------------------------------------------------------- */
.ac-h1{font-family:var(--ac-font-display);font-size:var(--ac-size-h1);font-weight:var(--ac-w-semi);line-height:var(--ac-lh-tight);letter-spacing:var(--ac-track-h1);text-wrap:balance}
.ac-h2{font-family:var(--ac-font-display);font-size:var(--ac-size-h2);font-weight:var(--ac-w-semi);line-height:var(--ac-lh-snug);letter-spacing:var(--ac-track-h2)}
.ac-h3{font-family:var(--ac-font-display);font-size:var(--ac-size-h3);font-weight:var(--ac-w-semi);letter-spacing:-.015em}
.ac-lead{max-width:42em;font-size:var(--ac-size-lead);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
.ac-p{max-width:44em;font-size:var(--ac-size-body);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
.ac-mono{font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);letter-spacing:var(--ac-track-mono);color:var(--ac-ink-mute)}
/* Оговорка при цене и при форме. Лежит в общем листе, а не в страничном:
   одна и та же строка стоит и на изделии, и в заявке - «окончательную цену
   называет мастер». Двух источников у неё быть не должно. */
.ac-note{font-size:var(--ac-size-sm);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
.ac-note--mid{text-align:center}
.ac-gem{color:var(--ac-line-strong)}
.ac-sec{padding-top:var(--ac-head-above)}
.ac-sh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ac-s6);margin-bottom:var(--ac-head-below)}
.ac-sh__t{display:flex;align-items:baseline;gap:var(--ac-s4)}
.ac-sh a{font-size:var(--ac-size-sm);color:var(--ac-ink-body)}
.ac-sh a:hover{color:var(--ac-ink)}
.ac-ph{padding:var(--ac-s10) 0 var(--ac-s2);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ac-s6)}
.ac-ph__t{display:grid;gap:var(--ac-s3)}
.ac-crumb{display:flex;align-items:center;gap:8px;padding-top:var(--ac-s6);font-size:var(--ac-size-sm);color:var(--ac-ink-mute)}
.ac-crumb a{color:var(--ac-ink-mute)}
.ac-crumb a:hover{color:var(--ac-ink)}
.ac-crumb svg{color:var(--ac-line-strong)}

/* --- пустое состояние ------------------------------------------------------
     Одно на четыре окна: избранное, сравнение, заявка, отзывы. Раньше эти
     три правила стояли копиями в страничных листах, и копии разошлись:
     в `order-d` и `reviews-d` был отступ без размера знака, в `fav-d` -
     размер знака без отступа, а в `cmp-d` не было ничего. Поэтому на
     сравнении знак без ширины растягивался во всю колонку, а на избранном
     прилипал к строке «список пуст».

     Устройство одно и то же: знак, заголовок, строка, два входа. Держать
     его в четырёх файлах смысла нет - отсюда оно достаётся всем. */
.ac-empty{max-width:46em;display:grid;justify-items:start;gap:var(--ac-s4);padding:var(--ac-s16) 0 var(--ac-s24)}
.ac-empty__a{display:flex;flex-wrap:wrap;gap:var(--ac-s3);margin-top:var(--ac-s2)}
.ac-empty .ac-gem{width:46px;height:34px}

/* --- кнопки --------------------------------------------------------------- */
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ac-s2);min-height:var(--ac-btn-h);padding:0 var(--ac-s6);border:1px solid var(--ac-cta);border-radius:var(--ac-r-btn);background:var(--ac-cta);color:var(--ac-on-ink);font-size:var(--ac-size-body);font-weight:var(--ac-w-med);text-align:center;transition:background var(--ac-dur) var(--ac-ease),border-color var(--ac-dur) var(--ac-ease)}
.ac-btn:hover,.ac-btn:active{background:var(--ac-cta-press);border-color:var(--ac-cta-press);color:var(--ac-on-ink)}
.ac-btn--gh{background:var(--ac-surface);border-color:var(--ac-line-strong);color:var(--ac-ink)}
.ac-btn--gh:hover,.ac-btn--gh:active{background:var(--ac-surface);border-color:var(--ac-ink);color:var(--ac-ink)}
.ac-btn--del{background:var(--ac-act-del);border-color:var(--ac-act-del)}
.ac-btn--del:hover,.ac-btn--del:active{background:var(--ac-act-del-press);border-color:var(--ac-act-del-press)}
.ac-btn--wide{width:100%}

/* --- цвет по смыслу действия ---------------------------------------------
     обязательство (заявка, отправить, записаться) - сезонная заливка;
     товарное (в каталог, отложить)               - малахит;
     отнимающее (удалить, снять условие)          - гранат;
     отказ и вторичное                            - нейтральный призрак.
   Заливка в листе одна - старшая по смыслу; остальные идут обводкой
   своего цвета и заливаются только под курсором. */
.ac-s--winter{--ac-cta:#4A5A6B;--ac-cta-press:#3D4B59}
.ac-s--spring{--ac-cta:#5A6647;--ac-cta-press:#4B563B}
.ac-s--summer{--ac-cta:#8A5A3C;--ac-cta-press:#744A31}
.ac-s--autumn{--ac-cta:#9E5060;--ac-cta-press:#854351}
.ac-btn--buy{background:var(--ac-act-buy);border-color:var(--ac-act-buy)}
.ac-btn--buy:hover,.ac-btn--buy:active{background:var(--ac-act-buy-press);border-color:var(--ac-act-buy-press)}
.ac-btn--gh-buy{background:var(--ac-surface);border-color:var(--ac-act-buy);color:var(--ac-act-buy)}
.ac-btn--gh-buy:hover,.ac-btn--gh-buy:active{background:var(--ac-act-buy);border-color:var(--ac-act-buy);color:var(--ac-on-ink)}
.ac-btn--gh-del{background:var(--ac-surface);border-color:var(--ac-act-del);color:var(--ac-act-del)}
.ac-btn--gh-del:hover,.ac-btn--gh-del:active{background:var(--ac-act-del);border-color:var(--ac-act-del);color:var(--ac-on-ink)}
/* --- Избранное и сравнение -------------------------------------------------
   Кнопка живёт на карточке изделия, в плитке каталога и на страницах списков,
   поэтому правила общие, а не в файле одной страницы. Форма обёрнута, потому
   что нажатие принимается обычным POST: ссылку обошёл бы поисковый робот
   и наполнил избранное сам. */
.ac-lrow{display:flex;gap:var(--ac-s2);margin-top:var(--ac-s3)}
.ac-lrow form{margin:0}
.ac-lb{display:inline-grid;grid-auto-flow:column;align-items:center;gap:8px;min-height:40px;padding:0 var(--ac-s4);border:1px solid var(--ac-line);border-radius:var(--ac-r-pill);background:var(--ac-surface);font-family:var(--ac-font-ui);font-size:var(--ac-size-sm);color:var(--ac-ink-body);cursor:pointer;transition:border-color var(--ac-dur) var(--ac-ease),color var(--ac-dur) var(--ac-ease)}
/* Знак приходит из спрайта разметкой, а не маской в `::before`: у избранного
   два состояния, и залитое сердце маской не нарисовать - она знает только
   форму. Цвет знака наследуется от кнопки, поэтому отдельных правил
   на наведение и на состояние «в списке» больше не нужно. */
.ac-lb .ac-i{color:var(--ac-ink-mute);transition:color var(--ac-dur) var(--ac-ease)}
.ac-lb:hover{border-color:var(--ac-line-strong);color:var(--ac-ink)}
.ac-lb:hover .ac-i{color:inherit}
.ac-lb:focus-visible{outline:2px solid var(--ac-focus);outline-offset:2px}
/* В списке: залито цветом отнимающего действия - следующее нажатие уберёт. */
/* В списке знак тихий, а гранатовым становится под курсором и в фокусе.
   Постоянная заливка кричала громче самих изделий: на странице избранного
   четыре красных сердца перебивали кольца, ради которых туда заходят.
   Цвет отнимающего действия нужен в момент действия, а не всё время -
   то же правило, что у крестика в заявке. */
.ac-lb--on{border-color:var(--ac-line);color:var(--ac-ink-body)}
.ac-lb--on .ac-i{color:var(--ac-ink-mute)}
.ac-lb--on:hover,.ac-lb--on:focus-visible{border-color:var(--ac-act-del);color:var(--ac-act-del)}
.ac-lb--on:hover .ac-i,.ac-lb--on:focus-visible .ac-i{color:var(--ac-act-del)}
/* Ссылка со счётчиком в шапке. Значок показывается только при непустом
   счётчике: сниппет отдаёт пустую строку, и бледный ноль не висит. */
.ac-hl{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--ac-r-pill);color:var(--ac-ink)}
.ac-hl:hover{background:var(--ac-ghost)}
.ac-hl i{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:var(--ac-r-pill);background:var(--ac-cta);font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);font-style:normal;line-height:16px;text-align:center;color:var(--ac-on-ink)}
.ac-hl i:empty{display:none}

/* --- карточка товара ------------------------------------------------------ */
.ac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ac-col)}
.ac-grid--3{grid-template-columns:repeat(3,1fr)}
.ac-card{display:grid;gap:var(--ac-s3);padding:var(--ac-s3) var(--ac-s3) var(--ac-s4);background:var(--ac-surface);border-radius:var(--ac-r-card);box-shadow:var(--ac-elev-card);transition:box-shadow var(--ac-dur) var(--ac-ease)}
.ac-card:hover{box-shadow:var(--ac-elev-hover)}
.ac-card__ph{position:relative;display:grid;place-items:center;aspect-ratio:var(--ac-ratio-product);overflow:hidden;background:var(--ac-photo-bg);border-radius:var(--ac-r-photo)}
.ac-card__ph img{width:100%;height:100%;object-fit:cover;transition:transform 520ms var(--ac-ease)}
.ac-card:hover .ac-card__ph img{transform:scale(1.035)}
.ac-card__b{display:grid;gap:5px;padding:0 var(--ac-s1)}
.ac-card__t{font-size:var(--ac-size-sm);line-height:1.35}
.ac-card__p{font-family:var(--ac-font-display);font-size:var(--ac-size-h3);font-weight:var(--ac-w-semi);letter-spacing:-.01em}
.ac-card__p s{margin-left:8px;font-size:var(--ac-size-sm);font-weight:var(--ac-w-reg);color:var(--ac-ink-strike)}
.ac-card__a{font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);color:var(--ac-ink-mute)}
.ac-mm{display:flex;width:fit-content;height:11px;overflow:hidden;border-radius:6px;box-shadow:inset 0 0 0 1px var(--ac-metal-ring)}
.ac-mm i{display:block;width:15px;height:11px}
.ac-mm--w{background:var(--ac-metal-white)}
.ac-mm--y{background:var(--ac-metal-yellow)}
.ac-mm--r{background:var(--ac-metal-red)}
.ac-plate{display:grid;place-items:center;align-content:center;gap:var(--ac-s2);width:100%;height:100%;padding:var(--ac-s3);background:var(--ac-photo-bg);box-shadow:inset 0 0 0 1px var(--ac-line);font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);line-height:1.5;letter-spacing:var(--ac-track-mono);text-align:center;text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-plate .ac-gem{width:40px;height:29px}

/* --- форма ---------------------------------------------------------------- */
.ac-f{display:grid;gap:var(--ac-s4)}
.ac-f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--ac-s4)}
.ac-fl{display:grid;gap:6px}
.ac-fl>span{font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-mono);color:var(--ac-ink-mute)}
.ac-fld{width:100%;min-height:48px;padding:0 var(--ac-s4);border:1px solid var(--ac-line);border-radius:var(--ac-r-field);background:var(--ac-surface);font-size:var(--ac-size-body);transition:border-color var(--ac-dur) var(--ac-ease)}
.ac-fld:hover{border-color:var(--ac-line-strong)}
textarea.ac-fld{min-height:96px;padding:13px var(--ac-s4);line-height:var(--ac-lh-body);resize:vertical}
.ac-fld::placeholder{color:var(--ac-ink-mute)}
.ac-fld:focus-visible{outline:2px solid var(--ac-focus);outline-offset:-2px}
.ac-err{font-size:var(--ac-size-sm);color:var(--ac-act-del)}
.ac-fl--err .ac-fld{border-color:var(--ac-act-del)}
.ac-ck{position:absolute;width:0;height:0;opacity:0;margin:0;pointer-events:none}
.ac-agree{position:relative;display:grid;grid-template-columns:20px 1fr;gap:var(--ac-s3);align-items:start;min-height:var(--ac-tap);font-size:var(--ac-size-sm);line-height:var(--ac-lh-ui);color:var(--ac-ink-body);cursor:pointer}
.ac-agree i{width:20px;height:20px;margin-top:1px;border:1.5px solid var(--ac-line-strong);border-radius:6px;background:var(--ac-surface);transition:border-color var(--ac-dur) var(--ac-ease)}
.ac-agree:hover i{border-color:var(--ac-ink)}
.ac-agree u{text-decoration-color:var(--ac-line-strong);text-underline-offset:3px}
.ac-ck:checked+.ac-agree i{border-color:var(--ac-cta);background:var(--ac-cta) no-repeat center/11px 9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 4 7.6 10 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ac-ck:focus-visible+.ac-agree i{outline:2px solid var(--ac-focus);outline-offset:2px}
/* Запертая кнопка отправки. Светлая, а не залитая: залитая тёмным читается
   как рабочая, а она не рабочая. Белый текст на `--ac-line-strong` давал
   1,9:1 - проверка доступности была права; тёмный текст на тихой подложке
   даёт 6,2:1 и остаётся тихим.
   Настоящий `disabled` здесь поставить нечем: запертость держится `:has()`
   без скрипта, а раз кнопка не disabled, axe требует от неё контраста
   наравне с обычной. Клавиатурой её всё же можно нажать - pointer-events
   клавиши не ловит, - поэтому согласие проверяется и на сервере. */
.ac-send{background:var(--ac-surface-sunk);border-color:var(--ac-line-strong);color:var(--ac-ink-body);pointer-events:none}
.ac-f:has(.ac-ck:checked) .ac-send{background:var(--ac-cta);border-color:var(--ac-cta);color:var(--ac-on-ink);pointer-events:auto}

/* --- фильтр в колонке ----------------------------------------------------- */
/* Мобильный фильтр живёт в выдвижном модуле, потому что экрана нет.
   Здесь колонка стоит открытой: условия видны вместе с выдачей. */
.ac-cols{display:grid;grid-template-columns:var(--ac-d-side) 1fr;gap:var(--ac-s16)}
.ac-side{position:sticky;top:calc(var(--ac-d-hd) + var(--ac-s6));align-self:start;display:grid;gap:var(--ac-s6)}
.ac-ax{display:grid;gap:var(--ac-s1)}
.ac-ax>span{margin-bottom:var(--ac-s1);font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--ac-tap);font-size:var(--ac-size-sm);cursor:pointer}
.ac-opt input{position:absolute;width:0;height:0;opacity:0}
.ac-opt i{flex:0 0 auto;width:18px;height:18px;border:1.5px solid var(--ac-line-strong);border-radius:5px;background:var(--ac-surface);transition:border-color var(--ac-dur) var(--ac-ease)}
.ac-opt:hover i{border-color:var(--ac-ink)}
.ac-opt input:checked+i{border-color:var(--ac-cta);background:var(--ac-cta) no-repeat center/11px 9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 4 7.6 10 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ac-opt input:focus-visible+i{outline:2px solid var(--ac-focus);outline-offset:2px}
.ac-opt em{margin-left:auto;font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}
.ac-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--ac-s6)}
.ac-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 var(--ac-s3);border-radius:var(--ac-r-pill);background:var(--ac-surface);box-shadow:inset 0 0 0 1px var(--ac-line);font-size:var(--ac-size-sm);transition:box-shadow var(--ac-dur) var(--ac-ease)}
.ac-chip:hover{box-shadow:inset 0 0 0 1px var(--ac-line-strong)}
.ac-chip svg{color:var(--ac-ink-mute)}
.ac-sel{display:inline-flex;align-items:center;gap:var(--ac-s2);height:var(--ac-tap);padding:0 var(--ac-s3);border-radius:var(--ac-r-field);background:var(--ac-surface);box-shadow:inset 0 0 0 1px var(--ac-line);font-size:var(--ac-size-sm);cursor:pointer}
.ac-sel:hover{box-shadow:inset 0 0 0 1px var(--ac-line-strong)}
.ac-sel svg{color:var(--ac-ink-mute)}

/* --- сведения таблицей ---------------------------------------------------- */
.ac-dl{display:grid;gap:0}
.ac-dl div{display:grid;grid-template-columns:150px 1fr;gap:var(--ac-s4);padding:11px 0;border-top:1px solid var(--ac-line);font-size:var(--ac-size-sm)}
.ac-dl div:last-child{border-bottom:1px solid var(--ac-line)}
.ac-dl dt{color:var(--ac-ink-mute)}
.ac-dl dd{font-family:var(--ac-font-mono);font-size:var(--ac-size-mono)}

/* --- шаги, факты, плитки -------------------------------------------------- */
.ac-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ac-col)}
.ac-steps li{display:grid;gap:var(--ac-s2);padding-top:var(--ac-s4);border-top:1px solid var(--ac-ink)}
.ac-steps b{font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);font-weight:var(--ac-w-reg);color:var(--ac-ink-mute)}
.ac-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ac-col) var(--ac-s16)}
.ac-facts li{display:grid;gap:var(--ac-s2);padding-top:var(--ac-s4);border-top:1px solid var(--ac-line)}
.ac-facts p{font-size:var(--ac-size-sm);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
.ac-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ac-col)}
.ac-tile{position:relative;display:grid;align-content:end;gap:6px;min-height:190px;padding:var(--ac-s5);overflow:hidden;border-radius:var(--ac-r-card);background:var(--ac-surface);box-shadow:var(--ac-elev-card);transition:box-shadow var(--ac-dur) var(--ac-ease)}
.ac-tile:hover{box-shadow:var(--ac-elev-hover)}
.ac-tile img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform 520ms var(--ac-ease)}
.ac-tile:hover img{transform:scale(1.03)}
.ac-tile b,.ac-tile em{position:relative;z-index:1}
.ac-tile b{font-family:var(--ac-font-display);font-size:var(--ac-size-h3);font-weight:var(--ac-w-semi)}
.ac-tile em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}
.ac-tile .ac-plate{position:absolute;inset:0;z-index:0}
.ac-tile__v{position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 72%)}
/* Номер направления. Стоит там, где раньше был значок услуги: на главной
   и в шапке направления на странице услуг. Моноширинный, приглушённый,
   мельче подписи - он отмечает место в списке, а не спорит с заголовком.
   Значки сняты 17.09.2026: рисунки не читались в 20 px, и пять закорючек
   подряд выглядели случайными. */
.ac-num{font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-caps);color:var(--ac-ink-mute)}
.ac-srv{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--ac-col)}
.ac-srv a{display:grid;align-content:start;gap:var(--ac-s3);padding:var(--ac-s5);border-radius:var(--ac-r-card);background:var(--ac-surface);box-shadow:var(--ac-elev-card);transition:box-shadow var(--ac-dur) var(--ac-ease)}
.ac-srv a:hover{box-shadow:var(--ac-elev-hover)}
.ac-srv p{font-size:var(--ac-size-sm);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
/* Иконка из спрайта `/assets/ac/img/icons.svg`, оба набора: услуги `ac-i-*`
   и интерфейсный `ac-ic-*`. Размер задаётся одним числом `--ac-i-n` по месту,
   без единиц: из него считается и сторона, и толщина штриха.

   Толщину приходится пересчитывать, потому что знаки нарисованы в сетке 24,
   а стоят в размерах от 11 до 24 пикселей. Постоянный `stroke-width` дал бы
   волосяную линию в крошках и нормальную в карточке услуги: при показе
   в 12px штрих 1.2 сжимается вдвое. Формула возвращает те же 1.2 экранных
   пикселя на любом размере. По умолчанию 24 - размер набора услуг,
   для него расчёт даёт ровно прежние значения. */
.ac-i{--ac-i-n:24;flex:0 0 auto;width:calc(var(--ac-i-n) * 1px);height:calc(var(--ac-i-n) * 1px);fill:none;stroke:currentColor;stroke-width:calc(var(--ac-i-w) * 24 / var(--ac-i-n));stroke-linecap:round;stroke-linejoin:round}
/* Ступени размера. Чисел в разметке нет: место выбирает ступень, а не пиксели.
   Прежние фигуры стояли в двенадцати разных сетках, и половина различий была
   не замыслом, а тем, что каждая рисовалась под свой случай. */
.ac-i--xs{--ac-i-n:12}
.ac-i--sm{--ac-i-n:14}
.ac-i--md{--ac-i-n:16}
.ac-i--lg{--ac-i-n:18}
.ac-i--xl{--ac-i-n:20}

/* --- липкая правая колонка ------------------------------------------------ */
.ac-rail{position:sticky;top:calc(var(--ac-d-hd) + var(--ac-s6));align-self:start;display:grid;gap:var(--ac-s5)}
.ac-panel{display:grid;gap:var(--ac-s4);padding:var(--ac-s6);border-radius:var(--ac-r-card);background:var(--ac-surface);box-shadow:var(--ac-elev-card)}

/* --- подвал --------------------------------------------------------------- */
.ac-ft{margin-top:var(--ac-s24);padding:var(--ac-s16) 0 var(--ac-s10);border-top:1px solid var(--ac-line)}
.ac-ft__in{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--ac-s16)}
.ac-ft__c{display:grid;gap:var(--ac-s3);align-content:start}
.ac-ft__c .ac-hd__w{color:var(--ac-ink)}
.ac-ft__c b{font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-ft__c a,.ac-ft__c p{font-size:var(--ac-size-sm);line-height:1.6;color:var(--ac-ink-body)}
.ac-ft__c a:hover{color:var(--ac-ink)}
.ac-ft__c em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);color:var(--ac-ink-mute)}
.ac-ft__b{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ac-s8);padding-top:var(--ac-s6);margin-top:var(--ac-s10);border-top:1px solid var(--ac-line);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}
.ac-ft__b nav{display:flex;gap:var(--ac-s5)}
.ac-ft__b a{color:var(--ac-ink-mute)}
.ac-ft__b a:hover{color:var(--ac-ink)}

/* --- баннер о файлах cookie ----------------------------------------------- */
/* Ответ уже дан: класс ставит `cook.js` на <html> до первой отрисовки,
   иначе баннер мигал бы на каждой странице. */
.ac-cook-ok .ac-cook{display:none}
.ac-cook{position:fixed;right:var(--ac-gut);bottom:var(--ac-s8);z-index:65;width:460px;display:grid;gap:var(--ac-s4);padding:var(--ac-s5);border-radius:var(--ac-r-card);background:var(--ac-glass-dock);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:var(--ac-elev-pop)}
.ac-cook p{font-size:var(--ac-size-sm);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
.ac-cook u{text-decoration-color:var(--ac-line-strong);text-underline-offset:3px}
.ac-cook__a{display:flex;align-items:center;gap:var(--ac-s3)}
.ac-cook__b{display:inline-flex;align-items:center;justify-content:center;height:var(--ac-d-cta);padding:0 var(--ac-s5);border-radius:calc(var(--ac-d-cta) / 2);background:var(--ac-cta);color:var(--ac-on-ink);font-size:var(--ac-size-sm);font-weight:var(--ac-w-med);transition:background var(--ac-dur) var(--ac-ease)}
.ac-cook__b:hover{background:var(--ac-cta-press);color:var(--ac-on-ink)}
.ac-cook__b--gh{background:var(--ac-ghost);color:var(--ac-ink)}
.ac-cook__b--gh:hover{background:rgba(28,27,25,.1);color:var(--ac-ink)}

/* --- модальное окно ------------------------------------------------------- */
.ac-scrim{position:fixed;inset:0;z-index:80;background:var(--ac-scrim)}
.ac-modal{position:fixed;top:120px;left:50%;transform:translateX(-50%);z-index:90;width:560px;display:grid;gap:var(--ac-s5);padding:var(--ac-s8);border-radius:var(--ac-r-card);background:var(--ac-surface);box-shadow:var(--ac-elev-pop)}
.ac-modal__h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ac-s4)}
.ac-x{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--ac-r-pill);background:var(--ac-ghost);color:var(--ac-ink)}
.ac-x:hover{background:rgba(28,27,25,.1)}
.ac-obj{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:var(--ac-s3);padding:var(--ac-s3);border-radius:var(--ac-r-photo);background:var(--ac-bg)}
.ac-obj img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--ac-photo-bg)}