/* Дизайн ERA PRINT — CSS перенесён 1:1 из утверждённого макета ~/Desktop/на_сайт/index.html.
   Правки делать осознанно: любое отклонение ломает совпадение с макетом. */


:root{
  --red:#D9232A; --red-dark:#B91723; --red-hot:#EF4038; --ink:#17181C; --body:#4A4F5A;
  --meta:#8A8F9B; --bg:#F6F6F4; --card:#FFFFFF; --line:#ECEAE7; --tint:#FCECEA;
  --blush:#FBE9E7; --cream:#FAF3EE; --greige:#F2EEEA; --green:#1E9E56; --green-bg:#E4F5EC;
  --photo:#F2F2F4;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* кисть из логотипа как маска — красится currentColor, годится и в ::before */
  --brush-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 179'%3E%3Cpath d='M24,113 59,33 78,0 72,24 38,108 31,115 24,114Z' fill='%23000'/%3E%3Cpath d='M0,175 16,125 34,120 10,170 4,178 0,176Z' fill='%23000'/%3E%3C/svg%3E");
}
*{box-sizing:border-box; margin:0; padding:0}
/* Атрибут hidden должен скрывать всегда. Браузерное правило [hidden]{display:none}
   слабее любого нашего «.hicon .n{display:flex}», поэтому у пустого избранного
   в шапке горел нолик, хотя разметка помечала его скрытым, — и так же
   держались пустая лента миниатюр и пустой список размеров на карточке товара.
   Скрипт снимает атрибут, когда есть что показать, и правило перестаёт
   действовать само. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); line-height:1.5;
  font-family:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
.wrap{max-width:1280px; margin:0 auto; padding:0 26px}
h1,h2,h3{line-height:1.1; text-wrap:balance; letter-spacing:-.02em}
h2{font-size:clamp(28px,3.4vw,42px); font-weight:800}
.lbl{display:flex; align-items:center; gap:14px; font-size:12px; font-weight:800;
  letter-spacing:.35em; text-transform:uppercase; color:var(--red); margin-bottom:18px}
/* маркер разделов — фирменная кисть из логотипа (тот же контур, что в спрайте) */
.lbl::before{content:""; width:12px; height:26px; flex:0 0 auto; background:currentColor;
  -webkit-mask:var(--brush-mask) center/contain no-repeat;
  mask:var(--brush-mask) center/contain no-repeat}
/* Ритм страницы. Отступы были одинаковыми у всех секций — 78 между ними
   и 38 под заголовком, — но читались по-разному: у каталога содержимого
   на 878 пикселей, и воздух вокруг него в меру, а у «Нанесения» полоса
   в 112, и тот же воздух её топит. Пустоты вокруг тонкого блока не должно
   быть больше, чем самого блока.

   Поэтому воздуха меньше везде: 78 → 40 между секциями, 38 → 24 под
   заголовком. Плотные блоки от этого не страдают — у них работает
   собственное содержимое, — а тонкие перестают висеть в пустоте.

   Число одно на все секции. Разный зазор между блоками читается как сбой
   вёрстки, даже когда сделан нарочно: глаз ловит ритм раньше, чем смысл. */
.sec{padding-block:40px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:24px}
.sec-head p{color:var(--body); margin-top:12px; font-size:16px; max-width:60ch}
.sec-link{font-size:14.5px; font-weight:800; color:var(--red); white-space:nowrap; padding-bottom:6px}
.sec-link:hover{color:var(--red-dark)}

/* ── топ-бар ── */
.topbar{background:var(--ink); color:#B9BCC5; font-size:12.5px}
.topbar .in{display:flex; gap:26px; padding-block:9px; flex-wrap:wrap}
.topbar b{color:#fff; font-weight:600}
.topbar .r{margin-left:auto; display:flex; gap:22px}
.topbar a:hover{color:#fff}

/* ── шапка ── */
.hdr{background:var(--card)}
.hdr .in{display:flex; align-items:center; gap:30px; padding-block:18px}
.logo img{height:54px; width:auto}
.search{flex:1; display:flex; background:var(--bg); border:1.5px solid var(--line);
  border-radius:100px; padding:5px 5px 5px 22px; align-items:center; gap:10px}
.search svg{color:var(--meta); flex:0 0 auto}
.search input{flex:1; border:0; background:transparent; font-size:14px; color:var(--ink); outline:none; min-width:0}
.search input::placeholder{color:var(--meta)}
.search .go{border:0; background:var(--red); color:#fff; font-weight:700; font-size:13.5px;
  border-radius:100px; padding:11px 24px; transition:.15s}
.search .go:hover{background:var(--red-dark)}
.phone-box{text-align:right; line-height:1.5}
.phone-box a{font-size:15.5px; font-weight:800; display:block; white-space:nowrap}
.phone-box a:hover{color:var(--red)}
.hicons{display:flex; gap:22px}
.hicon{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; color:var(--body)}
.hicon svg{color:var(--ink)}
.hicon .n{position:absolute; top:-6px; right:0; min-width:17px; height:17px; border-radius:100px;
  background:var(--red); color:#fff; font-size:10.5px; font-weight:700; display:flex;
  align-items:center; justify-content:center; padding:0 4px}
.navrow{background:var(--card); border-bottom:1px solid var(--line)}
.navrow .in{display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; padding-bottom:14px}
.cat-btn{display:flex; align-items:center; gap:10px; background:var(--red); color:#fff;
  font-weight:700; font-size:14px; padding:13px 24px; border-radius:100px; border:0; transition:.15s}
.cat-btn:hover{background:var(--red-dark)}
.navrow a.item{font-size:13.5px; font-weight:600; padding:10px 14px; border-radius:100px; color:var(--body)}
.navrow a.item:hover{background:var(--tint); color:var(--red)}
.navrow .r{margin-left:auto; font-size:12.5px; color:var(--meta)}
.cat-btn{cursor:pointer; font-family:inherit}
.cat-btn[aria-expanded="true"]{background:var(--red-dark)}

/* Шапка с поиском и строка меню едут со страницей. Обе в одной обёртке:
   прилепленные по отдельности, они требуют отодвигать вторую на высоту
   первой, а та меняется от ширины экрана и от того, перенеслись ли пункты.
   Фон обязателен — под прозрачной шапкой проезжали бы карточки товаров. */
.sticky-top{position:sticky; top:0; z-index:80; background:var(--card)}
/* Тень появляется только когда под шапкой уже что-то проехало: у самого
   верха страницы она рисовала бы границу там, где ничего не кончается. */
.sticky-top.is-stuck{box-shadow:0 10px 26px -18px rgba(23,24,28,.4)}

/* выпадающий каталог: раскрывается поверх страницы, никуда не уводя.
   Точка отсчёта — контейнер строки меню, а не вся полоса: иначе коробка
   прижималась к краю окна, а не вставала под кнопкой «Каталог товаров». */
.navrow{position:relative}
.navrow .in{position:relative}
/* Каталог как у Проекта 111: коробка под кнопкой, разделы в три колонки,
   подразделы вылетают вбок вплотную к наведённому пункту.

   До этого пробовали две раскладки, и обе не работали. Двухпанельная —
   узкий список слева, панель справа — на «Ежедневниках» с двумя
   подразделами оставляла пустыми две трети экрана. Плитки во всю ширину
   с полосой подразделов внизу оставили другую беду: до полосы было не
   дойти, курсор по дороге задевал чужие плитки и список подменялся.
   Боковая панель убирает и то, и другое: она начинается ровно там, где
   кончается пункт, и сворачивать по пути некуда. */
/* Ширина от края до края .wrap, а не по содержимому. При width:max-content
   коробка пересчитывала себя от текста, и наведение на «Ежедневники»
   раздвигало всё меню: жирное начертание шире обычного. Теперь ширина
   задана снаружи и от содержимого не зависит вовсе. */
.cat-menu{position:absolute; left:26px; right:26px; top:100%; z-index:60;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 50px -24px rgba(23,24,28,.28)}
.cat-menu-in{padding:14px}
/* Подложка под сеткой разделов — чтобы белая панель подразделов поверх неё
   читалась как отдельный лист, а не как продолжение того же полотна. */
.cm-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px;
  padding:6px; border-radius:12px; background:var(--greige)}
.cm-cell{position:relative}
/* Иконка сверху, название под ней. Начертание при наведении НЕ меняется:
   жирный текст шире обычного, и подмена веса дёргала соседей на каждом
   движении мыши. Выделяем цветом и подложкой — этого хватает. */
.cm-tile{display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 8px 12px; border-radius:12px; text-align:center;
  font-size:13px; font-weight:600; color:var(--body); line-height:1.25;
  transition:background .12s, color .12s}
.cm-tile{background:var(--card)}
.cm-tile:hover,.cm-tile.on{background:var(--tint); color:var(--red)}
/* Под название всегда отведены две строки, а сам текст стоит по центру
   этого места. Без резерва «Дом» и «Зонты» поднимали свои счётчики выше
   соседних, и ряд выглядел рваным; без центрирования однострочные названия
   прижимались кверху и отрывались от своей цифры. */
.cm-tile span{display:flex; align-items:center; justify-content:center;
  width:100%; min-height:2.4em}
.cm-tile i{font-style:normal; font-size:11px; color:var(--meta); margin-top:-2px}
.cm-tile:hover i,.cm-tile.on i{color:var(--red)}
.cm-ic{width:34px; height:34px; flex:0 0 auto; object-fit:contain}

/* Панель прижата к правому краю своего пункта: left:100% и top:0 отсчитываются
   от ячейки раздела. Отсюда и вертикальное совпадение с пунктом, и отсутствие
   зазора, в котором курсор успел бы соскочить на соседа. */
/* Подразделы уходят вниз из-под своей плитки, со смещением вправо.
   Смещение небольшое и намеренное: панель начинается внутри плитки, а не
   за её краем, поэтому между ними нет зазора, где курсор соскочил бы
   на соседа. Плитки под панелью она просто накрывает — они не мешают. */
/* Панель непрозрачная и отделена от меню: белое на белом читалось как
   продолжение сетки, а не как отдельный список — граница в один пиксель
   и мягкая тень эту разницу не держали. Своя подложка, чёткий контур
   и заметная тень делают её отдельным листом поверх каталога. */
.cm-panel{display:none; position:absolute; left:18px; top:calc(100% - 6px);
  z-index:5; min-width:242px; max-width:320px; padding:10px 12px;
  background:#fff; border:1px solid var(--line-strong, #d7d9e0); border-radius:14px;
  box-shadow:0 4px 10px -2px rgba(23,24,28,.10), 0 22px 44px -16px rgba(23,24,28,.42)}
.cm-panel.on{display:block}
/* Две последние колонки прижаты к правому краю меню — им ехать некуда,
   разворачиваем от правого края плитки влево. */
.cm-cell:nth-child(6n) .cm-panel,
.cm-cell:nth-child(6n-1) .cm-panel{left:auto; right:18px}
.cm-panel-head{display:inline-flex; align-items:center; gap:6px; margin-bottom:8px;
  padding-bottom:8px; border-bottom:1px solid var(--line); width:100%;
  font-size:12px; font-weight:800; color:var(--meta); text-transform:uppercase;
  letter-spacing:.03em}
.cm-panel-head:hover{color:var(--red)}
.cm-list{list-style:none; display:grid; gap:1px}
.cm-list a{display:flex; justify-content:space-between; gap:12px;
  padding:6px 8px; border-radius:8px; font-size:13px; color:var(--body)}
.cm-list a:hover{background:var(--tint); color:var(--red)}
.cm-list i{font-style:normal; font-size:11px; color:var(--meta)}

.cm-all{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin:10px 0 2px 3px; padding:8px 15px; border:1px dashed var(--red);
  border-radius:100px; color:var(--red); font-weight:800; font-size:12.5px;
  background:var(--tint)}
.cm-all:hover{background:var(--red); color:#fff; border-style:solid}
@media (max-width:900px){
  .cat-menu{left:0; right:0; width:auto; max-width:none; max-height:76vh;
    overflow-y:auto; border-radius:0; border-left:0; border-right:0}
  .cm-grid{grid-template-columns:1fr}
  /* На узком экране вбок ехать некуда — подразделы разворачиваются под
     пунктом, как обычный список. Наведения на телефоне всё равно нет. */
  .cm-panel,.cm-cell:nth-child(4n) .cm-panel{position:static; display:block;
    min-width:0; max-width:none; margin:0 0 6px 30px; padding:2px 0 6px;
    border:0; border-left:2px solid var(--line); border-radius:0;
    padding-left:12px; box-shadow:none}
  .cm-panel-head{display:none}
}

/* ── карусель ── */
.car-zone{padding-top:26px}
.car{position:relative}
.car-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:28px;
  scrollbar-width:none; -ms-overflow-style:none}
.car-track::-webkit-scrollbar{display:none}
.slide{position:relative; flex:0 0 100%; min-height:480px; scroll-snap-align:start;
  display:grid; grid-template-columns:1.05fr .95fr; gap:20px; overflow:hidden;
  padding:clamp(30px,4.5vw,60px)}
.slide-copy{position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
.s-eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.34em; text-transform:uppercase; margin-bottom:18px}
.slide h2{font-size:clamp(30px,4vw,52px); margin-bottom:16px}
.slide .sub{font-size:clamp(14.5px,1.5vw,17px); margin-bottom:28px; max-width:46ch}
.s-cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0;
  font-weight:700; font-size:14.5px; border-radius:100px; padding:15px 30px; transition:.18s}
.btn:hover{transform:translateY(-2px)}
.btn.red{background:var(--red); color:#fff}
.btn.red:hover{background:var(--red-dark)}
.btn.white{background:#fff; color:var(--red)}
.btn.dark{background:var(--ink); color:#fff}
.btn.ghostw{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5)}
.btn.ghostw:hover{border-color:#fff; transform:none}
/* слайд 1 — антрацит */
.s1{background:#17181C; color:#fff}
.s1::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(58% 75% at 78% 30%, rgba(217,35,42,.42), transparent 70%),
             radial-gradient(45% 60% at 12% 92%, rgba(217,35,42,.22), transparent 70%)}
.s1::after{content:""; position:absolute; inset:0; z-index:1; background-image:var(--noise); opacity:.05; pointer-events:none}
.s1 .s-eyebrow{color:#FF9E99}
.s1 .sub{color:#C8CAD2}
.s1 .art{position:relative; z-index:2; align-self:center; justify-self:center; width:min(430px,100%)}
.glass{position:absolute; z-index:4; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.94); color:var(--ink); font-size:12.5px; font-weight:700;
  border-radius:100px; padding:10px 16px; box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
.glass .dot{width:8px; height:8px; border-radius:50%; background:var(--green)}
.glass.g1{right:6%; top:11%}
.glass.g2{right:12%; bottom:12%}
/* слайд 2 — красный */
.s2{background:linear-gradient(118deg,#B91723, #D9232A 52%, #EF4038); color:#fff}
.s2::before{content:""; position:absolute; inset:0; opacity:.08; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='18' y='24' width='34' height='26' rx='4'/%3E%3Cpath d='M18 34h34M35 24v26'/%3E%3Crect x='104' y='18' width='26' height='30' rx='5'/%3E%3Cpath d='M130 24c8 0 8 16 0 16'/%3E%3Cpath d='M28 112l26-26M46 82l8 4-4 8z'/%3E%3Ccircle cx='124' cy='116' r='15'/%3E%3Cpath d='M124 104v6M124 122v6M112 116h6M130 116h6'/%3E%3C/g%3E%3C/svg%3E")}
.s2 .stroke{position:absolute; z-index:1; width:340px; height:22px; border-radius:12px;
  background:linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.06));
  transform:rotate(-32deg)}
.s2 .stroke.a{right:-40px; top:70px}
.s2 .stroke.b{right:90px; top:130px; width:240px; opacity:.6}
.s2 .big24{position:absolute; z-index:1; right:4%; bottom:-38px; font-size:clamp(150px,20vw,250px);
  font-weight:800; letter-spacing:-.04em; color:rgba(255,255,255,.16); line-height:1;
  font-variant-numeric:tabular-nums; user-select:none}
.s2 .s-eyebrow{color:#FFD3D1}
.s2 .sub{color:#FFE2E0}
.s2 .art{position:relative; z-index:2; align-self:center; justify-self:center; width:min(410px,100%)}
/* слайд 3 — blush */
.s3{background:var(--blush)}
.s3::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(34% 52% at 90% 12%, rgba(217,35,42,.16), transparent 72%),
             radial-gradient(40% 58% at 6% 100%, rgba(217,35,42,.12), transparent 72%)}
.s3 .s-eyebrow{color:var(--red)}
.s3 .sub{color:var(--body)}
.s3 .art{position:relative; z-index:2; align-self:center; justify-self:center; width:min(360px,90%)}
.s3 .ph-card{box-shadow:0 30px 56px -26px rgba(23,24,28,.32), 0 10px 20px -14px rgba(23,24,28,.16)}

/* фото-карточки карусели v2 */
.ph2-scene{position:relative; width:min(440px,100%)}
.ph2-card{background:#fff; border-radius:24px; padding:12px; transform:rotate(-3deg);
  box-shadow:0 34px 64px -24px rgba(0,0,0,.5)}
.s2 .ph2-card{transform:rotate(2.5deg)}
.s3 .ph2-card{transform:rotate(-2deg); box-shadow:0 28px 52px -26px rgba(23,24,28,.28)}
.ph2-card img{display:block; width:100%; height:auto; border-radius:15px}
.ph2-stamp{position:absolute; right:-16px; top:-20px; width:88px; height:88px; border-radius:50%;
  background:var(--red); color:#fff; font-weight:800; font-size:21px; display:flex; align-items:center;
  justify-content:center; transform:rotate(8deg); box-shadow:0 16px 32px -12px rgba(185,23,35,.55)}
.ph2-stamp::before{content:""; position:absolute; inset:7px; border:2px dashed rgba(255,255,255,.85); border-radius:50%}
/* стрелки и точки */
.car-arrow{position:absolute; z-index:6; top:50%; transform:translateY(-50%); width:52px; height:52px;
  border-radius:50%; border:0; background:rgba(255,255,255,.95); color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -10px rgba(0,0,0,.35); transition:.15s}
.car-arrow:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.car-arrow.prev{left:18px}
.car-arrow.next{right:18px}
.car-dots{position:absolute; z-index:6; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; gap:8px}
.cdot{width:10px; height:10px; border-radius:100px; border:0; background:rgba(255,255,255,.55);
  transition:.25s; padding:0}
.s3-active .cdot{background:rgba(23,24,28,.25)}
.cdot.on{width:30px; background:#fff}
.s3-active .cdot.on{background:var(--red)}
.cdot:hover{background:#fff}

/* ── тикер ── */
.ticker{margin-top:16px; border-radius:100px; background:var(--ink); overflow:hidden; position:relative}
.ticker .tin{display:flex; white-space:nowrap; width:max-content; animation:tick 30s linear infinite; padding:13px 0}
.ticker:hover .tin{animation-play-state:paused}
.ticker span{font-size:12.5px; font-weight:800; letter-spacing:.22em; color:#fff; text-transform:uppercase}
.ticker i{font-style:normal; color:var(--red-hot); margin:0 18px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── УТП ── */
.usp{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; padding-top:34px}
.u{display:flex; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:18px 20px; transition:.15s}
.u:hover{transform:translateY(-2px); box-shadow:0 16px 34px -18px rgba(23,24,28,.16)}
.u .ic{flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--tint);
  color:var(--red); display:flex; align-items:center; justify-content:center}
.u b{display:block; font-size:14.5px; font-weight:800}
.u small{font-size:12.5px; color:var(--meta)}

/* ── категории ── */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cat{position:relative; border-radius:22px; padding:22px 22px 18px; overflow:hidden;
  display:flex; flex-direction:column; gap:14px; transition:.2s; border:1px solid transparent}
.cat:nth-child(6n+1){background:var(--blush)}
.cat:nth-child(6n+2){background:var(--cream)}
.cat:nth-child(6n+3){background:var(--greige)}
.cat:nth-child(6n+4){background:var(--cream)}
.cat:nth-child(6n+5){background:var(--blush)}
.cat:nth-child(6n+6){background:var(--greige)}
.cat:hover{transform:translateY(-4px); box-shadow:0 22px 44px -20px rgba(23,24,28,.2)}
.cat .eimg{height:86px; width:auto; margin:6px auto; transition:.25s}
.cat:hover .eimg{transform:rotate(-5deg) translateY(-4px) scale(1.05)}
.cat b{font-size:15px; font-weight:800; line-height:1.25}
.cat small{font-size:12px; color:var(--meta)}
.cat.all{grid-column:4; grid-row:1/3; background:linear-gradient(160deg,var(--red-dark),var(--red) 55%,var(--red-hot));
  color:#fff; justify-content:flex-end; align-items:flex-start; gap:12px; position:relative}
.cat.all::before{content:""; position:absolute; right:-52px; top:-52px; width:190px; height:190px;
  border-radius:50%; background:rgba(255,255,255,.12)}
.cat.all::after{content:""; position:absolute; right:26px; bottom:88px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,255,255,.08)}
.cat.all small{color:#FFD3D1}
.cat.all b{font-size:20px}
.cat.all .arr{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; margin-bottom:auto; transition:.2s}
.cat.all:hover .arr{background:#fff; color:var(--red)}

/* ── товары ── */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:12.5px; font-weight:700; padding:9px 16px; border-radius:100px;
  background:var(--card); border:1.5px solid var(--line); color:var(--body); transition:.14s}
.chip:hover{border-color:var(--red); color:var(--red)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; margin-top:24px}
.pcard{position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:14px; display:flex; flex-direction:column; transition:.2s}
.pcard:hover{box-shadow:0 26px 52px -22px rgba(23,24,28,.28); transform:translateY(-4px)}
.photo{position:relative; border-radius:14px; background:linear-gradient(160deg,#F6F6F8,#EDEDF0);
  aspect-ratio:1.04; display:flex; align-items:center; justify-content:center; margin-bottom:12px; overflow:hidden}
.photo::after{content:""; position:absolute; left:-30%; top:-60%; width:80%; height:160%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:rotate(8deg)}
.badges{position:absolute; left:10px; top:10px; z-index:2; display:flex; flex-direction:column; gap:5px}
.bdg{font-size:10px; font-weight:800; letter-spacing:.06em; padding:5px 9px; border-radius:7px; color:#fff}
.bdg.hit{background:linear-gradient(120deg,var(--red-dark),var(--red-hot))}
.bdg.new{background:linear-gradient(120deg,#177E45,#25B368)}
.fav{position:absolute; right:10px; top:10px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:#C0C5CF; transition:.15s}
.fav:hover{color:var(--red); transform:scale(1.08)}
.sw-row{display:flex; align-items:center; gap:6px; margin-bottom:9px; flex-wrap:wrap}
.sw{width:16px; height:16px; flex:0 0 auto; padding:0; border-radius:50%;
  border:1px solid rgba(0,0,0,.14); cursor:pointer; appearance:none;
  background-clip:padding-box; transition:transform .12s ease}
.sw:hover{transform:scale(1.15)}
.sw.sel{outline:2px solid var(--red); outline-offset:1.5px}
.sw-more{font-size:11px; font-weight:700; color:var(--meta)}
.art{font-size:11.5px; color:var(--meta); margin-bottom:5px}
.pname{font-size:14.5px; font-weight:700; line-height:1.35; min-height:39px; margin-bottom:5px}
.rate{display:flex; gap:6px; font-size:11.5px; color:var(--meta); margin-bottom:8px}
.rate .st{color:#F5A623; letter-spacing:.5px; font-size:11px}
.rate b{color:var(--ink)}
.price-row{display:flex; align-items:baseline; gap:8px}
/* Цена: раньше вся строка «от 411 до 501 ₽/шт» была 19 px жирным и кричала
   громче названия. Теперь акцент только на минимуме, верхняя граница — справка. */
.price{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.price b{font-size:16px; font-weight:800}
.price i{font-style:normal; font-size:12.5px; font-weight:600; color:var(--meta)}
.price small{font-size:11.5px; font-weight:600; color:var(--meta)}
.tirazh{font-size:11.5px; color:var(--meta); margin:2px 0 9px}
.tirazh b{color:var(--ink)}
.stock{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--body);
  padding-top:9px; border-top:1px dashed var(--line); font-variant-numeric:tabular-nums}
.stock::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green)}
.stock.order::before{background:#98A0AE}
.stock b{color:var(--ink)}
.btn-red{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--red);
  color:#fff; font-weight:700; font-size:13px; border-radius:100px; padding:12px; border:0; transition:.15s}
.btn-red:hover{background:var(--red-dark)}
@media (hover:hover){
  .pcta{opacity:0; transform:translateY(4px); transition:.18s}
  .pcard:hover .pcta{opacity:1; transform:none}
}


/* ── фишки ── */
.tools{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px}
.tool{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px;
  display:flex; flex-direction:column; gap:13px}
.t-name{font-size:17px; font-weight:800}
.t-sub{font-size:12.5px; color:var(--meta); margin-top:-7px}
.t-row{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--body)}
.t-row b{font-size:16px; font-variant-numeric:tabular-nums}
#cRange{accent-color:var(--red); width:100%; height:26px}
.t-chips{display:flex; gap:7px; flex-wrap:wrap}
.t-chip{font-size:12px; font-weight:700; border:1.5px solid var(--line); background:#fff;
  border-radius:100px; padding:7px 13px; color:var(--body); cursor:pointer}
.t-chip.on{border-color:var(--red); color:var(--red); background:var(--tint)}
.t-out{display:flex; gap:24px; align-items:center; flex-wrap:wrap; background:var(--bg);
  border-radius:14px; padding:14px 18px}
.t-out em{display:block; font-style:normal; font-size:11px; color:var(--meta)}
.t-out b{font-size:22px; font-weight:800; color:var(--red); font-variant-numeric:tabular-nums}
.t-out .t-per b{color:var(--ink)}
.t-save{font-size:12px; font-weight:800; color:var(--green); margin-left:auto}
.t-note{font-size:11px; color:var(--meta)}
.fit-stage{position:relative; align-self:center; background:var(--photo); border-radius:18px; padding:16px 34px 10px}
.fit-zone{position:absolute; left:74px; top:74px; width:96px; height:58px; background:#fff;
  border:2px dashed var(--red); border-radius:9px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.fit-zone img{max-width:100%; max-height:100%; object-fit:contain; display:none}
.fit-zone.has img{display:block}
.fit-zone.has span{display:none}
.fit-zone span{font-size:8.5px; font-weight:800; letter-spacing:.06em; color:var(--red); text-transform:uppercase; text-align:center}
.t-upload{align-self:flex-start; padding:11px 20px; font-size:13px; cursor:pointer; flex:0 0 auto}
.t-date{border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; font:inherit;
  font-size:14px; color:var(--ink); background:#fff; width:100%}
.t-verdict{font-size:13px; font-weight:700; background:var(--bg); border-radius:12px; padding:13px 15px; color:var(--body)}
.t-verdict.ok{background:var(--green-bg); color:var(--green)}
.t-verdict.rush{background:#FDEBD7; color:#C96A00}
.t-verdict.no{background:var(--tint); color:var(--red)}
@media (max-width:1020px){ .tools{grid-template-columns:1fr} }
/* ── методы ── */
/* технологии нанесения — строго в одну линию, сколько бы методов ни было */
.methods{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:12px}
.methods .method{padding:18px 8px}
.methods .method .mi{width:48px; height:48px; margin-bottom:10px}
.methods .method b{font-size:12px}
@media (max-width:1060px){
  .methods{grid-auto-flow:row; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
.method{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px 12px;
  text-align:center; transition:.18s}
.method:hover{transform:translateY(-4px); box-shadow:0 18px 38px -18px rgba(23,24,28,.18); border-color:#F0C4C2}
.method .mi{width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FDF4F3, var(--tint)); color:var(--red);
  display:flex; align-items:center; justify-content:center}
.method b{font-size:13px; font-weight:800; display:block; line-height:1.3}
.method small{font-size:11px; color:var(--meta)}

/* ── шаги ── */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:s}
.steps::before{content:""; position:absolute; left:4%; right:4%; top:44px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--red) 0 74%, var(--line) 74%)}
.step{position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:24px; margin-top:24px}
.step::before{counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; top:-24px; left:22px; width:48px; height:48px; border-radius:50%;
  background:var(--red); color:#fff; font-size:15px; font-weight:800; display:flex;
  align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--bg)}
.step:last-child::before{background:var(--ink)}
.step h3{font-size:16.5px; font-weight:800; margin:14px 0 7px}
.step p{font-size:13.5px; color:var(--body)}
.when{display:inline-block; margin-top:14px; font-size:11.5px; font-weight:800;
  color:var(--green); background:var(--green-bg); border-radius:100px; padding:6px 13px}

/* ── отзывы ──
   Отзывы настоящие, из Яндекс Карт. Раньше карточка была 199px высотой из-за
   отступа 56px под огромную кавычку — блок на главной выходил великоват.
   Кавычку убрали, имя и оценка стоят строкой сверху, дата — мелким снизу. */
.sec-aside{display:flex; align-items:center; gap:14px; padding-bottom:2px}
.ya-rating{display:inline-flex; align-items:center; gap:9px; padding:7px 14px;
  border:1px solid var(--line); border-radius:100px;
  background:var(--white); color:var(--body); font-size:13px; white-space:nowrap}
.ya-rating:hover{border-color:var(--red)}
.ya-mark{font-size:17px; font-weight:800; color:var(--ink)}
.ya-stars{color:#F5A623; font-size:13px; letter-spacing:1px}
.ya-src{color:var(--meta)}

/* Карточка отзыва: аватар с инициалом, имя и дата, звёзды справа, текст цитатой.
   Кавычка нарисована фоном в углу — не съедает 56px отступа, как раньше. */
.rev{position:relative; overflow:hidden; margin:0; padding:16px 18px 18px;
  border:1px solid var(--line); border-radius:16px; background:var(--white);
  display:flex; flex-direction:column; gap:12px; transition:box-shadow .18s,border-color .18s}
.rev:hover{border-color:#E4C9C9; box-shadow:0 16px 34px -22px rgba(23,24,28,.35)}
/* Шапка ровно в высоту аватара: длинное имя переносится на вторую строку
   внутри той же высоты, поэтому карточка от длины имени не растёт.
   Звёзд здесь нет — в узкой колонке они отбирали место у имени. */
.rev-head{display:flex; align-items:center; gap:10px; min-height:34px}
.rev-ava{flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--tint); color:var(--red); font-weight:800; font-size:15px}
.rev-who{min-width:0; font-size:13.5px; font-weight:800; line-height:1.25;
  color:var(--ink); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.rev-text{position:relative; min-width:0}
.rev blockquote{margin:0; font-size:14px; line-height:1.55; color:#3E434E}
/* «Читать дальше» стоит в строке, заранее оставленной под него в блоке текста:
   своей строкой в потоке кнопка добавляла высоту не всем карточкам, и ряд
   с ней выпирал, а поверх текста она читалась как наложение */
.rev-full{position:absolute; left:0; bottom:0; padding:0; border:0;
  background:none; color:var(--red); font:inherit; font-size:13px;
  font-weight:700; white-space:nowrap; cursor:pointer}
.rev-full:hover{color:var(--red-dark)}
.rev-full[hidden]{display:none}
/* нижняя строка: оценка и дата всегда на одном и том же месте */
.rev-foot{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:auto; height:18px}
.rev-stars{color:#F5A623; font-size:12px; letter-spacing:1px; white-space:nowrap}
.rev-foot small{margin-left:auto; font-size:12px; color:var(--meta); white-space:nowrap}
/* в карусели все карточки одной высоты: длинный отзыв обрезаем по четырём
   строкам, целиком он есть на странице отзывов */
.rev.is-clamped blockquote{display:-webkit-box; -webkit-line-clamp:4;
  -webkit-box-orient:vertical; overflow:hidden}

/* лента отзывов на главной — тот же ряд со стрелками, что и «Хиты со склада».
   Отступ сверху меньше, чем у товарного ряда: у карточки отзыва нет фото,
   и блок иначе выходит высоким. */
.revs-track{align-items:stretch; margin-top:6px}
.revs-track > .rev{flex:0 0 320px; scroll-snap-align:start}
.revs-row .prow-track{scroll-snap-type:x proximity}

/* страница отзывов: слева оценка, справа стена карточек в колонках.
   Колонки, а не грид — короткий отзыв не тянется до высоты длинного соседа. */
.revs-page{display:grid; grid-template-columns:280px minmax(0,1fr); gap:22px; align-items:start}
.revs-score{position:sticky; top:16px; padding:22px; border:1px solid var(--line);
  border-radius:18px; background:var(--white); text-align:center}
.score-mark{font-size:52px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink)}
.score-stars{margin-top:8px; color:#F5A623; font-size:17px; letter-spacing:3px}
.score-note{margin-top:8px; font-size:13.5px; font-weight:700; color:var(--body)}
.score-src{margin:12px 0 16px; font-size:12px; line-height:1.45; color:var(--meta)}
.revs-score .btn-red{display:block; padding:12px 16px; border-radius:100px;
  background:var(--red); color:#fff; font-weight:800; font-size:14px}
.revs-score .btn-red:hover{background:var(--red-dark)}
.score-link{display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--red)}
/* Стена отзывов — ровная сетка: карточки одной ширины и одной высоты.
   Колонки с «плиткой по высоте текста» смотрелись рвано: рядом стояли карточка
   в две строки и карточка в десять. Текст обрезан по шести строкам, поэтому
   содержимое у всех одинаковое, а ряды выходят вровень сами. */
/* Ровно три карточки в ряд: auto-fill на широком экране раскладывал четыре. */
.revs-wall{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px; align-items:stretch}
@media (max-width:1100px){ .revs-wall{grid-template-columns:repeat(2,minmax(0,1fr))} }
.revs-wall > .rev[hidden]{display:none}
/* Блок текста одной высоты у всех: пять строк (14px × 1.55) плюс строка под
   «Читать дальше». Точные px, а не «сколько получится»: округление строк
   давало карточки 241 и 243 px в одной сетке. */
.revs-wall .rev-text{height:132px}
.revs-wall .rev blockquote{display:-webkit-box; -webkit-line-clamp:5;
  -webkit-box-orient:vertical; overflow:hidden; height:110px}
/* карточку, у которой текст не поместился, можно раскрыть — тогда вровень
   встаёт её ряд, а не вся стена */
.revs-wall .rev.is-open .rev-text{height:auto}
.revs-wall .rev.is-open blockquote{-webkit-line-clamp:unset; overflow:visible; height:auto}
/* кнопка «Показать ещё N отзывов» под стеной: страница не заставляет
   прокручивать все семнадцать, если человек их не просил */
.revs-more{grid-column:1/-1; align-self:center;
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:13px 20px; border:1px solid var(--line);
  border-radius:100px; background:var(--white); color:var(--ink);
  font:inherit; font-size:14px; font-weight:800; transition:.16s}
.revs-more:hover{border-color:var(--red); color:var(--red)}
.revs-more svg{color:var(--red)}
.revs-more[hidden]{display:none}

/* на телефоне плашка с рейтингом и ссылка не влезают в строку с заголовком */
@media (max-width:760px){
  .sec-head{flex-wrap:wrap}
  .sec-aside{flex-wrap:wrap; gap:10px}
  .revs-page{grid-template-columns:1fr}
  .revs-score{position:static}
  .revs-wall{grid-template-columns:1fr}
  .revs-track > .rev{flex:0 0 84%}
}

/* ── CTA ── */
.cta-band{position:relative; overflow:hidden; background:var(--ink); border-radius:28px; color:#fff;
  padding:clamp(34px,4.5vw,60px); display:flex; align-items:center; gap:34px; flex-wrap:wrap}
.cta-band::before{content:""; position:absolute; inset:0;
  background:radial-gradient(52% 80% at 85% 20%, rgba(217,35,42,.4), transparent 70%)}
.cta-band::after{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.05; pointer-events:none}
.cta-band > *{position:relative; z-index:2}
.cta-band h2{margin-bottom:10px}
.cta-band p{color:#C8CAD2; font-size:15px; max-width:52ch}
.cta-act{margin-left:auto; display:flex; flex-direction:column; gap:14px; align-items:flex-end}
.mgr{display:flex; align-items:center; gap:12px}
.mgr .ava{position:relative; width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,var(--red),var(--red-hot)); display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:20px; color:#fff}
.mgr .ava::after{content:""; position:absolute; right:1px; bottom:1px; width:12px; height:12px;
  border-radius:50%; background:var(--green); border:2.5px solid var(--ink)}
.mgr b{display:block; font-size:14px}
.mgr small{font-size:12px; color:#9DA1AB}
.cta-btns{display:flex; gap:12px; flex-wrap:wrap}

/* ── футер ── */
footer{background:var(--ink); color:#B9BCC5}
.foot{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:28px; padding-block:28px 22px}
.flogo-img{height:64px; width:auto; margin-bottom:10px}
.flogo{display:flex; flex-direction:column; width:max-content; margin-bottom:18px; line-height:1}
.flogo .l1{font-size:38px; font-weight:800; letter-spacing:-.01em; color:var(--red)}
.flogo .l2{font-size:13px; font-weight:800; letter-spacing:.52em; text-indent:.08em; color:#fff; margin-top:7px}
.flogo .l3{height:2.5px; background:var(--red); margin:9px 0 8px}
.flogo .l4{font-size:9.5px; font-weight:700; letter-spacing:.34em; color:#fff}
.foot p{font-size:12px; line-height:1.45}
.foot h4{color:#fff; font-size:11px; font-weight:800; letter-spacing:.25em; text-transform:uppercase; margin-bottom:10px}
.foot ul{list-style:none; display:flex; flex-direction:column; gap:5px; font-size:12px; line-height:1.35}
.foot a:hover{color:#fff}
.fcont{display:flex; flex-direction:column; gap:8px; font-size:12px; line-height:1.4}
.fcont b{color:#fff; font-size:14px; font-weight:800; display:block}
.copy{border-top:1px solid #26272D; padding-block:11px; font-size:11.5px; color:#7D808A;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

:where(a,button,input):focus-visible{outline:2px solid var(--red); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}
@media (max-width:1150px){
  .navrow a.item{font-size:12.5px; padding:8px 9px}
}
@media (max-width:1020px){
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat.all{grid-column:1/-1; grid-row:auto; justify-content:center}
}
@media (max-width:860px){
  .slide{grid-template-columns:1fr; min-height:520px}
  .s1 .art,.s2 .art,.s3 .art{display:none}
  .glass{display:none}
  .car-arrow{display:none}
}
@media (max-width:640px){
  .hdr .in{flex-wrap:wrap; gap:14px}
  .search{order:3; max-width:none; flex-basis:100%}
  .phone-box{display:none}
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .cta-act{margin-left:0; align-items:flex-start}
}


/* ── Правки по замечаниям (карусель хитов, кнопка на фото, отступы) ───────── */

/* меньше воздуха между блоком преимуществ и каталогом */
.usp{padding-top:26px}
#catalog{padding-top:34px !important}

/* последний пункт меню ровно по правому краю контентной сетки */
.navrow .in > a.item:last-child{padding-right:0}

/* горизонтальная карусель товаров */
.prow{position:relative}
/* без scroll-behavior:smooth — плавность делает era.js, иначе прокрутка
   не работает там, где анимации отключены */
.prow-track{display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  margin-top:24px; padding:4px; scrollbar-width:none}
.prow-track::-webkit-scrollbar{display:none}
.prow-track > .pcard{flex:0 0 258px; margin-top:0}
.prow-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -12px rgba(23,24,28,.28); transition:.16s}
.prow-arrow:hover{background:var(--red); color:#fff; border-color:var(--red)}
.prow-arrow.prev{left:-16px}
.prow-arrow.next{right:-16px}
.prow-arrow[hidden]{display:none}

/* кнопка «Заказать» поверх фото — карточка без пустоты снизу */
.pcard .photo{position:relative; overflow:hidden}
.photo-cta{position:absolute; inset:0; display:flex; align-items:flex-end;
  justify-content:center; padding:14px; opacity:0; transition:.18s;
  background:linear-gradient(to top, rgba(23,24,28,.55), rgba(23,24,28,0) 58%)}
.pcard:hover .photo-cta,.pcard:focus-within .photo-cta{opacity:1}
.photo-cta .btn-red{display:inline-flex; align-items:center; gap:8px;
  background:var(--red); color:#fff; font-weight:700; font-size:13.5px;
  padding:11px 20px; border-radius:100px}
.photo-cta .btn-red:hover{background:var(--red-dark)}
@media (hover:none){ .photo-cta{opacity:1} }

@media (max-width:640px){
  .prow-arrow{display:none}
  .prow-track > .pcard{flex:0 0 78%}
}


/* ── внутренние страницы: каталог и карточка товара ─────────────────────── */
:root{
  --ep-red:#D9232A; --ep-red-dark:#B91723; --ep-ink:#20242C; --ep-body:#4C525E;
  --ep-meta:#8A90A0; --ep-line:#E8EAEF; --ep-bg:#F5F6F8; --ep-photo:#F1F2F5;
  --ep-white:#FFFFFF; --ep-green:#1E9E56; --ep-green-bg:#E4F5EC; --ep-amber:#F07F1A;
  --ep-tint:#FBECEC; --ep-slate:#5B6472;
}

.shop.inner-shop{min-height:60vh; padding:0; background:var(--ep-bg); color:var(--ep-ink);
  font-family:inherit; font-size:14px; line-height:1.45; text-align:left}
.shop :where(button,input,select,textarea){font-family:inherit}
.shop .crumbs{display:flex; align-items:center; gap:8px; padding:18px 0 14px;
  font-size:12.5px; color:var(--ep-meta); overflow:hidden}
.shop .crumbs a{transition:color .15s}
.shop .crumbs a:hover{color:var(--ep-red)}

/* каталог: фильтры */
.shop .cat-body{display:grid; grid-template-columns:264px minmax(0,1fr); gap:24px; margin:0; padding:0}
.shop .side{position:sticky; top:18px; display:flex; flex-direction:column; align-self:start;
  max-height:calc(100vh - 36px); overflow-x:hidden; overflow-y:auto;
  background:var(--ep-white); border:1px solid var(--ep-line); border-radius:14px}
.shop .f-group{padding:16px 18px; border-bottom:1px solid var(--ep-line)}
.shop .f-title{display:flex; justify-content:space-between; align-items:center; font-size:13px;
  font-weight:800; margin-bottom:12px}
.shop .subcats{list-style:none; display:flex; flex-direction:column; gap:9px; font-size:13px}
.shop .subcats a{display:flex; justify-content:space-between; gap:8px; color:var(--ep-body)}
.shop .subcats a:hover b,.shop .subcats a.on b{color:var(--ep-red)}
.shop .subcats a b{font-weight:600; transition:color .15s}
.shop .subcats .n{color:var(--ep-meta); font-size:11.5px}
.shop .switch-row{position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:13px; font-weight:600; cursor:pointer}
.shop .switch-input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.shop .switch{width:38px; height:22px; border-radius:100px; background:#C9CDD6; position:relative;
  flex:0 0 auto; transition:background .15s}
.shop .switch::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(32,36,44,.18); transition:transform .15s}
.shop .switch-input:checked + .switch{background:var(--ep-green)}
.shop .switch-input:checked + .switch::after{transform:translateX(16px)}
.shop .switch-input:focus-visible + .switch{outline:2px solid var(--ep-red); outline-offset:2px}
.shop .f-search-field{display:flex; align-items:center; gap:8px; border:1.5px solid var(--ep-line);
  border-radius:9px; padding:8px 11px; background:var(--ep-white); color:var(--ep-meta)}
.shop .f-search-field:focus-within{border-color:var(--ep-red)}
.shop .f-search-field input{width:100%; min-width:0; border:0; outline:0; background:transparent;
  color:var(--ep-ink); font:inherit; font-size:12.5px}
.shop .f-search-field input::placeholder{color:var(--ep-meta)}
.shop .range-inputs{display:flex; gap:8px; margin-bottom:12px}
.shop .range-inputs label{display:flex; align-items:center; min-width:0; flex:1; border:1.5px solid var(--ep-line);
  border-radius:8px; padding:7px 10px; background:var(--ep-white)}
.shop .range-inputs label:focus-within{border-color:var(--ep-red)}
.shop .range-inputs span{margin-right:6px; color:var(--ep-meta); font-size:12.5px}
.shop .range-inputs input{width:100%; min-width:0; border:0; outline:0; background:transparent;
  color:var(--ep-body); font:inherit; font-size:12.5px}
/* Ползунок цены рабочий: ручки таскаются мышью, пальцем и стрелками.
   Раньше это была картинка — два кружка на зашитых процентах. */
.shop .slider{position:relative; height:4px; border-radius:2px; background:var(--ep-line);
  margin:4px 8px 10px; touch-action:none; cursor:pointer}
.shop .slider i{position:absolute; left:0; right:0; inset-block:0; background:var(--ep-red); border-radius:2px}
.shop .slider u{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff;
  border:2.5px solid var(--ep-red); transform:translate(-50%,-50%); text-decoration:none;
  cursor:grab; touch-action:none; transition:box-shadow .14s}
.shop .slider u:hover, .shop .slider u:focus-visible{box-shadow:0 0 0 5px rgba(217,35,42,.14); outline:0}
.shop .slider.is-dragging u{cursor:grabbing}
.shop .slider[hidden]{display:none}
.shop .f-select{width:100%; border:1.5px solid var(--ep-line); border-radius:9px; padding:9px 11px;
  background:#fff; color:var(--ep-ink); font:inherit; font-size:12.5px}
.shop .f-apply{position:sticky; bottom:0; display:flex; flex-direction:column; gap:8px; padding:14px 18px;
  border-top:1px solid var(--ep-line); background:var(--ep-white)}
.shop .btn-red{display:flex; align-items:center; justify-content:center; gap:8px; border:0;
  border-radius:100px; padding:12px 18px; background:var(--ep-red); color:#fff;
  font-weight:700; font-size:13.5px; cursor:pointer; transition:background .15s,transform .15s}
.shop .btn-red:hover{background:var(--ep-red-dark)}
/* пока считаем — кнопка приглушена, при нуле товаров становится серой */
.shop .btn-red.is-busy{opacity:.65}
.shop .btn-red.is-empty{background:var(--ep-meta); pointer-events:none}
.shop .f-apply .btn-red b{font-weight:800}
.shop .btn-ghost{display:flex; align-items:center; justify-content:center; border:0; background:transparent;
  color:var(--ep-meta); font-weight:600; font-size:12.5px}
.shop .btn-ghost:hover{color:var(--ep-red)}

/* каталог: заголовок, сортировка и карточки */
.shop .catalog-list{min-width:0}
.shop .list-head h1{font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.02em}
.shop .list-head h1 span{font-size:14px; font-weight:600; color:var(--ep-meta); margin-left:8px; white-space:nowrap}
.shop .fchips{display:flex; flex-wrap:wrap; gap:8px}
.shop .subcategory-chips{margin:0 0 10px}
.shop .fchip{padding:8px 15px; border:1.5px solid var(--ep-line); border-radius:100px;
  background:var(--ep-white); color:var(--ep-body); font-size:12.5px; font-weight:600; transition:.14s}
.shop .fchip:hover{border-color:var(--ep-red); color:var(--ep-red)}
.shop .fchip.on{border-color:var(--ep-ink); background:var(--ep-ink); color:#fff}
.shop .sortbar{display:flex; align-items:center; gap:18px; padding:11px 16px; margin-bottom:10px;
  border:1px solid var(--ep-line); border-radius:12px; background:var(--ep-white);
  color:var(--ep-body); font-size:12.5px}
.shop .sort-select{display:flex; align-items:center; gap:8px; color:var(--ep-ink); font-weight:700}
.shop .sort-select select{max-width:210px; border:0; outline:0; background:transparent;
  color:inherit; font:inherit; font-weight:700; cursor:pointer}
.shop .sort-submit{border:0; background:transparent; color:var(--ep-red); font:inherit; font-weight:700}
.shop .sortbar .views{display:flex; gap:6px; margin-left:auto}
.shop .vbtn{width:30px; height:30px; border:1.5px solid var(--ep-line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--ep-meta)}
.shop .vbtn.on{border-color:var(--ep-red); background:var(--ep-tint); color:var(--ep-red)}
/* Зазоры внутри листинга держим одинаковыми (10px), как между заголовком
   и блоком фильтров: базовый .pgrid тянул сверху 24px и между сортировкой
   и первым рядом товаров зияла пустота. */
.shop .pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:0}
.shop .card{position:relative; display:flex; min-width:0; flex-direction:column; padding:14px;
  border:1px solid var(--ep-line); border-radius:18px; background:var(--ep-white);
  transition:box-shadow .18s,transform .18s}
.shop .card:hover{z-index:2; transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(32,36,44,.22)}
.shop .photo{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1.06;
  margin-bottom:12px; border-radius:10px; overflow:hidden; background:var(--ep-photo)}
.shop .photo > img{width:88%; height:88%; object-fit:contain; mix-blend-mode:multiply; transition:transform .2s}
.shop .card:hover .photo > img{transform:scale(1.035)}
.shop .product-placeholder{display:flex; align-items:center; justify-content:center; width:92px; height:92px;
  border-radius:50%; background:#fff; color:var(--ep-red); font-size:38px; font-weight:800}
.shop .product-placeholder--large{width:150px; height:150px; font-size:58px}
.shop .badges{position:absolute; z-index:2; left:10px; top:10px; display:flex; flex-direction:column; gap:5px}
.shop .bdg{width:max-content; padding:4px 8px; border-radius:6px; color:#fff; font-size:10px;
  font-weight:800; letter-spacing:.06em}
.shop .bdg.new{background:linear-gradient(120deg,#177E45,#25B368)}
.shop .bdg.hit{background:linear-gradient(120deg,#B91723,#EF4038)}
.shop .fav{position:absolute; z-index:2; right:10px; top:10px; display:flex; align-items:center;
  justify-content:center; width:32px; height:32px; border:1px solid var(--ep-line); border-radius:50%;
  background:#fff; color:#C0C5CF}
.shop .card:hover .fav{color:var(--ep-red)}
.shop .swatches{display:flex; align-items:center; gap:6px; min-height:17px; margin-bottom:9px}
.shop .sw{width:15px; height:15px; flex:0 0 auto; padding:0;
  border:1px solid rgba(0,0,0,.14); border-radius:50%}
.shop .sw.sel{outline:2px solid var(--ep-red); outline-offset:1.5px}
.shop .sw-more{color:var(--ep-meta); font-size:11px; font-weight:700}
.shop .art{display:flex; align-items:center; gap:6px; min-height:17px; margin-bottom:5px;
  color:var(--ep-meta); font-size:11.5px}
.shop .art .brand{margin-left:auto; color:var(--ep-body); font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.shop .pname{min-height:38px; margin-bottom:9px; color:var(--ep-ink); font-size:14px;
  font-weight:600; line-height:1.35}
.shop .pname:hover{color:var(--ep-red)}
.shop .price-row{display:flex; align-items:baseline; gap:8px}
.shop .price{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; color:var(--ep-ink);
  font-size:13px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.shop .price b{font-size:16px; font-weight:800}
.shop .price i{font-style:normal; font-size:12.5px; font-weight:600; color:var(--ep-meta)}
.shop .price small{color:var(--ep-meta); font-size:11.5px; font-weight:600}
.shop .tirazh{margin:2px 0 9px; color:var(--ep-meta); font-size:11.5px}
.shop .tirazh b{color:var(--ep-ink)}
.shop .stock{display:flex; align-items:center; gap:7px; padding-top:9px; border-top:1px dashed var(--ep-line);
  color:var(--ep-body); font-size:12px; font-variant-numeric:tabular-nums}
.shop .stock::before{content:""; width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--ep-green)}
.shop .stock.order-dot::before{background:var(--ep-slate)}
.shop .stock b{color:var(--ep-ink); font-weight:700}
.shop .card-cta{display:flex; gap:8px; margin-top:11px}
.shop .card-cta .btn-red{flex:1; padding:10px 12px; font-size:13px}
.shop .qview{display:flex; align-items:center; justify-content:center; width:40px; border:1.5px solid var(--ep-line);
  border-radius:100px; background:#fff; color:var(--ep-body)}
.shop .qview:hover{border-color:var(--ep-red); color:var(--ep-red)}
@media (hover:hover){
  .shop .card .card-cta{opacity:0; transform:translateY(4px); transition:.18s}
  .shop .card:hover .card-cta,.shop .card:focus-within .card-cta{opacity:1; transform:none}
}
.shop .catalog-empty{grid-column:1/-1; padding:50px 24px; border:1px solid var(--ep-line);
  border-radius:16px; background:#fff; text-align:center}
.shop .catalog-empty h2{font-size:22px}
.shop .catalog-empty p{margin:8px 0 20px; color:var(--ep-meta)}
.shop .catalog-empty .btn-red{width:max-content; margin:auto}
.shop .pager{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:26px}
.shop .pager a,.shop .pager > span{display:flex; align-items:center; justify-content:center; min-width:36px;
  height:36px; padding:0 8px; border:1.5px solid var(--ep-line); border-radius:10px;
  background:#fff; color:var(--ep-body); font-size:13px; font-weight:600}
.shop .pager a:hover{border-color:var(--ep-red); color:var(--ep-red)}
.shop .pager > .on{border-color:var(--ep-red); background:var(--ep-red); color:#fff}
.shop .pager > .pager-ellipsis{border-color:transparent; background:transparent}
.shop .pager .more{margin-left:14px; padding:0 18px; border-color:var(--ep-red); color:var(--ep-red); font-weight:700}
.shop .pager .is-disabled{opacity:.45; pointer-events:none}

/* карточка товара */
.shop .pdp{padding:6px 0 0}
.shop .pdp-top{display:grid; grid-template-columns:minmax(380px,500px) minmax(0,1fr); gap:34px;
  padding:26px; border:1px solid var(--ep-line); border-radius:16px; background:var(--ep-white)}
.shop .gallery .main{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1;
  overflow:hidden; border-radius:12px; background:var(--ep-photo)}
.shop .gallery .main > img{width:88%; height:88%; object-fit:contain; mix-blend-mode:multiply}
.shop .thumbs{display:flex; gap:10px; overflow-x:auto; margin-top:12px; padding:2px;
  scrollbar-width:thin; overscroll-behavior-x:contain}
.shop .thumb{display:flex; align-items:center; justify-content:center; width:76px; height:76px;
  flex:0 0 auto; padding:0;
  overflow:hidden; border:1.5px solid var(--ep-line); border-radius:10px; background:var(--ep-photo);
  color:var(--ep-meta); text-align:center; font-size:10px}
.shop .thumb img{width:92%; height:92%; object-fit:contain; mix-blend-mode:multiply}
.shop .thumb.on{border-color:var(--ep-red)}
.shop .pdp-info{min-width:0}
.shop .meta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--ep-meta); font-size:12.5px}
.shop .avail{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:100px;
  background:var(--ep-green-bg); color:var(--ep-green); font-size:11.5px; font-weight:700}
.shop .avail::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ep-green)}
.shop .pdp h1{margin:10px 0 16px; font-size:clamp(25px,2.4vw,34px); font-weight:800; letter-spacing:-.02em}
.shop .dates{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px}
.shop .date-chip{position:relative; padding:8px 13px; border:1.5px solid var(--ep-line); border-radius:10px;
  background:#fff; color:var(--ep-body); font-size:12px; font-weight:600; cursor:pointer}
.shop .date-chip input{position:absolute; opacity:0; pointer-events:none}
.shop .date-chip:focus-within{outline:2px solid var(--ep-red); outline-offset:2px}
.shop .date-chip b{display:block; color:var(--ep-meta); font-size:11px; font-weight:600}
.shop .date-chip.on,.shop .date-chip:has(input:checked){border-color:var(--ep-green);
  background:var(--ep-green-bg); color:var(--ep-ink)}
.shop .date-chip.on b,.shop .date-chip:has(input:checked) b{color:var(--ep-green)}
.shop .opt-label{display:block; margin-bottom:9px; color:var(--ep-ink); font-size:12.5px; font-weight:700}
.shop .variant-picker{min-width:0; margin:0 0 18px; padding:0; border:0}
.shop .variant-picker .opt-label{padding:0}
.shop .variant-choice-row{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap}
.shop .variant-swatches{display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:32px}
.shop .variant-sw{width:26px; height:26px}
.shop .variant-color-label{color:var(--ep-meta); font-size:12.5px; line-height:1.4}
.shop .variant-color-label b{color:var(--ep-ink); font-weight:700}
.shop .variant-select,.shop .method-field select{width:100%; padding:10px 12px; border:1.5px solid var(--ep-line);
  border-radius:10px; background:#fff; color:var(--ep-ink); font:inherit; font-size:13px}
.shop .variant-select{margin-bottom:18px}
.shop .tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); overflow:hidden;
  margin-bottom:18px; border:1.5px solid var(--ep-line); border-radius:12px; text-align:center}
.shop .tier{padding:11px 6px; border:0; border-right:1px solid var(--ep-line); background:#fff;
  color:var(--ep-ink); font:inherit; cursor:pointer}
.shop .tier:last-child{border-right:0}
.shop .tier em{display:block; margin-bottom:3px; color:var(--ep-meta); font-size:11.5px; font-style:normal}
.shop .tier b{font-size:15.5px; font-weight:800; font-variant-numeric:tabular-nums}
.shop .tier:hover{background:#FDF6F6}
.shop .tier.on{background:var(--ep-tint); box-shadow:inset 0 -3px 0 var(--ep-red)}
.shop .tier.on b{color:var(--ep-red)}
.shop .seg{display:flex; width:max-content; margin-bottom:12px; padding:4px; border-radius:11px; background:var(--ep-bg)}
.shop .seg button{padding:8px 18px; border:0; border-radius:8px; background:transparent;
  color:var(--ep-body); font-size:12.5px; font-weight:700}
.shop .seg button.on{background:#fff; color:var(--ep-ink); box-shadow:0 2px 8px rgba(32,36,44,.12)}
.shop .method-options[hidden]{display:none}
.shop .method-field{display:block; margin-bottom:9px; color:var(--ep-body); font-size:12px; font-weight:600}
.shop .method-field > span{display:block; margin-bottom:6px}
.shop .method-field select:focus,.shop .variant-select:focus{border-color:var(--ep-red); outline:0}
.shop .m-chips{display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:8px; margin-bottom:8px}
.shop .m-chip{min-width:0; padding:9px 12px; border:1.5px solid var(--ep-line); border-radius:10px;
  background:#fff; color:var(--ep-body); text-align:left; font-size:12.5px; font-weight:600}
.shop .m-chip:hover,.shop .m-chip.sel{border-color:var(--ep-red); background:var(--ep-tint); color:var(--ep-ink)}
.shop .m-chip b{display:block; color:var(--ep-meta); font-size:11px; font-weight:600}
/* ── Логотип на изделии ────────────────────────────────────────────────────
   Три голоса, и каждый следующий отличается от соседнего минимум двумя
   параметрами: на 12–13px разница только по весу или только по цвету глазом
   не читается, и блок схлопывается в дисклеймер — ровно то, чем он и был.
     L1 ответ         13 / 600 / ink      что вы заказываете
     L2 вопрос        12.5 / 700 / ink    что мы у вас спрашиваем
     L2 значение      12.5 / 600 / body → ink при выборе
     L3 сноска        12 / 600 / body, интерлиньяж 1.45
   --ep-meta в блоке не встречается ни разу: контраст 3.19:1 считывается как
   «неважно» раньше, чем читаются слова. Зелёный держит рамку, заливку
   и галочку, но никогда буквы. Веса 800 нет: блок без цен не имеет права
   выглядеть ценовым — 800 занято числами тиража и итогом.
   Ритм: подпись→контрол 6px, внутри группы ≤8px, между группами 18px.
   Наведение меняет только фон, цвет рамки и цвет текста. Ни начертания,
   ни размера — от этого разъезжается строка. */

/* L1 — ответ. Самая громкая строка блока. Точка слева несёт состояние
   боковым зрением, а смысл остаётся на словах. */
.shop .lp-state{display:flex; gap:9px; margin:0 0 14px; color:var(--ep-ink);
  font-size:13px; font-weight:600; line-height:1.35}
.shop .lp-state::before{content:""; flex:0 0 auto; width:8px; height:8px;
  margin-top:5px; border-radius:50%; background:var(--ep-line)}
.shop .lp-state.is-on::before{background:var(--ep-green)}
.shop .lp-state b{font-weight:700}

.shop .lp{margin:0 0 16px}
.shop .lp[hidden]{display:none}
.shop .lp-group{margin-bottom:18px}
.shop .lp-group:last-of-type{margin-bottom:0}

/* L2 — вопрос от нас, а не ярлык графы. На вопрос либо отвечают, либо нет,
   и пустой ответ не выглядит недозаполненной формой — поэтому слово
   «необязательно» здесь не нужно ни в каком виде. */
.shop .lp-q{display:block; margin:0 0 6px; color:var(--ep-ink);
  font-size:12.5px; font-weight:700; line-height:1.2}
/* L3 — подсказка с примером, всегда над полем. */
.shop .lp-hint{margin:0 0 7px; color:var(--ep-body); font-size:12px;
  font-weight:600; line-height:1.45}

/* Чипы — семья .date-chip: рамка 1.5px, радиус 10px, выбранное зелёное.
   Текст в отдельном span: место в сорок знаков переносится внутри чипа,
   а не распирает строку на телефоне. */
.shop .lp-chips{display:flex; flex-wrap:wrap; gap:8px}
.shop .lp-chip{position:relative; display:inline-flex; align-items:center; gap:8px;
  max-width:100%; padding:8px 12px 8px 10px; border:1.5px solid var(--ep-line);
  border-radius:10px; background:var(--ep-white); color:var(--ep-body);
  font-size:12.5px; font-weight:600; line-height:1.25; cursor:pointer;
  transition:background-color .12s, border-color .12s, color .12s}
.shop .lp-chip[hidden]{display:none}
.shop .lp-chip input{position:absolute; opacity:0; pointer-events:none}
.shop .lp-chip span{min-width:0; overflow-wrap:anywhere}
.shop .lp-chip:hover{background:var(--ep-bg)}
.shop .lp-chip:focus-within{outline:2px solid var(--ep-red); outline-offset:2px}
.shop .lp-chip.is-on,.shop .lp-chip:has(input:checked){border-color:var(--ep-green);
  background:var(--ep-green-bg); color:var(--ep-ink)}

/* Квадрат — места (можно несколько), круг — одиночный ответ про макет.
   Место под галочку зарезервировано всегда: при выборе ширина чипа
   не меняется и соседние чипы не прыгают из-под курсора. */
.shop .lp-box{position:relative; flex:0 0 auto; width:16px; height:16px;
  border:1.5px solid var(--ep-line); border-radius:5px; background:var(--ep-white)}
.shop .lp-chip--one .lp-box{border-radius:50%}
.shop .lp-box::after{content:""; position:absolute; left:4.5px; top:1.5px;
  width:4px; height:8px; border:solid var(--ep-white); border-width:0 1.7px 1.7px 0;
  transform:rotate(45deg); opacity:0}
.shop .lp-chip.is-on .lp-box,.shop .lp-chip:has(input:checked) .lp-box,
.shop .lp-skip.is-on .lp-box,.shop .lp-skip:has(input:checked) .lp-box{
  border-color:var(--ep-green); background:var(--ep-green)}
.shop .lp-chip.is-on .lp-box::after,.shop .lp-chip:has(input:checked) .lp-box::after,
.shop .lp-skip.is-on .lp-box::after,.shop .lp-skip:has(input:checked) .lp-box::after{opacity:1}

/* Выход из вопроса — своей строкой и пунктиром: это не место, это ответ
   «не знаю». В ряду мест он читался бы седьмым местом. */
.shop .lp-skip{position:relative; display:inline-flex; align-items:center; gap:8px;
  margin-top:8px; padding:7px 12px 7px 10px; border:1.5px dashed var(--ep-line);
  border-radius:10px; color:var(--ep-body); font-size:12.5px; font-weight:600;
  line-height:1.25; cursor:pointer}
.shop .lp-skip input{position:absolute; opacity:0; pointer-events:none}
.shop .lp-skip:hover{background:var(--ep-bg)}
.shop .lp-skip:focus-within{outline:2px solid var(--ep-red); outline-offset:2px}
.shop .lp-skip.is-on,.shop .lp-skip:has(input:checked){border-style:solid;
  border-color:var(--ep-green); background:var(--ep-green-bg); color:var(--ep-ink)}

/* Раскрытие остальных мест — своей строкой, не встык с последним чипом. */
.shop .lp-more{display:block; margin-top:8px; padding:8px 12px;
  border:1.5px dashed var(--ep-line); border-radius:10px; background:var(--ep-white);
  color:var(--ep-body); font:inherit; font-size:12.5px; font-weight:600;
  line-height:1.25; cursor:pointer}
.shop .lp-more:hover{border-color:var(--ep-red); color:var(--ep-red)}
.shop .lp-more[hidden]{display:none}

/* Единственное место — фраза, а не контрол: кликать не во что. */
.shop .lp-fact{margin:0 0 18px; color:var(--ep-body); font-size:12.5px;
  font-weight:600; line-height:1.35}
.shop .lp-fact b{color:var(--ep-ink); font-weight:700}

/* Свободное поле одно и только для того, что списком не выражается. */
.shop .lp-free textarea{display:block; width:100%; padding:9px 11px; resize:vertical;
  border:1.5px solid var(--ep-line); border-radius:10px; background:var(--ep-white);
  color:var(--ep-ink); font:inherit; font-size:13px; line-height:1.35}
.shop .lp-free textarea:focus{border-color:var(--ep-red); outline:0}

/* L3 — сервисная сноска. Отделена линией: видно, что вопросы кончились
   и дальше говорим мы. Тем же кеглем, что подсказки, но не серым —
   служебный серый считывается раньше смысла и делает из порядка работы
   отписку. Фона у сноски нет: серая плита в карточке одна — .buy-row. */
.shop .lp-note{display:flex; gap:8px; margin:16px 0 0; padding-top:13px;
  border-top:1px solid var(--ep-line); color:var(--ep-body); font-size:11.5px;
  font-weight:600; line-height:1.45}
/* Обещание — своей строкой. Про цену и про запуск в работу это два разных
   сообщения, и второе не должно дочитываться хвостом первого. */
.shop .lp-note b{display:block; margin-top:5px; color:var(--ep-ink); font-weight:700}
.shop .lp-note svg{flex:0 0 auto; margin-top:1px; color:var(--ep-green)}

/* У .seg не было ни наведения, ни фокуса. Вес кнопок одинаковый в обоих
   состояниях — метрика не едет, так и оставляем. */
.shop .seg button:hover{color:var(--ep-ink)}
.shop .seg button:focus-visible{outline:2px solid var(--ep-red); outline-offset:2px}

@media (max-width:560px){
  .shop .lp-chips{gap:7px}
  .shop .lp-chip{padding:8px 11px 8px 9px}
}

.shop .buy-row{margin-bottom:16px; padding:14px 16px; border-radius:14px; background:var(--ep-bg)}
.shop .stepper{display:flex; align-items:center; overflow:hidden; flex:0 0 auto;
  border:1.5px solid var(--ep-line); border-radius:10px; background:#fff}
.shop .stepper button{display:flex; align-items:center; justify-content:center; width:34px; height:40px;
  padding:0; border:0; background:#fff; color:var(--ep-meta); font:inherit; font-size:17px;
  cursor:pointer; user-select:none}
.shop .stepper button:hover{background:var(--ep-tint); color:var(--ep-red)}
.shop .stepper button:focus-visible{position:relative; z-index:1; outline:2px solid var(--ep-red);
  outline-offset:-2px}
.shop .stepper input{width:62px; height:40px; padding:0 4px; border:0; border-inline:1px solid var(--ep-line);
  outline:0; background:#fff; color:var(--ep-ink); text-align:center; font:inherit; font-size:15px;
  font-weight:700; font-variant-numeric:tabular-nums; appearance:textfield}
.shop .stepper input::-webkit-inner-spin-button,.shop .stepper input::-webkit-outer-spin-button{appearance:none}
.shop .calc-result{min-width:0}
.shop .calc-summary-row{display:flex; align-items:center; justify-content:space-between; gap:14px}
/* Цена за штуку слева, итог справа: «столько стоит одна — столько весь
   тираж». Обе цифры справа подряд читались как одна длинная цена. */
.shop .total{display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; text-align:right; width:100%}
.shop .total-sum{text-align:right}
.shop .total em{display:block; color:var(--ep-meta); font-size:11.5px; font-style:normal}
.shop .total b{color:var(--ep-red); font-size:24px; font-weight:800; font-variant-numeric:tabular-nums}
.shop .total small{color:var(--ep-body); font-size:13px; font-weight:700;
  white-space:nowrap; font-variant-numeric:tabular-nums}
.shop .calc-result__details{margin-top:8px; padding-top:8px;
  border-top:1px solid var(--ep-line); color:var(--ep-meta);
  font-size:10.5px; line-height:1.35}
.shop .calc-result__details > span{white-space:nowrap}
.shop .calc-result__details > span[hidden]{display:none}
.shop .calc-result__details b{color:var(--ep-body); font-weight:600}
.shop .calc-result__error{margin:0; color:var(--ep-red); font-size:12px; font-weight:600}
.shop .cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.shop .cta-row .btn-red{flex:0 0 auto; padding:13px 30px; font-size:14px}
.shop .btn-dark{display:flex; align-items:center; justify-content:center; padding:13px 24px;
  border:1.5px solid var(--ep-ink); border-radius:100px; background:#fff; color:var(--ep-ink);
  font:inherit; font-size:14px; font-weight:700}
.shop .btn-dark:hover{background:var(--ep-ink); color:#fff}
.shop .btn-dark:disabled{cursor:wait; opacity:.6}
.shop .btn-line{display:flex; align-items:center; justify-content:center; gap:8px; border:0;
  background:transparent; color:var(--ep-body); font-size:13px; font-weight:600}
.shop .btn-line u{text-decoration-style:dashed; text-underline-offset:4px}
.shop .usp{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; padding:0;
  color:var(--ep-body); font-size:12.5px}
.shop .usp li{display:flex; align-items:flex-start; gap:9px; list-style:none}
.shop .usp li::before{content:""; width:18px; height:18px; flex:0 0 auto; border-radius:50%;
  background-color:var(--ep-green-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' stroke='%231E9E56' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.shop .tabs{display:flex; gap:26px; margin:30px 0 20px; border-bottom:1.5px solid var(--ep-line);
  font-size:14.5px}
.shop .tab{padding:0 2px 12px; border:0; background:transparent; color:var(--ep-meta); font-weight:600}
.shop .tab:hover{color:var(--ep-red)}
.shop .tab.on{color:var(--ep-ink); font-weight:800; box-shadow:0 2px 0 var(--ep-red)}
.shop .tab-panels{padding-bottom:30px}
.shop .tab-panel[hidden]{display:none}
.shop .product-copy{min-width:0}
.shop .product-copy :is(p,li){max-width:72ch; margin-bottom:10px; color:var(--ep-body); font-size:13.5px}
.shop .product-copy :is(ul,ol){margin:0 0 12px; padding-left:20px}
.shop .product-copy :is(h2,h3){margin:20px 0 10px; font-size:18px; font-weight:800}

/* Текст описания приходит из фида как вёрстка визуального редактора (три шрифта
   в одном абзаце, свои размеры и фон). Разметку чистит catalog/textclean.py,
   а типографику задаём здесь — и запрещаем любые унаследованные шрифты. */
.shop .copy-body{font-size:14px; line-height:1.65; color:var(--ep-body)}
.shop .copy-body *{font-family:inherit !important; font-size:inherit !important;
  line-height:inherit !important; background:none !important; letter-spacing:normal}
.shop .copy-body :is(p,li){max-width:74ch; margin:0 0 10px}
.shop .copy-body :is(ul,ol){margin:0 0 16px; padding-left:22px}
.shop .copy-body li{margin-bottom:6px}
.shop .copy-body li::marker{color:var(--ep-red)}
.shop .copy-body :is(b,strong){font-weight:700; color:var(--ep-ink)}
.shop .copy-body :is(h4,h3,h2){margin:22px 0 10px; color:var(--ep-ink);
  font-size:15px !important; font-weight:800; letter-spacing:-.01em !important}
.shop .copy-body > :first-child{margin-top:0}
.shop .copy-body img{max-width:100%; height:auto; border-radius:10px}
.shop .copy-body table{width:100%; margin:0 0 14px; border-collapse:collapse}
.shop .copy-body :is(td,th){padding:8px 10px; border:1px solid var(--ep-line); text-align:left}
.shop .inner-section-title{margin:22px 0 12px; font-size:18px; font-weight:800}
.shop .props{width:min(760px,100%); border-collapse:collapse; font-size:13px}
.shop .props td{padding:9px 0; border-bottom:1px dashed var(--ep-line); vertical-align:top}
.shop .props td:first-child{width:46%; color:var(--ep-meta)}
.shop .props td:last-child{font-weight:600}
/* Ряд переносится и стоит по центру, а не прокручивается. Прокрутка тут
   осталась от прежнего вида плитки — с описанием в две строки и шириной
   266px: десять таких в строку не влезали никак. Сейчас в плитке значок
   и название, ей хватает 132px, и весь ряд помещается целиком.

   overflow:visible обязателен: контейнер с overflow-x:auto обрезает и по
   вертикали тоже, поэтому плитка, приподнятая на наведении, теряла верхнюю
   кромку — её срезал край скроллера. */
.shop .methods{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:8px 0 0; padding:2px; overflow:visible}
/* Плитка — значок и название. Описание убрано: оно пересказывало страницу
   «Нанесение», куда плитка и ведёт. Текст по центру под значком: одно слово
   от левого края выглядело обрывком. */
.shop .method{display:block; min-width:0; flex:0 0 auto; width:132px; padding:14px 10px;
  border:1px solid var(--ep-line); border-radius:12px; background:#fff;
  color:inherit; text-align:center; transition:border-color .12s, background-color .12s}
/* Подъём на наведении здесь не нужен: цвет рамки и фона уже отвечают,
   а в тесном ряду прыгающая плитка толкает соседние. */
.shop .method:hover{border-color:var(--ep-red); background:var(--ep-tint); transform:none}
.shop .method .mi{display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  margin:0 auto 9px; border-radius:50%; background:var(--ep-tint); color:var(--ep-red)}
.shop .method:hover .mi{background:var(--ep-white)}
.shop .method b{display:block; margin-bottom:4px; color:var(--ep-ink);
  font-size:13px; font-weight:800; line-height:1.25}
.shop .method p{margin:0 0 6px; color:var(--ep-body); font-size:12px;
  font-weight:600; line-height:1.4}
.shop .method small{display:block; color:var(--ep-meta); font-size:11px; line-height:1.35}
.shop .files-note{display:flex; align-items:flex-start; gap:10px; width:min(760px,100%); padding:14px;
  border-radius:12px; background:var(--ep-tint); color:var(--ep-red)}
.shop .files-note span{display:flex; flex-direction:column; color:var(--ep-body); font-size:11.5px}
.shop .files-note b{color:var(--ep-ink); font-size:12.5px}
/* Кнопки шаблона нанесения. Ширина по содержимому: строка из двух кнопок
   во всю колонку выглядит как форма, а это просто две ссылки. */
.shop .template-actions{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 8px}
.shop .template-actions .btn-red,
.shop .template-actions .btn-dark{flex:0 0 auto; text-decoration:none}
.shop .template-hint{margin:0 0 18px; color:var(--ep-meta); font-size:11.5px}
.shop .product-recommendations{display:grid; gap:32px; padding-bottom:46px}
.shop .recommendation-section{min-width:0}
.shop .recommendation-section h2{margin:0 0 14px; font-size:22px; font-weight:800; letter-spacing:-.01em}
.shop .recommendation-track{display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 48px)/4); gap:16px; overflow-x:auto; padding:3px 3px 14px;
  overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin}
.shop .recommendation-track > .card{scroll-snap-align:start}
.shop .recommendation-empty{grid-column:1/-1; margin:0; padding:24px;
  border:1px solid var(--ep-line); border-radius:14px; background:#fff;
  color:var(--ep-meta); font-size:13px; text-align:center}
/* класс нужен и вне .shop: на главной им скрыт заголовок h1 */
.visually-hidden, .shop .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (max-width:1120px){
  .shop .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop .pdp-top{grid-template-columns:minmax(340px,430px) minmax(0,1fr); gap:26px}
  .shop .recommendation-track{grid-auto-columns:calc((100% - 32px)/3)}
}
@media (max-width:900px){
  .shop .cat-body{grid-template-columns:1fr}
  .shop .side{position:static; display:grid; grid-template-columns:1fr 1fr;
    max-height:none; overflow:visible}
  .shop .f-group:nth-child(even){border-left:1px solid var(--ep-line)}
  .shop .f-apply{position:static; grid-column:1/-1}
  .shop .pdp-top{grid-template-columns:1fr}
  .shop .gallery{max-width:620px; width:100%; margin:auto}
  .shop .recommendation-track{grid-auto-columns:calc((100% - 16px)/2)}
}
@media (max-width:640px){
  .shop .crumbs{padding-top:14px}
  .shop .cat-body{padding-top:4px}
  .shop .side{display:flex}
  .shop .f-group:nth-child(even){border-left:0}
  .shop .list-head h1 span{display:block; margin:5px 0 0}
  .shop .sortbar{align-items:flex-start; gap:9px; flex-direction:column}
  .shop .sortbar .views{display:none}
  .shop .sort-select{width:100%; justify-content:space-between}
  .shop .sort-select select{max-width:62%}
  .shop .pgrid{grid-template-columns:1fr}
  .shop .card .card-cta{opacity:1; transform:none}
  .shop .pager{gap:5px; flex-wrap:wrap}
  .shop .pager .more{margin-left:0}
  .shop .pdp-top{padding:15px}
  .shop .thumb{width:62px; height:62px}
  .shop .tiers{grid-template-columns:repeat(2,1fr)}
  .shop .tier{border-bottom:1px solid var(--ep-line)}
  .shop .buy-row{padding:12px}
  .shop .calc-summary-row{gap:10px}
  .shop .total{text-align:left}
  .shop .total em{font-size:10.5px}
  .shop .total b{font-size:20px}
  .shop .total small{font-size:11px}
  .shop .calc-result__details{gap:4px 10px}
  .shop .cta-row > *{width:100%}
  .shop .usp{grid-template-columns:1fr}
  .shop .tabs{gap:18px; overflow-x:auto; white-space:nowrap}
  .shop .method{min-width:138px; flex-basis:138px}
  .shop .recommendation-section h2{font-size:20px}
  .shop .recommendation-track{grid-auto-columns:82%}
}


/* последняя секция не должна слипаться с подвалом */
main > *:last-child{margin-bottom:20px}
.recommendation-section{padding-bottom:0}
.recommendation-section + .recommendation-section{padding-top:8px}


/* плавное переключение главного фото (полсекунды на дыхание) */
.shop .gallery .main > img{transition:opacity .28s ease}
.shop .gallery .main > img.is-loading{opacity:.25}
/* та же плавность при смене цвета в карточках листингов и на главной */
.pcard .photo img, .card .photo img{transition:opacity .28s ease}
.pcard .photo img.is-loading, .card .photo img.is-loading{opacity:.25}

/* Вертикальные зазоры информационных страниц. На лендинге 78 px между секциями
   уместны, а на короткой странице из двух блоков они разрывают её пополам и
   отрывают призыв от подвала. */
.shop.inner-shop .sec{padding-block:0 40px}
.shop.inner-shop .sec:last-child{padding-bottom:34px}
/* и на главной подвал не должен отставать от призыва на 98 px */
main > .sec:last-child, .sec:last-of-type{padding-bottom:44px}

/* Карточки карусели «Чаще всего заказывают»: у товаров поставщика длинные
   названия — они разъезжались на 3–4 строки и цена с кружками цвета вплотную
   слипались. Название режем по двум строкам, блокам даём воздух. */
.pcard .sw-row{margin:0 0 10px}
.pcard .pname{min-height:38px; margin-bottom:7px}
.pcard .pname a{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis}
.pcard .price-row{margin-bottom:4px}
.pcard .tirazh{margin:0 0 10px}
.pcard .stock{margin-top:auto}


/* ── Верх карточки товара: две самостоятельные карточки ───────────────────────
   Раньше галерея и описание жили в одной рамке, поэтому под фото зияла пустота
   (правая колонка всегда выше). Теперь у каждой колонки своя карточка: левая
   заканчивается ровно по фото, а миниатюры стоят вертикальной лентой слева —
   как на хороших магазинах, и высота выравнивается сама.                     */
.shop .pdp-top{
  padding:0; border:0; background:transparent; align-items:start;
  grid-template-columns:minmax(360px,var(--pdp-gallery,520px)) minmax(0,1fr); gap:22px;
}
.shop .pdp-top > .gallery,
.shop .pdp-top > .pdp-info{
  background:var(--ep-white); border:1px solid var(--ep-line);
  border-radius:16px; padding:22px;
}
.shop .pdp-top > .gallery{position:sticky; top:16px}
/* Превью — лентой под фото. Так карточка галереи чуть выше и лучше уравновешена
   с правой колонкой, а кадры читаются крупнее, чем узкой полосой сбоку.       */
/* min-width:0 и flex-shrink:0 — не украшение, а лечение: без них флекс-лента
   не сжимается уже своего содержимого, и товар с 18 кадрами растягивал всю
   страницу до 646px при экране 375. Теперь лента прокручивается внутри себя. */
.shop .gallery{min-width:0}
.shop .gallery .thumbs{
  display:flex; gap:10px; margin-top:14px; padding:2px 2px 6px; overflow-x:auto;
  min-width:0; max-width:100%;
  scrollbar-width:thin; scrollbar-color:var(--ep-line) transparent;
}
.shop .gallery .thumbs > .thumb{flex:0 0 auto}
.shop .gallery .thumbs::-webkit-scrollbar{height:4px}
.shop .gallery .thumbs::-webkit-scrollbar-thumb{background:#d7dbe2; border-radius:4px}
.shop .gallery .main{aspect-ratio:1; width:100%}

@media (max-width:900px){
  .shop .pdp-top{grid-template-columns:1fr}
  .shop .pdp-top > .gallery{position:static}
}

/* ── Портфолио: мозаика работ ────────────────────────────────────────────────
   Плитки категорий (.cats) для фотографий не годились — снимки в них жались в
   иконку. Здесь фото заполняет плитку, подпись лежит на градиенте, первая
   плитка шире, две — выше: сетка перестаёт быть однообразной.               */
.folio{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  grid-auto-rows:210px; gap:14px}
.folio-item{position:relative; overflow:hidden; border-radius:18px; background:var(--ep-photo);
  box-shadow:0 1px 0 var(--ep-line)}
.folio-item--wide{grid-column:span 2}
.folio-item--tall{grid-row:span 2}
.folio-item img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.folio-item::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,22,26,0) 42%, rgba(20,22,26,.78) 100%)}
.folio-item:hover img{transform:scale(1.06)}
.folio-cap{position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  padding:14px 16px; color:#fff}
.folio-cap b{font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.2}
.folio-cap i{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-style:normal; font-size:11.5px; font-weight:700; color:#FFC9C6;
  opacity:0; transform:translateX(-6px); transition:.22s}
.folio-item:hover .folio-cap i{opacity:1; transform:none}
@media (max-width:700px){
  .folio{grid-auto-rows:170px; gap:10px}
  .folio-item--wide, .folio-item--tall{grid-column:auto; grid-row:auto}
}

/* карта на странице контактов */
.map-embed{position:relative; overflow:hidden; border:1px solid var(--ep-line);
  border-radius:18px; background:var(--ep-photo); margin-top:6px}
.map-embed iframe{display:block; width:100%; height:clamp(280px,38vw,420px); border:0}

/* Заголовок информационной страницы: красная метка с кистью и есть заголовок —
   дублирующий <h2> с тем же словом убран из шаблонов. */
/* Заголовок страницы под крошками — красная надпись с кистью («Отзывы»,
   «Корзина», «Нанесение логотипа»). Решение Эрнеста от 12.08.2026: было
   19–26px, стало на треть меньше. Кисть уменьшена в той же пропорции,
   иначе она перевешивала бы текст, ради которого стоит. */
.lbl.page-title{margin-bottom:6px; font-size:clamp(13px,1.55vw,18px); letter-spacing:.14em}
.lbl.page-title::before{width:10px; height:24px}

/* ── Внутренняя страница портфолио: описание + карусель работ ─────────────── */
/* Колонки одной высоты: описание тянется ровно по фото с лентой кадров */
.folio-case{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,38%); gap:26px;
  align-items:stretch}
.folio-stage{position:relative; overflow:hidden; border:1px solid var(--ep-line);
  border-radius:18px; background:var(--ep-photo)}
.folio-stage img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:opacity .3s ease}
.folio-stage img.is-loading{opacity:.3}
/* Кадры выкладываются в несколько рядов — заодно левая колонка добирает высоту
   до описания, и текст справа укладывается без прокрутки. */
.folio-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding:2px}
.folio-thumb{flex:0 0 92px; width:92px; height:68px; padding:0; overflow:hidden;
  border:1.5px solid var(--ep-line); border-radius:10px; background:var(--ep-photo); cursor:pointer}
.folio-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.folio-thumb.on{border-color:var(--ep-red)}
.folio-side{display:flex; flex-direction:column; gap:14px; padding:20px;
  border:1px solid var(--ep-line); border-radius:18px; background:var(--ep-white); height:100%}
.folio-side h3{font-size:17px; font-weight:800; letter-spacing:-.01em}
.folio-side p{color:var(--ep-body); font-size:14px; line-height:1.65}
.folio-count{color:var(--ep-meta); font-size:12.5px}
@media (max-width:900px){ .folio-case{grid-template-columns:1fr} }

/* Контакты: карта справа от реквизитов связи */
.contacts-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,46%); gap:24px;
  align-items:start}
@media (max-width:900px){ .contacts-grid{grid-template-columns:1fr} }

/* Оплата и реквизиты — в два столбца */
.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:10px 30px;
  align-items:start}

/* Сроки в «Как мы работаем» — витрина, а не переключатель: убираем вид кнопки */
.shop .date-chip.is-static{cursor:default; background:var(--ep-white)}
.shop .date-chip.is-static:hover{border-color:var(--ep-line)}

/* Живой расчёт: строки разбивки «из чего сумма» */
.tool .t-line{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:6px 0; border-bottom:1px dashed var(--line); font-size:12.5px; color:var(--meta)}
.tool .t-line i{font-style:normal; font-weight:700; color:var(--ink)}
.tool .t-line b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.tool .t-line[hidden]{display:none}
.tool .t-line--sum{border-bottom:0; padding-top:8px}
.tool .t-line--sum b{font-size:15px; font-weight:800}
.tool .t-per{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:8px}
.tool .t-per b{font-size:22px; font-weight:800; color:var(--red); font-variant-numeric:tabular-nums}
.tool .t-save:empty{display:none}


/* 3. Карта на контактах: тянется по высоте левого блока, а не живёт своей */
.contacts-grid{align-items:stretch}
.contacts-grid .map-embed{margin-top:0; display:flex}
.contacts-grid .map-embed iframe{height:100%; min-height:280px}

/* 4. Портфолио: плитки серые, цвет возвращается при наведении */
.folio-item img{filter:grayscale(1) contrast(1.02); transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .35s ease}
.folio-item:hover img, .folio-item:focus-visible img{filter:none}

/* Плитка-заполнитель мозаики портфолио: угол сетки больше не пустует */
.folio-item--all{display:flex; align-items:flex-end; padding:18px 20px; color:#fff;
  background:linear-gradient(150deg,var(--red-dark),var(--red) 55%,var(--red-hot))}
.folio-item--all::after{content:none}
.folio-item--all b{display:block; font-size:16px; font-weight:800; letter-spacing:-.01em}
.folio-item--all i{display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-style:normal; font-size:12px; font-weight:700; color:#FFD3D1}
.folio-item--all:hover i{color:#fff}

/* Страница «Все работы»: ровная сетка кадров с подписью раздела */
.folio-all{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}
.folio-shot{position:relative; overflow:hidden; border-radius:14px; background:var(--ep-photo);
  border:1px solid var(--ep-line)}
.folio-shot img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
  filter:grayscale(1); transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .3s ease}
.folio-shot:hover img{transform:scale(1.05); filter:none}
.folio-shot span{position:absolute; left:0; right:0; bottom:0; padding:16px 12px 9px; color:#fff;
  font-size:11.5px; font-weight:700;
  background:linear-gradient(180deg, rgba(20,22,26,0), rgba(20,22,26,.75))}

/* Вводный текст портфолио — во всю ширину блока, а не в узкую колонку */
/* Текст течёт колонками одним шрифтом: три разных абзаца выглядели как три
   разных блока с разным кеглем и обрывались по-разному. */
.folio-intro{margin-bottom:22px; columns:2; column-gap:34px; orphans:2; widows:2}
.folio-intro p{margin:0 0 10px; color:var(--ep-body); font-size:14px; line-height:1.65}
.folio-intro p:last-child{margin-bottom:0}
@media (max-width:820px){ .folio-intro{columns:1} }
.folio-actions{display:grid; gap:8px; margin-top:auto}

/* ── Страница «Нанесение» по образцу gifts.ru: меню технологий слева ────────── */
.print-page{display:grid; grid-template-columns:minmax(210px,254px) minmax(0,1fr); gap:26px;
  align-items:start}
.print-nav{position:sticky; top:16px; padding:18px; border:1px solid var(--ep-line);
  border-radius:16px; background:var(--ep-white)}
.print-nav-title{margin:0 0 8px; color:var(--ep-meta); font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase}
.print-nav ul{list-style:none; display:grid; gap:1px; margin:0 0 16px}
.print-nav ul:last-child{margin-bottom:0}
.print-nav a{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:6px 9px; border-radius:9px; color:var(--ep-body); font-size:12.5px; font-weight:600}
.print-nav a:hover{background:var(--ep-tint); color:var(--ep-red)}
.print-nav i{font-style:normal; font-size:11px; color:var(--ep-meta)}
.print-body{min-width:0}
/* Равняем по краю блока, а не по первой строке текста: белая панель слева
   и колонка текста справа начинаются с одной линии. */
.print-intro{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px 28px;
  margin-bottom:4px}
/* Оба абзаца одинаковые: они стоят рядом в две колонки, а первый был крупнее
   и темнее (15px/ink против 14px/body) — рядом это читалось как разные шрифты. */
.print-intro p{margin:0; color:var(--ep-body); font-size:14.5px; line-height:1.65}

.print-methods{display:grid; gap:12px}
.print-method{padding:18px 20px; border:1px solid var(--ep-line); border-radius:16px;
  background:var(--ep-white); scroll-margin-top:20px}
.pm-head{display:flex; align-items:flex-start; gap:13px; margin-bottom:12px}
.pm-head .mi{display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  flex:0 0 auto; border-radius:50%; background:var(--ep-tint); color:var(--ep-red)}
.pm-head b{display:block; font-size:16px; font-weight:800; letter-spacing:-.01em}
.pm-head p{margin:3px 0 0; color:var(--ep-body); font-size:13.5px; line-height:1.55}
/* Условия метода одной строкой: раньше подпись и значение растягивались
   по колонке на всю ширину, и «Цена от» отрывалось от «8 ₽/шт» пустотой. */
.pm-facts{display:flex; flex-wrap:wrap; gap:6px 10px; margin:0 0 12px;
  padding-bottom:12px; border-bottom:1px dashed var(--ep-line);
  font-size:12.5px; color:var(--ep-meta)}
.pm-facts span{display:inline-flex; align-items:baseline; gap:5px;
  padding:4px 11px; border-radius:100px; background:var(--ep-photo)}
.pm-facts b{color:var(--ep-ink); font-weight:700}
/* «за что цена» — главное условие, поэтому выделено фирменным тоном */
.pm-facts .pm-basis{background:var(--ep-tint); color:var(--ep-red)}
.pm-facts .pm-basis b{color:var(--ep-red)}
.pm-facts .pm-mat{background:transparent; border:1px solid var(--ep-line)}
/* Ограничения технологии: то, что мы знаем точно и что не зависит
   от подрядчика — они делают карточку полезной там, где цен нет. */
.pm-limits{list-style:none; display:grid; gap:6px; margin:0 0 12px; padding:0}
.pm-limits li{position:relative; padding-left:20px; color:var(--ep-body);
  font-size:13px; line-height:1.5}
.pm-limits li::before{content:""; position:absolute; left:5px; top:7px; width:6px; height:6px;
  border-radius:50%; background:var(--ep-red)}
.pm-link{font-size:13px; font-weight:700; color:var(--ep-red)}
.pm-link:hover{color:var(--ep-red-dark)}

/* ── Калькуляторы с era-print.com ─────────────────────────────────────────── */
/* Плитки, а не вкладки: у вкладки нет своего адреса, а ссылку на нужный расчёт
   менеджер должен уметь отправить клиенту. Шесть штук ложатся 3×2. */
.ctiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  grid-auto-rows:1fr}
/* последняя плитка занимает остаток ряда: на странице калькулятора их пять,
   и без этого второй ряд оставался наполовину пустым */
.ctile:last-child:nth-child(3n+1){grid-column:span 3}
.ctile:last-child:nth-child(3n+2){grid-column:span 2}
.ctile{position:relative; display:flex; flex-direction:column; gap:6px;
  padding:18px; border:1px solid var(--ep-line); border-radius:18px;
  background:var(--ep-white); transition:border-color .16s, box-shadow .16s, transform .16s}
.ctile:hover{border-color:var(--ep-red); transform:translateY(-2px);
  box-shadow:0 18px 34px -24px rgba(23,24,28,.4)}
.ctile.on{border-color:var(--ep-ink)}
.ctile-ic{display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  margin-bottom:2px; border-radius:12px; background:var(--ep-tint); color:var(--ep-red)}
.ctile b{font-size:15px; font-weight:800; color:var(--ep-ink)}
.ctile-note{color:var(--ep-body); font-size:12.5px; line-height:1.5}
.ctile-min{align-self:flex-start; margin-top:2px; padding:3px 10px; border-radius:100px;
  background:var(--ep-photo); color:var(--ep-meta); font-size:11.5px; font-weight:700}

/* Технологии, которые считает технолог, а не калькулятор */
.byhand{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 20px; padding:18px 20px; border:1px solid var(--ep-line); border-radius:18px;
  background:var(--ep-white)}
.byhand-list{display:flex; flex-wrap:wrap; gap:8px}
.byhand-list span{padding:5px 12px; border-radius:100px; background:var(--ep-photo);
  color:var(--ep-body); font-size:12.5px; font-weight:600}
.byhand-act{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.byhand .btn-red{display:inline-flex; align-items:center; gap:8px; padding:12px 20px;
  border-radius:100px; background:var(--ep-red); color:#fff; font-size:14px; font-weight:800}
.byhand .btn-red:hover{background:var(--ep-red-dark)}
.byhand-tel{font-size:14px; font-weight:800; color:var(--ep-ink); white-space:nowrap}

.calcs{margin-bottom:6px}
.calc-frame{overflow:hidden; border:1px solid var(--ep-line); border-radius:16px;
  background:var(--ep-white)}
.calc-frame iframe{display:block; width:100%; border:0}

@media (max-width:1000px){
  .ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctile:last-child:nth-child(3n+1),
  .ctile:last-child:nth-child(3n+2){grid-column:auto}
  .ctile:last-child:nth-child(odd){grid-column:span 2}
}
@media (max-width:640px){
  .ctiles{grid-template-columns:1fr}
  .ctile:last-child:nth-child(odd){grid-column:auto}
  .byhand{flex-direction:column; align-items:stretch}
  .byhand .btn-red{justify-content:center}
}

/* ── Разбор логотипа ──────────────────────────────────────────────────────
   Считает браузер, файл никуда не уходит. Такого нет ни у одного поставщика:
   везде «пришлите макет — ответим», здесь ответ виден до письма. */
/* пояснение над зоной перетаскивания не должно липнуть к ней */
.logocheck{display:grid; gap:12px; margin-top:4px}
.lc-drop{display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:30px 20px; border:2px dashed var(--ep-line); border-radius:18px;
  background:var(--ep-white); text-align:center; cursor:pointer; transition:.16s}
.lc-drop:hover, .lc-drop.is-over{border-color:var(--ep-red); background:var(--ep-tint)}
.lc-ic{display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:14px; background:var(--ep-tint); color:var(--ep-red)}
.lc-drop b{font-size:15px; font-weight:800; color:var(--ep-ink)}
.lc-drop small{font-size:12.5px; color:var(--ep-meta)}
.lc-out{padding:18px 20px; border:1px solid var(--ep-line); border-radius:18px;
  background:var(--ep-white)}
.lc-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:12px}
.lc-head b{font-size:17px; font-weight:800; color:var(--ep-ink)}
.lc-head span{color:var(--ep-body); font-size:13px}
.lc-palette{display:inline-flex; gap:5px}
.lc-palette i{width:20px; height:20px; border-radius:6px; border:1px solid var(--ep-line)}
.lc-list{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:8px; margin:0 0 12px; padding:0}
.lc-list li{display:flex; flex-direction:column; gap:2px; padding:10px 12px 10px 30px;
  position:relative; border-radius:12px; background:var(--ep-photo); font-size:12.5px}
.lc-list li::before{position:absolute; left:11px; top:10px; font-weight:800}
.lc-list li.ok::before{content:"✓"; color:var(--ep-green)}
.lc-list li.no::before{content:"✕"; color:var(--ep-red)}
.lc-list b{font-size:13.5px; font-weight:800; color:var(--ep-ink)}
.lc-list span{color:var(--ep-body)}
.lc-note{margin:0; color:var(--ep-meta); font-size:12.5px; line-height:1.55}
.lc-again{justify-self:start; padding:9px 16px; border:1.5px solid var(--ep-line);
  border-radius:100px; background:var(--ep-white); color:var(--ep-body);
  font:inherit; font-size:13px; font-weight:700}
.lc-again:hover{border-color:var(--ep-red); color:var(--ep-red)}

/* Подпись под заголовком прижималась вплотную к следующему блоку —
   между пояснением и плитками нужен воздух. */
.shop .inner-section-title + .pc-hint{margin:0 0 12px}
/* ссылка «Все работы по разделам» стояла впритык к последнему ряду фото */
.shop .folio-more{margin-top:12px}

/* ── Матрица «на чём наносим и чем» ─────────────────────────────────────────
   Материалов семь, и в сетке по четыре последний ряд оставался наполовину
   пустым: после «Кожи» зияли две дырки. Последняя плитка растягивается
   на остаток ряда — сколько бы материалов ни стало. */
.mtx{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.mtx-card:last-child:nth-child(4n+1){grid-column:span 4}
.mtx-card:last-child:nth-child(4n+2){grid-column:span 3}
.mtx-card:last-child:nth-child(4n+3){grid-column:span 2}
@media (max-width:1100px){
  .mtx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtx-card:last-child:nth-child(4n+1),
  .mtx-card:last-child:nth-child(4n+2),
  .mtx-card:last-child:nth-child(4n+3){grid-column:auto}
  .mtx-card:last-child:nth-child(odd){grid-column:span 2}
}
@media (max-width:640px){
  .mtx{grid-template-columns:1fr}
  .mtx-card:last-child:nth-child(odd){grid-column:auto}
}
.mtx-card{display:flex; flex-direction:column; gap:5px; padding:16px 18px;
  border:1px solid var(--ep-line); border-radius:16px; background:var(--ep-white);
  transition:border-color .16s, box-shadow .16s}
.mtx-card:hover{border-color:var(--ep-red); box-shadow:0 16px 30px -22px rgba(23,24,28,.35)}
.mtx-card b{font-size:15px; font-weight:800; color:var(--ep-ink)}
.mtx-count{font-size:12.5px; color:var(--ep-meta)}
.mtx-methods{display:flex; flex-wrap:wrap; gap:6px; margin-top:5px}
.mtx-methods i{padding:4px 10px; border-radius:100px; background:var(--ep-tint);
  color:var(--ep-red); font-style:normal; font-size:11.5px; font-weight:700}

/* ── Частые вопросы ───────────────────────────────────────────────────────── */
.faq{display:grid; gap:8px}
.faq details{border:1px solid var(--ep-line); border-radius:14px;
  background:var(--ep-white); overflow:hidden}
.faq summary{padding:14px 18px; cursor:pointer; font-size:14px; font-weight:700;
  color:var(--ep-ink); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--ep-red); font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{padding-bottom:6px}
.faq p{margin:0; padding:0 18px 16px; color:var(--ep-body); font-size:13.5px; line-height:1.6}

.print-calc{padding:18px 20px; border:1px solid var(--ep-line); border-radius:16px;
  background:var(--ep-white); display:grid; gap:14px}
.pc-controls{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.pc-field{display:grid; gap:6px; font-size:12px; font-weight:700; color:var(--ep-meta)}
.pc-field select, .pc-field input{padding:11px 13px; border:1.5px solid var(--ep-line);
  border-radius:11px; background:var(--ep-white); font:inherit; font-size:14px;
  font-weight:600; color:var(--ep-ink)}
.pc-field select:focus, .pc-field input:focus{outline:0; border-color:var(--ep-red)}
/* Подпись сама отбивается от блока сверху: на «Как мы работаем» она стояла
   под карточками вплотную, потому что отступ был задан только для случая
   «сразу после заголовка раздела». */
.pc-hint{margin:12px 0 0; color:var(--ep-meta); font-size:12.5px; line-height:1.55}
.pc-hint a{color:var(--ep-red); font-weight:700}

.print-req{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px}
.print-req div{padding:14px 16px; border:1px solid var(--ep-line); border-radius:14px;
  background:var(--ep-white)}
.print-req b{display:block; margin-bottom:4px; font-size:13.5px; font-weight:800}
.print-req span{color:var(--ep-body); font-size:12.5px; line-height:1.55}

@media (max-width:900px){
  .print-page{grid-template-columns:1fr}
  .print-nav{position:static}
}

/* ── «Как мы работаем» ─────────────────────────────────────────────────────
   Страница была столбиком текстовых карточек, путь читался только чтением.
   Теперь это схема: четыре узла на общей рельсе, под ними шкала времени. */
.how-lead{max-width:74ch; margin:0 0 22px; color:var(--ep-body);
  font-size:15px; line-height:1.65}
/* На странице калькуляторов нет левой панели, поэтому вступление занимает
   всю ширину блока: с ограничением в 74 символа строка обрывалась на трети
   экрана и текст казался обрезанным. */
.calc-lead{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 28px; margin:0 0 22px}
.calc-lead p{margin:0; color:var(--ep-body); font-size:14.5px; line-height:1.65}
@media (max-width:760px){ .calc-lead{grid-template-columns:1fr} }

/* «Нужного расчёта нет?» — отдельная карточка, отбитая от плиток: раньше это
   был текст впритык к сетке и читался как её подпись. */
.calc-hand{margin-top:26px; padding:18px 20px; border:1px solid var(--ep-line);
  border-radius:18px; background:var(--ep-white)}
.calc-hand b{display:block; margin-bottom:5px; font-size:15px; font-weight:800;
  color:var(--ep-ink)}
.calc-hand p{margin:0; color:var(--ep-body); font-size:13.5px; line-height:1.6}
.calc-hand a{font-weight:700; color:var(--ep-red)}

.flow{list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px; margin:0; padding:0}
.flow-step{position:relative; display:flex; flex-direction:column; gap:8px;
  padding:20px 18px 18px; border:1px solid var(--ep-line); border-radius:18px;
  background:var(--ep-white)}
/* рельса: линия тянется от узла к узлу, у последнего шага её нет */
.flow-step::after{content:""; position:absolute; top:41px; right:-15px; width:16px;
  height:2px; background:var(--ep-line)}
.flow-step:last-child::after{display:none}
.flow-node{position:relative; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--ep-tint); color:var(--ep-red)}
.flow-node i{position:absolute; right:-4px; bottom:-4px; display:flex; align-items:center;
  justify-content:center; width:21px; height:21px; border-radius:50%;
  background:var(--ep-red); color:#fff; font-size:11.5px; font-weight:800; font-style:normal}
.flow-step b{margin-top:4px; font-size:15.5px; font-weight:800; letter-spacing:-.01em}
.flow-step p{margin:0; flex:1; color:var(--ep-body); font-size:13px; line-height:1.6}
.flow-meta{font-size:12.5px; color:var(--ep-ink); font-weight:700}
.flow-meta em{display:block; margin-bottom:1px; color:var(--ep-meta);
  font-style:normal; font-weight:600}
.flow-time{align-self:flex-start; padding:5px 12px; border-radius:100px;
  background:var(--ep-green-bg); color:var(--ep-green); font-size:11.5px; font-weight:800}

/* Шкала времени: видно, что всё, кроме печати, происходит в первый день */
.tline{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px; padding:26px 0 4px}
.tline-rail{position:absolute; left:6%; right:6%; top:32px; height:3px; border-radius:3px;
  background:linear-gradient(to right,var(--ep-tint),var(--ep-red))}
.tline-mark{position:relative; padding-top:22px; text-align:center}
.tm-dot{position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; background:#fff;
  border:3px solid var(--ep-red)}
.tline-mark b{display:block; font-size:14px; font-weight:800; color:var(--ep-ink)}
.tline-mark small{display:block; margin-top:2px; font-size:12px; color:var(--ep-meta)}
.tline-mark.is-long b{color:var(--ep-red)}
.tline-mark.is-end .tm-dot{background:var(--ep-red)}

/* Тарифы срочности: та же тройка, что в калькуляторе на карточке товара */
.rush{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px}
.rush-card{padding:16px 18px; border:1px solid var(--ep-line); border-radius:16px;
  background:var(--ep-white)}
.rush-card b{display:block; font-size:15px; font-weight:800}
.rush-days{display:block; margin:4px 0 10px; color:var(--ep-body); font-size:13px}
.rush-price{display:inline-block; padding:5px 12px; border-radius:100px;
  background:var(--ep-green-bg); color:var(--ep-green); font-size:12px; font-weight:800}
.rush-card.is-mid .rush-price{background:#FFF4E0; color:#B26B00}
.rush-card.is-hot{border-color:#EFC9C9}
.rush-card.is-hot .rush-price{background:var(--ep-tint); color:var(--ep-red)}

/* Что нужно от вас */
.need{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
/* «От чего зависит стоимость» — четыре карточки, и в сетке по три четвёртая
   оставалась одна во втором ряду. Ставим их в одну строку. */
.need.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .need.is-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .need.is-4{grid-template-columns:1fr} }
.need-card{padding:18px; border:1px solid var(--ep-line); border-radius:16px;
  background:var(--ep-white)}
.need-ic{display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  margin-bottom:10px; border-radius:12px; background:var(--ep-tint); color:var(--ep-red)}
.need-card b{display:block; margin-bottom:5px; font-size:14.5px; font-weight:800}
.need-card p{margin:0; color:var(--ep-body); font-size:13px; line-height:1.6}

/* Статусы заказа: три фазы вместо россыпи из одиннадцати чипов */
.track{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.track-phase{padding:16px 18px 18px; border:1px solid var(--ep-line); border-radius:16px;
  background:var(--ep-white)}
.tp-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.tp-num{display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; background:var(--ep-red); color:#fff; font-size:12px; font-weight:800}
.tp-head b{font-size:14.5px; font-weight:800}
.track-phase ul{list-style:none; display:grid; gap:7px; margin:0; padding:0}
.track-phase li{position:relative; padding-left:20px; color:var(--ep-body);
  font-size:13px; line-height:1.5}
/* кружок по центру первой строки: строка 19.5px, кружок с обводкой 11px,
   значит top = 19.5/2 − 11/2 = 4px. При top:7px он висел на 3px ниже текста */
.track-phase li::before{content:""; position:absolute; left:5px; top:4px; width:7px; height:7px;
  border-radius:50%; background:var(--ep-tint); border:2px solid var(--ep-red)}
.track-phase:last-child li:last-child::before{background:var(--ep-green); border-color:var(--ep-green)}

@media (max-width:1000px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-step:nth-child(2)::after{display:none}
  .tline{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px}
  .tline-rail{display:none}
  .rush, .need, .track{grid-template-columns:1fr}
}
@media (max-width:640px){
  .flow{grid-template-columns:1fr}
  .flow-step::after{display:none}
  .tline{grid-template-columns:1fr}
}

.how-rules{list-style:none; display:grid; gap:8px}
.how-rules li{position:relative; padding-left:26px; color:var(--ep-body); font-size:13.5px;
  line-height:1.6}
.how-rules li::before{content:""; position:absolute; left:6px; top:8px; width:7px; height:7px;
  border-radius:50%; background:var(--ep-red)}

/* на внутренних страницах плиткам не нужен верхний отступ лендинга */
.shop.inner-shop .usp{padding-top:0}

/* Плитки-справки не кликабельны — убираем ховер, который обещал нажатие */
.shop.inner-shop .u:hover{transform:none; box-shadow:none}
.print-req div, .flow-step, .need-card, .rush-card, .track-phase{cursor:default}

/* Заголовок и содержимое на внутренних страницах: 38 px лендинга здесь
   разрывали страницу. Одно правило на все внутренние разделы. */
.shop.inner-shop .sec-head{margin-bottom:16px}
.shop.inner-shop .inner-section-title{margin:22px 0 10px}

/* «Другие разделы работ»: одинаковые карточки с миниатюрой раздела */
.folio-links{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.folio-links a{display:flex; align-items:center; gap:12px; min-height:66px;
  padding:10px 13px 10px 11px;
  border:1px solid var(--ep-line); border-radius:16px; background:var(--ep-white);
  font-size:12.5px; font-weight:700; color:var(--ep-ink); line-height:1.25; transition:.15s}
.folio-links a:hover{border-color:var(--ep-red); color:var(--ep-red); transform:translateY(-2px)}
.folio-links .folio-ic{width:42px; height:42px; flex:0 0 auto; object-fit:contain;
  transition:transform .2s ease}
.folio-links a:hover .folio-ic{transform:scale(1.1)}
/* текст прижат к правому краю, но не вплотную — 13 px от границы карточки */
.folio-links span{min-width:0; margin-left:auto; text-align:right; text-wrap:balance}
.folio-links i{display:block; margin-top:2px; font-style:normal; font-size:10.5px;
  font-weight:600; color:var(--ep-meta)}

/* Описание раздела: текст занимает всю высоту до кнопок */
.folio-text{flex:1 1 auto; overflow:auto}
.folio-text p{margin:0 0 10px; color:var(--ep-body); font-size:13.5px; line-height:1.6}
.folio-text p:last-child{margin-bottom:0}

/* Высоту задаёт фотография: описание лежит в абсолютной обёртке, поэтому длинный
   текст не растягивает строку сетки, а прокручивается внутри карточки. */
.folio-side-wrap{position:relative; min-height:340px}
.folio-side-wrap .folio-side{position:absolute; inset:0; overflow:hidden}
.folio-text{overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--ep-line) transparent;
  padding-right:4px}
.folio-text::-webkit-scrollbar{width:4px}
.folio-text::-webkit-scrollbar-thumb{background:#d7dbe2; border-radius:4px}

/* Размеры товара: отдельный ряд под кружками цвета */
.shop .size-row{margin-top:12px}
.shop .size-row[hidden]{display:none}
.shop .size-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:7px}
.shop .size-chip{min-width:46px; padding:8px 12px; border:1.5px solid var(--ep-line);
  border-radius:10px; background:var(--ep-white); color:var(--ep-ink);
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.14s}
.shop .size-chip:hover{border-color:var(--ep-red); color:var(--ep-red)}
.shop .size-chip.on{background:var(--ep-ink); border-color:var(--ep-ink); color:#fff}
.shop .size-chip.is-out{color:var(--ep-meta); border-style:dashed}
.shop .size-chip.is-out.on{background:var(--ep-meta); border-color:var(--ep-meta); color:#fff}

/* Размерная сетка: для одежды нормально заказывать 8 S, 9 M, 11 L одной кнопкой */
.shop .size-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.shop .size-mode{padding:0; border:0; background:none; cursor:pointer; font:inherit;
  font-size:12px; font-weight:700; color:var(--ep-red); text-decoration:underline dotted}
.shop .size-mode[aria-pressed="true"]{color:var(--ep-meta)}
.shop .size-run{margin-top:10px}
.shop .size-run[hidden]{display:none}
.shop .size-run-table{width:100%; border-collapse:collapse; font-size:13px}
.shop .size-run-table th{padding:6px 8px; border-bottom:1px solid var(--ep-line);
  color:var(--ep-meta); font-size:11.5px; font-weight:700; text-align:left}
.shop .size-run-table th:last-child, .shop .size-run-table td:last-child{text-align:right}
.shop .size-run-table td{padding:6px 8px; border-bottom:1px dashed var(--ep-line)}
.shop .size-run-table td:first-child{font-weight:700}
.shop .size-run-table .is-out{color:var(--ep-meta)}
.shop .size-run-table input{width:78px; padding:7px 9px; border:1.5px solid var(--ep-line);
  border-radius:9px; font:inherit; font-size:13px; font-weight:700; text-align:right;
  color:var(--ep-ink)}
.shop .size-run-table input:focus{outline:0; border-color:var(--ep-red)}
.shop .size-run-total{margin-top:8px; color:var(--ep-ink); font-size:13px; font-weight:700}
/* display:flex у класса перебивает атрибут hidden — возвращаем скрытие */
.shop .size-chips[hidden]{display:none}

/* ── Корзина: одна карточка на товар, размеры строками ─────────────────────── */
.cart-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:22px;
  align-items:start}
.cart-lines{display:grid; gap:12px; min-width:0}
.cart-card{border:1px solid var(--ep-line); border-radius:16px; background:var(--ep-white);
  padding:14px 18px 16px}
/* align-items:flex-start — из-за центрирования блок нанесения тянул название
   товара вниз, и у соседних карточек заголовки стояли на разной высоте. */
.cart-card-head{display:flex; align-items:flex-start; gap:13px; padding-bottom:10px;
  border-bottom:1px solid var(--ep-line)}
.cart-photo{display:flex; align-items:center; justify-content:center; width:56px; height:56px;
  flex:0 0 auto; overflow:hidden; border:1px solid var(--ep-line); border-radius:12px;
  background:var(--ep-photo); color:var(--ep-meta)}
.cart-photo img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.cart-card-title{flex:1 1 auto; min-width:0}
.cart-card-title b{font-size:14.5px; font-weight:800; letter-spacing:-.01em}
.cart-card-title a:hover b{color:var(--ep-red)}
.cart-card-title span{display:block; margin-top:3px; color:var(--ep-meta); font-size:12px}
.cart-card-price{flex:0 0 auto; text-align:right}
.cart-card-price b{display:block; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums}
.cart-card-price span{color:var(--ep-meta); font-size:11.5px}

/* table-layout:fixed — чтобы колонки стояли одинаково во всех карточках.
   Без него ширину задаёт содержимое, и у товара с длинным артикулом
   «Тираж» уезжает вправо относительно соседней карточки. */
.cart-table{width:100%; border-collapse:collapse; margin-top:2px; table-layout:fixed}
.cart-table th{padding:7px 8px; color:var(--ep-meta); font-size:11px; font-weight:700;
  text-align:left; text-transform:uppercase; letter-spacing:.08em; vertical-align:middle}
/* Заголовок стоит над своим числом. Цена и тираж — по центру своих колонок:
   цена, прижатая вправо, липла к полю тиража и читалась как его подпись.
   Сумма остаётся справа — столбик чисел выравнивают по правому краю, иначе
   «1799 ₽» и «105 958 ₽» не сложатся в столбик. */
.cart-table th:nth-child(2), .cart-table th:nth-child(3){text-align:center}
.cart-table th:nth-child(4){text-align:right}
/* Пять колонок, как в корзине «Проекта 111», только без «Нанесения»:
   артикул · цена за штуку · тираж · сумма · убрать. Цена за штуку своя
   у каждого цвета, поэтому она колонка, а не одна цифра над таблицей. */
/* Ширины в процентах, а не в пикселях: 110+132+120+44 в сумме давали 406 px,
   и на телефоне при table-layout:fixed колонке артикула не оставалось
   ничего — она схлопывалась в ноль, а таблица выезжала за карточку. */
/* Числовые колонки — в пикселях, а не в процентах. В них стоят числа и поле
   ввода известной ширины: их размер не зависит от того, насколько широко
   открыто окно, а процент заставлял его зависеть — на узкой карточке колонка
   «Тираж» становилась уже собственного содержимого, и «на складе N» уезжало
   на «Сумму». Подстраховать проценты нечем: при table-layout:fixed браузер
   молча игнорирует у колонок и min-width, и max(), а ch меряет по шрифту
   заголовка (11px), а не значения (14px). Тянется только артикул — он один
   умеет переноситься. */
/* 132, а не 104: лишние 28px — это и есть разрыв между ценой и тиражом.
   Раньше между ними было 16px, столько же, сколько между всеми колонками,
   и две разные величины выглядели одной. */
/* padding-right больше левого на 5px: цена смещается на столько же влево,
   и между ней и полем тиража появляется воздух, которого просил глаз. */
.cart-table th:nth-child(2), .cart-table td.cart-unit{width:132px; text-align:center;
  padding-right:13px}
/* 212 = поле 92 + зазор 9 + самая длинная подпись (90px у «на складе 12000»,
   87px у «ЗАКОНЧИЛСЯ») + отступы ячейки. Колонка кончается сразу за подписью:
   раньше за ней оставалось 130px пустого трека, и «Сумма» начиналась через
   123px после остатка при 16px в остальных стыках — это и был неровный ритм. */
.cart-table th:nth-child(3){width:212px}
.cart-table th:nth-child(4), .cart-table td.cart-sum{width:104px; text-align:right}
.cart-table th:last-child, .cart-table td.cart-drop{width:44px; text-align:right}
/* Строка в одну линию: поле тиража и остаток стоят рядом, а не друг под другом.
   Ширины у самой ячейки при этом быть не должно. `td` с display:flex перестаёт
   быть ячейкой таблицы — браузер заворачивает его в безымянную ячейку, и
   width меряет уже флекс-коробку внутри неё, а не колонку. Коробка выходила
   104px внутри колонки в 235px: подпись торчала наружу, а пунктир строки
   обрывался на середине, потому что border-top висит на td. */
/* Сетка из трёх дорожек: пустая — поле — остаток. Поле встаёт ровно
   по центру колонки, поэтому заголовок «Тираж» стоит над числом, которое
   человек меняет, а не над серединой пары «поле + подпись». Остаток
   остаётся рядом, справа: это ограничение на ввод, и читать его надо там же. */
.cart-table td.cart-qty{display:grid; align-items:center; width:auto; min-width:0;
  grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr); column-gap:9px}
.shop .cart-table td.cart-qty .cart-stock{grid-column:3; justify-self:start}
/* «Закончился» — слово длинное и редкое, справа от поля оно не помещается
   и сдвинуло бы поле из центра. Ставим его под полем: строка вырастает
   только там, где заказать всё равно нечего, а причина стоит ровно под
   запертым полем, а не сбоку от него. */
.shop .cart-table td.cart-qty .cart-stock.is-out{grid-column:2; grid-row:2;
  justify-self:center; margin-top:4px}
/* flex-wrap — страховка, а не раскладка: если карточку всё же зажало, подпись
   уходит под поле, а не поверх суммы. Поле не сжимается — в него вводят руками. */
.cart-table td.cart-qty input{grid-column:2; width:92px}
.cart-unit{color:var(--ep-body); font-weight:600; font-variant-numeric:tabular-nums}
.cart-variant i{display:block; margin-top:2px; color:var(--ep-meta); font-size:11.5px;
  font-style:normal}
.cart-table td{padding:7px 8px; border-top:1px dashed var(--ep-line); vertical-align:middle}
/* Первым в строке стоит артикул — он различает варианты в заказе
   поставщику. Цвет с размером идут второй строкой и только когда строк
   несколько: у одиночной это был пересказ названия сверху. */
.cart-variant b{display:block; font-size:13.5px; font-weight:800;
  font-variant-numeric:tabular-nums}
.cart-variant span{display:block; margin-top:2px; color:var(--ep-meta); font-size:12.5px}
.cart-qty input{width:100%; padding:9px 11px; border:1.5px solid var(--ep-line);
  border-radius:10px; font:inherit; font-size:14px; font-weight:700; text-align:center;
  color:var(--ep-ink); font-variant-numeric:tabular-nums}
.cart-qty input:focus{outline:0; border-color:var(--ep-red)}
.cart-sum{font-weight:700; font-variant-numeric:tabular-nums}
.cart-remove{width:30px; height:30px; padding:0; border:1px solid var(--ep-line);
  border-radius:9px; background:var(--ep-white); color:var(--ep-meta); cursor:pointer;
  font-size:17px; line-height:1; transition:.14s}
.cart-remove:hover{border-color:var(--ep-red); color:var(--ep-red)}

.cart-card-foot{display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-top:12px; padding-top:11px; border-top:1px solid var(--ep-line)}
/* Итога по товару нет — значит нет и полосы под таблицей: пустой отчёркнутый
   поясок читается как «тут что-то не загрузилось». */
.cart-card-foot.is-quiet{margin-top:0; padding-top:0; border-top:0}
.cart-card-total{font-size:13px; color:var(--ep-body)}
.cart-card-total b{color:var(--ep-ink); font-variant-numeric:tabular-nums}
.cart-card-total span{display:block; margin-top:2px; color:var(--ep-meta); font-size:11.5px}
.cart-card-foot .btn-red{flex:0 0 auto; width:auto; padding:11px 20px}

.cart-side{position:sticky; top:16px}
.cart-total-card{display:grid; gap:12px; padding:20px; border:1px solid var(--ep-line);
  border-radius:16px; background:var(--ep-white)}
.cart-total-card h3{font-size:17px; font-weight:800; letter-spacing:-.01em}
.cart-total-card > p{color:var(--ep-body); font-size:13px; line-height:1.55}
.cart-total-row{display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:13px; background:var(--ep-bg); font-size:13px;
  color:var(--ep-body)}
.cart-total-sum{text-align:right}
.cart-total-sum em{display:block; color:var(--ep-meta); font-size:11.5px; font-style:normal}
.cart-total-sum b{font-size:24px; font-weight:800; color:var(--ep-red);
  font-variant-numeric:tabular-nums}
.cart-continue{justify-self:center; color:var(--ep-body); font-size:13px; font-weight:600;
  text-decoration:underline dotted}
.cart-continue:hover{color:var(--ep-red)}
.cart-clear{padding:0; border:0; background:none; color:var(--ep-meta); font:inherit;
  font-size:12.5px; cursor:pointer; text-decoration:underline dotted}
.cart-clear:hover{color:var(--ep-red)}
/* Двухколоночную корзину включаем только когда после сайдбара в 360px
   карточке остаётся больше 600px. Было 900px: на 901px таблице доставался
   431px, а в него пять колонок не влезают ни при какой вёрстке. */
@media (max-width:1040px){
  .cart-layout{grid-template-columns:1fr}
  .cart-side{position:static}
}

/* Счётчик в размерной сетке: «− количество +» по горизонтали, без стрелок вверх-вниз */
.shop .qty-step{display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--ep-line);
  border-radius:11px; overflow:hidden; background:var(--ep-white)}
.shop .qty-step button{width:34px; height:36px; padding:0; border:0; background:none;
  color:var(--ep-body); font:inherit; font-size:16px; line-height:1; cursor:pointer;
  transition:.12s}
.shop .qty-step button:hover{background:var(--ep-tint); color:var(--ep-red)}
.shop .qty-step input{width:52px; height:36px; padding:0; border:0; border-left:1.5px solid var(--ep-line);
  border-right:1.5px solid var(--ep-line); background:none; font:inherit; font-size:14px;
  font-weight:700; text-align:center; color:var(--ep-ink); font-variant-numeric:tabular-nums}
.shop .qty-step input:focus{outline:0; background:var(--ep-bg)}
.shop .size-run-table td:last-child{text-align:right}

/* У размерных товаров внизу не счётчик, а итог по сетке */
.shop .qty-sum{display:flex; align-items:baseline; gap:9px; padding:11px 16px;
  border:1.5px solid var(--ep-line); border-radius:12px; background:var(--ep-bg)}
.shop .qty-sum em{color:var(--ep-meta); font-size:12px; font-style:normal; font-weight:700}
.shop .qty-sum b{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums}

/* Карточки каталога и рекомендаций — как на главной: кнопка «Заказать» поверх
   фото по наведению, без отдельного ряда кнопок, из-за которого была пустота */
.shop .card .photo-cta{position:absolute; inset:0; display:flex; align-items:flex-end;
  justify-content:center; padding:12px; opacity:0; transition:.18s;
  background:linear-gradient(to top, rgba(23,24,28,.55), rgba(23,24,28,0) 58%)}
.shop .card:hover .photo-cta, .shop .card:focus-within .photo-cta{opacity:1}
.shop .card .photo-cta .btn-red{display:inline-flex; align-items:center; gap:8px; width:auto;
  padding:10px 18px; border-radius:100px; font-size:13px; font-weight:700}
.shop .card .stock{margin-top:auto}
@media (hover:none){ .shop .card .photo-cta{opacity:1} }

/* Таблица размеров занимает всю ширину колонки, как тиражная сетка под ней.
   Узкой её делать не надо — сжимали только высоту. */
.shop .size-run{max-width:none}
.shop .size-run-table{width:100%}
/* «Размер» и «На складе» переносились на две строки — даём столбцам место,
   справа его достаточно */
.shop .size-run-table th{white-space:nowrap}
.shop .size-run-table th:first-child, .shop .size-run-table td:first-child{width:92px}
.shop .size-run-table th:nth-child(2), .shop .size-run-table td:nth-child(2){width:130px}
.shop .size-run-table td:nth-child(2){white-space:nowrap}

/* Тиражная сетка у размерных товаров — только показ: ступень подсвечивается
   сама по количеству из сетки, нажимать её незачем */
.shop .tiers.is-readonly .tier{cursor:default}
.shop .tiers.is-readonly .tier:hover{border-color:var(--ep-line); background:var(--ep-white)}
.shop .tiers.is-readonly .tier.on{border-color:var(--ep-red); background:var(--ep-tint)}

/* Нижний блок расчёта: был воздушным на весь ряд — сжимаем */
.shop .buy-row{margin-bottom:12px; padding:11px 14px; border-radius:12px}
.shop .calc-summary-row{gap:10px}
.shop .total b{font-size:21px}
.shop .total em{font-size:11px}
.shop .calc-result__details{margin-top:6px; gap:5px 18px; font-size:11.5px}
.shop .qty-sum{padding:9px 13px}
.shop .qty-sum b{font-size:16px}

/* Сетка размеров по вертикали: семь строк по 52 px растягивали карточку на
   449 px. Ужимаем высоту, ширину не трогаем. */
.shop .size-run-table th{padding:3px 8px; font-size:10.5px}
.shop .size-run-table td{padding:2px 8px}
.shop .qty-step button{width:30px; height:28px; font-size:15px}
.shop .qty-step input{width:46px; height:28px; font-size:13px}
.shop .size-run-total{margin-top:6px; font-size:12.5px}
.shop .size-row{margin-top:10px}
.shop .size-row .opt-label{margin-bottom:2px}

/* Заголовок листинга стоит под крошками во всю ширину и по их левому краю:
   раньше он жил в правой колонке и «сползал» вниз относительно крошек.
   Крошки ужаты, чтобы весь блок поднялся к линии меню, а зазор до фильтров
   остался небольшим. */
.shop .list-head{margin:0 0 10px}
.shop .crumbs{padding:9px 0 3px}

/* Неактивная кнопка обязана выглядеть неактивной: красная и «нажимаемая» она
   обещает то, чего пока нет — счёта до расчёта нанесения не существует.
   Правило стоит в конце и с селектором .shop: иначе его перебивает
   .shop .btn-red — та же специфичность, но объявлено ниже. */
.btn-red[disabled],.btn-red[disabled]:hover,
.shop .btn-red[disabled],.shop .btn-red[disabled]:hover{
  background:#E7E9EE; color:#98A0AE; cursor:not-allowed; box-shadow:none}

/* ── Стадии заказа на странице клиента ─────────────────────────────────────
   Тот же порядок, что в панели у менеджера, но пять шагов вместо девяти.
   Лента только показывает: двигает её человек, который заказ ведёт. */
.order-stages{display:flex; flex-wrap:wrap; gap:0; list-style:none; margin:18px 0 26px;
  padding:0; counter-reset:stage}
.order-stage{position:relative; flex:1 1 120px; min-width:110px; padding:0 8px;
  text-align:center; color:var(--meta); font-size:13.5px; font-weight:600}
/* линия между точками — до следующего шага, у последнего её нет */
.order-stage::before{content:""; position:absolute; top:8px; left:calc(-50% + 9px);
  width:calc(100% - 18px); height:2px; background:var(--line)}
.order-stage:first-child::before{display:none}
.order-stage-dot{display:block; width:18px; height:18px; margin:0 auto 8px;
  border-radius:50%; background:#fff; border:2px solid var(--line); position:relative; z-index:1}
.order-stage.is-done{color:var(--body)}
.order-stage.is-done .order-stage-dot{background:var(--red); border-color:var(--red)}
.order-stage.is-done::before{background:var(--red)}
.order-stage.is-current{color:var(--ink)}
.order-stage.is-current .order-stage-dot{background:var(--red); border-color:var(--red);
  box-shadow:0 0 0 5px var(--tint)}
.order-stage.is-current::before{background:var(--red)}
.order-stages-cancelled{margin:18px 0 26px; padding:12px 16px; border-radius:12px;
  background:var(--blush); color:var(--red-dark); font-weight:600}
@media (max-width:560px){
  .order-stages{flex-direction:column; gap:10px; align-items:flex-start}
  .order-stage{display:flex; align-items:center; gap:10px; text-align:left; padding:0;
    min-width:0; flex:0 0 auto}
  .order-stage::before{display:none}
  .order-stage-dot{margin:0}
}

/* Ячейка формы не должна растягивать поле по высоте соседней.
   На регистрации у «Пароля» есть подсказка, а у «E-mail» её нет — и поле
   почты вытягивалось на две строки, будто это текстовая область. */
.pc-field{align-content:start}
.pc-field select, .pc-field input{align-self:start; width:100%}

/* ─── Вход и регистрация ───────────────────────────────────────────────────
   Одна панель работает и страницей, и содержимым окна поверх сайта.
   Токены — магазинные (--ep-*), потому что и страница, и окно живут
   в контуре внутренних страниц.

   Заодно закрыты две дыры дизайн-системы, найденные при разборе:
   класса .input не существовало вовсе (поля выживали только внутри
   .pc-field), а .ticks не существует до сих пор — списка «что это даёт»
   в новой раскладке нет, и класс больше нигде не нужен. */
.auth{--ep-red:#D9232A; --ep-red-dark:#B91723; --ep-ink:#20242C; --ep-body:#4C525E;
  --ep-meta:#8A90A0; --ep-line:#E8EAEF; --ep-white:#fff; --ep-tint:#FBECEC;
  /* Плотнее: регистрация — пять полей, и с прежними отступами она
     не помещалась на экран ноутбука. Прокрутка в форме входа означает,
     что кнопки «Зарегистрироваться» не видно, пока её не ищут. */
  display:grid; gap:9px; color:var(--ep-body); font-size:14px; line-height:1.5}

/* вкладки «Вход / Регистрация» — переключатель, а не две ссылки в тексте */
.auth-tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:#F1F2F5; border-radius:100px}
.auth-tab{display:flex; align-items:center; justify-content:center; padding:8px 14px;
  border-radius:100px; font-size:13.5px; font-weight:700; color:var(--ep-meta);
  text-decoration:none; transition:background .15s, color .15s}
.auth-tab:hover{color:var(--ep-ink)}
.auth-tab.is-on{background:var(--ep-white); color:var(--ep-ink);
  box-shadow:0 1px 3px rgba(32,36,44,.14)}

/* Отступ снизу: без него подводка липла к подписи первого поля,
   и две строки разного назначения читались как одна. */
.auth-lead{margin:0 0 6px; color:var(--ep-meta); font-size:13px; text-align:center}

/* Одна колонка всегда. Две колонки в регистрации заставляли глаз идти
   зигзагом: «Телефон» оказывался справа от имени, «Почта» под именем —
   и порядок, в котором человек о себе рассказывает, разваливался.
   Классы --two и --wide больше не используются, правила сняты. */
.auth-fields{display:grid; gap:9px}
/* «или» между телефоном и почтой на входе: нужно что-то одно, и сказать
   это надо ровно там, где человек выбирает. Разделитель во всю ширину —
   слово посередине, линии по бокам: так видно, что это развилка, а не
   подпись к соседнему полю. */
.auth-fields--either .auth-field[data-field="email"]{position:relative;
  padding-top:20px}
.auth-fields--either .auth-field[data-field="email"]::before{content:"";
  position:absolute; top:8px; left:0; right:0; height:1px; background:var(--ep-line)}
.auth-fields--either .auth-field[data-field="email"]::after{content:"или";
  position:absolute; top:0; left:50%; transform:translateX(-50%); padding:0 10px;
  background:var(--ep-white); color:var(--ep-meta); font-size:11.5px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; line-height:16px}
/* Заблокированное поле развилки: заполнили телефон — почта гаснет, и наоборот.
   Так видно, что нужно что-то одно, а не оба. */
.auth-field input:disabled{background:#F4F5F8; color:#A8AEBB; cursor:not-allowed}
.auth-fields--either .auth-field:has(input:disabled) .auth-field__label{opacity:.5}
.auth-row--center{justify-content:center}
/* Регистрация — пять полей, и в одну колонку она не помещается на экран
   ноутбука: человек заполняет форму вслепую, кнопки не видя. Пары стоят
   по смыслу (как зовут — телефон, пароль — повтор), почта на всю ширину;
   зигзага, из-за которого две колонки убрали в прошлый раз, здесь нет.
   На узком экране всё возвращается в одну колонку. */
/* Одна колонка во всех состояниях, включая пароль и повтор. Две колонки
   пробовали ради высоты — форма от них стала шире и разъезжалась глазами;
   решение Эрнеста от 14.08: узкая карточка, поля друг под другом. */
/* align-content:start — чтобы поле рядом с полем-с-подсказкой не вытягивалось
   на высоту соседней ячейки: «Пароль ещё раз» становился вдвое выше «Пароля». */
.auth-field{display:grid; gap:4px; min-width:0; align-content:start}
.auth-field__label{font-size:12px; font-weight:700; color:var(--ep-meta)}
.auth-field input{width:100%; padding:10px 13px; border:1.5px solid var(--ep-line);
  border-radius:12px; background:var(--ep-white); font:inherit; font-size:14px;
  font-weight:600; color:var(--ep-ink); transition:border-color .15s, box-shadow .15s}
.auth-field input::placeholder{font-weight:500; color:#B9BEC9}
/* Фокус — серый, а не красный. Красный на сайте означает ошибку, и когда
   в него же красилось поле, в которое человек только что встал курсором,
   форма выглядела так, будто он уже успел ошибиться. Красное обрамление
   остаётся ровно за настоящей ошибкой — правило ниже. */
.auth-field input:focus{outline:0; border-color:#B4BAC7;
  box-shadow:0 0 0 3px rgba(32,36,44,.06)}
.auth-field__error{font-size:12px; font-weight:600; color:var(--ep-red)}
.auth-field__hint{font-size:12px; color:var(--ep-meta)}
/* Подсказка к паролю — на всю ширину карточки, одной строкой. */
.auth-hint{margin:-2px 0 0; color:var(--ep-meta); font-size:12px;
  line-height:1.4; text-align:center}
.auth-field:has(.auth-field__error:not([hidden])) input{border-color:var(--ep-red)}
/* Глазок «показать пароль». Двойной ввод вслепую — первая причина «не могу
   войти»: опечатка повторяется в обоих полях одинаково и молча проходит. */
.auth-field__wrap{position:relative; display:block}
.auth-field__wrap input{width:100%; padding-right:44px}
.auth-eye{position:absolute; top:50%; right:6px; transform:translateY(-50%);
  display:grid; place-items:center; width:30px; height:30px; padding:0;
  border:0; border-radius:9px; background:none; color:#98A0AE; cursor:pointer}
.auth-eye:hover{color:var(--ep-ink); background:#F2F4F8}
.auth-eye:focus-visible{outline:2px solid #B4BAC7; outline-offset:1px}
.auth-eye svg{width:19px; height:19px; display:block}

.auth-submit{width:100%; padding:12px 22px; border:0; border-radius:100px;
  background:var(--ep-red); color:#fff; font:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer; transition:background .15s, transform .15s}
.auth-submit:hover{background:var(--ep-red-dark); transform:translateY(-1px)}
.auth-submit[disabled]{background:#E7E9EE; color:#98A0AE; cursor:wait; transform:none}

.auth-form{display:grid; gap:10px}
/* Всё служебное — по центру и одинаково во всех трёх состояниях панели:
   подводка, «Забыли пароль», «Назад ко входу», сноски под кнопкой.
   Разнобой прижатых влево строк читался как недоделка. */
/* Каждая сноска — одной строкой: перенос делит фразу пополам и заставляет
   читать её как абзац. Ради этого карточка шире, а кегль мельче. */
.auth-foot{margin:0; color:var(--ep-meta); font-size:11.5px; line-height:1.4;
  text-align:center}
.auth-foot a{color:var(--ep-red); font-weight:700}

.auth-note{margin:0; padding:11px 14px; border-radius:12px; font-size:13px;
  line-height:1.5; background:#F5F6F8; color:var(--ep-body)}
.auth-note--error{background:var(--ep-tint); color:#96131A; font-weight:600}
.auth-note--warn{background:#FFF6E8; color:#8A5200}
.auth-note--dev{background:#EEF6FF; color:#1B4C7E}
.auth-note a{color:inherit; font-weight:700}
.auth-inline-form{display:inline}
.auth-link{padding:0; border:0; background:none; color:var(--ep-red); font:inherit;
  font-size:13px; font-weight:700; cursor:pointer; text-decoration:underline;
  text-underline-offset:4px}
.auth-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center}

.auth-done{display:grid; justify-items:center; gap:10px; text-align:center;
  padding:6px 0 2px}
.auth-done__mark{display:grid; place-items:center; width:52px; height:52px;
  border-radius:50%; background:var(--ep-tint); color:var(--ep-red)}
.auth-done__title{margin:0; font-size:20px; font-weight:800; color:var(--ep-ink);
  letter-spacing:-.01em}
.auth-done__text{margin:0; color:var(--ep-body); font-size:13.5px}
/* Срок жизни ссылки — отдельной строкой и мельче: это сноска
   к действию, а не часть самого действия. */
.auth-done__note{margin:4px 0 0; color:var(--ep-meta); font-size:12px}

/* страница: панель по центру, а не прижата к левому краю под лидом справа */
.auth-page{display:grid; justify-items:center}
.auth-page__head{width:min(440px,100%); margin-bottom:14px}
.auth-page .auth{width:min(440px,100%); padding:16px 20px; border:1px solid var(--ep-line);
  border-radius:18px; background:var(--ep-white);
  box-shadow:0 18px 40px -28px rgba(32,36,44,.4)}

/* окно поверх сайта */
/* margin:auto — обязательно и явно: глобальный сброс `*{margin:0}` в начале
   файла перебивает браузерное правило для <dialog>, и окно уезжает
   в левый верхний угол. */
.auth-modal{width:min(460px,calc(100vw - 32px)); margin:auto; padding:0; border:0;
  border-radius:20px; background:var(--card,#fff);
  box-shadow:0 30px 60px -24px rgba(23,24,28,.45); color:#20242C}
.auth-modal::backdrop{background:rgba(23,24,28,.55); backdrop-filter:blur(2px)}
.auth-modal[open]{animation:auth-in .18s ease-out}
.auth-modal__in{padding:18px 22px 20px}
.auth-modal__close{position:absolute; top:12px; right:12px; width:34px; height:34px;
  display:grid; place-items:center; border:0; border-radius:50%; background:#F1F2F5;
  color:#5B6472; font-size:18px; line-height:1; cursor:pointer}
.auth-modal__close:hover{background:#E6E8EE; color:#20242C}
@keyframes auth-in{from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .auth-modal[open]{animation:none}
  .auth-submit:hover{transform:none}
}
}
@media (max-width:560px){
  .auth-modal{width:100vw; max-width:100vw; margin:auto auto 0; border-radius:20px 20px 0 0}
}

/* Поле с классом .input вне .pc-field раньше не имело правил вовсе —
   оставалось браузерным. Класс ставит forms.py всем виджетам. */
.shop .input{width:100%; padding:11px 13px; border:1.5px solid var(--ep-line);
  border-radius:11px; background:var(--ep-white); font:inherit; font-size:14px;
  font-weight:600; color:var(--ep-ink)}
.shop .input:focus{outline:0; border-color:var(--ep-red)}
/* Панель входа — исключение: там фокус серый, красный оставлен ошибке.
   Правило выше (.shop .input) специфичнее одиночного .auth-field input
   и перекрашивало поле обратно, поэтому исключение записано здесь,
   ниже по файлу и с той же силой селектора. */
.shop .auth .auth-field input:focus{border-color:#B4BAC7;
  box-shadow:0 0 0 3px rgba(32,36,44,.06)}
.shop .auth .auth-field:has(.auth-field__error:not([hidden])) input{
  border-color:var(--ep-red)}

/* Django-сообщения в base.html выводились неоформленным текстом. */
.flash{max-width:1280px; margin:14px auto 0; padding:11px 16px; border-radius:12px;
  background:#F5F6F8; color:#4C525E; font-size:13.5px}
.flash--error{background:#FBECEC; color:#96131A; font-weight:600}
.flash--warning{background:#FFF6E8; color:#8A5200}
.flash--success{background:#E4F5EC; color:#146B3A}

/* Восстановление пароля прямо на странице входа. Отдельная страница ради
   одного поля уводила человека оттуда, куда он шёл, — а вернуться потом
   сложнее, чем кажется. Кнопка «на просвет»: главное действие на экране
   одно — «Войти», и второй красной кнопки рядом быть не должно. */
.auth-reset{margin-top:14px; padding-top:14px; border-top:1px solid var(--ep-line)}
.auth-reset[hidden]{display:none}
.auth-submit--ghost{background:var(--ep-white); border:1.5px solid var(--ep-line);
  color:var(--ep-ink)}
.auth-submit--ghost:hover{background:var(--ep-bg); border-color:var(--ep-red);
  color:var(--ep-red); transform:none}

/* Восстановление доступа — третье состояние панели, а не отдельная страница.
   Вкладок по-прежнему две: вход и регистрация это развилка «свой или новый»,
   а восстановление — ответвление от входа, и ставить их в один ряд значит
   соврать про устройство. Отсюда «← Назад ко входу» вместо третьей вкладки. */
.auth-back{margin:0 0 10px; text-align:center}
/* Заголовок состояния живёт внутри карточки — и на странице, и в окне.
   Крупный «РЕГИСТРАЦИЯ» над карточкой повторял активную вкладку и съедал
   85 пикселей высоты, из-за которых форма не помещалась на экран.
   В разметке он остался (нужен странице как заголовок), но убран с глаз. */
.auth-page__head{position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.auth-title{margin:0 0 6px; text-align:center; color:var(--ep-ink); font-size:19px; font-weight:800;
  line-height:1.25}
.auth-link{padding:0; border:0; background:none; color:var(--ep-red);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
.auth-link:hover{color:var(--ep-red-dark)}
.auth-field__error[hidden]{display:none}
/* Пока панель подменяется, содержимое гаснет — иначе на медленной сети
   старая форма стоит как ни в чём не бывало и кажется, что клик не сработал. */
[data-auth-body][aria-busy="true"]{opacity:.45; pointer-events:none}

/* Остаток под полем количества в корзине. Обычно это спокойная справка,
   но когда склад урезал введённое число — она обязана объяснить, почему
   в поле стоит не то, что набрали. */
.shop .cart-stock{display:block; margin-top:0; color:var(--ep-meta); font-size:11px;
  white-space:nowrap}
.shop .cart-stock.is-capped{color:var(--ep-red); font-weight:700}
/* Позиция кончилась, пока корзина стояла: остатки приходят раз в час.
   Строку видно, но заказать её нельзя — поле заперто, оформление закрыто. */
.shop .cart-stock.is-out{color:var(--ep-red); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em}
.shop .cart-qty input:disabled{background:#F4F5F7; color:var(--ep-meta);
  border-color:var(--ep-line); cursor:not-allowed}
.shop .cart-quote-note.is-out{color:var(--ep-red)}
.shop .btn-red.is-off{background:#E6E8EC; border-color:#E6E8EC; color:var(--ep-meta);
  cursor:not-allowed; box-shadow:none}

/* Предел по складу в карточке товара: подсказка появляется только в тот момент,
   когда набранное число обрезали, — постоянно висящая строка про остаток
   читается как отказ ещё до того, как человек что-то ввёл. */
.shop .qty-limit{margin:8px 0 0; color:var(--ep-red); font-size:12px; line-height:1.45}
.shop .size-run-table input.at-limit{border-color:var(--ep-red); color:var(--ep-red)}
.shop [data-cart-form][aria-busy="true"] .cart-sum,
.shop [data-cart-form][aria-busy="true"] .cart-card-total{opacity:.5}

/* Сердечко «отложить». Кнопка привязана к общей форме в конце страницы
   атрибутом form= — своей формы у неё нет: каталог обёрнут в форму фильтров,
   и вложенная форма браузером просто выбрасывается. */
.fav,.shop .fav{padding:0; cursor:pointer}
.fav.on,.shop .fav.on{border-color:var(--ep-red,#D9232A); color:var(--ep-red,#D9232A)}
.fav.on svg,.shop .fav.on svg{fill:currentColor}
.card,.pcard{position:relative}

/* Избранное: сетка по ширине карточки, а не в три столбца.
   Каталогу три столбца заданы жёстко, потому что слева стоит колонка
   фильтров. На избранном её нет, и те же три столбца растягивали карточку
   вдвое — фото раздувалось на пол-экрана. Здесь считаем по минимальной
   ширине карточки: на широком экране их станет пять-шесть, как в любом
   каталоге без боковой колонки. */
body[data-page="favorites"] .pgrid{
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
@media (max-width:760px){
  body[data-page="favorites"] .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ─── Нанесение в карточке корзины ─────────────────────────────────────────
   Было списком с маркерами: строка на каждое место и одинаковый хвост
   «макет пришлёте менеджеру» в каждой. Класса .cart-prints в стилях при этом
   не существовало вовсе, поэтому маркеры висели браузерные и лезли за край.
   Стало сводом: где и чем печатаем — строкой, места — плашками, ожидание
   макета — один раз. */
.cart-print{display:grid; gap:6px; margin-top:8px}
.cart-print__head{font-size:12.5px; font-weight:700; color:var(--ep-ink)}
.cart-print__places{display:flex; flex-wrap:wrap; gap:5px}
.cart-print__places i{padding:3px 9px; border-radius:100px; background:var(--ep-photo);
  color:var(--ep-body); font-size:12px; font-style:normal; font-weight:600;
  white-space:nowrap}
.cart-print__note{color:var(--ep-meta); font-size:12px; line-height:1.5}

/* Корзина на телефоне: четыре колонки в 360 px не помещаются — тираж
   становится полем в 40 px, а сумма переносится по слогам. Поэтому строка
   раскладывается в две: сверху артикул и цена, снизу тираж, сумма и «убрать».
   Заголовки таблицы при этом не нужны — подписи стоят у самих значений. */
/* Раскладка в две строки нужна раньше, чем с 560px: на 561px таблица
   получает 473px, и колонке артикула остаётся 9px. */
@media (max-width:700px){
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{display:block; width:auto}
  .cart-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .cart-table tr{display:grid; grid-template-columns:1fr auto auto;
    grid-template-areas:"art art art" "qty sum drop"; gap:8px 10px;
    padding:10px 0; border-top:1px dashed var(--ep-line)}
  .cart-table td{padding:0; border:0}
  .cart-table td.cart-variant{grid-area:art}
  /* Цена и артикул делят одну область сетки, поэтому и так стоят в одной
     строке. Отрицательный отступ вытаскивал цену на 22px выше — ровно на
     пунктирную границу строки, и цифры оказывались перечёркнуты. */
  .cart-table td.cart-unit{grid-area:art; justify-self:end; align-self:start;
    width:auto}
  .cart-table td.cart-qty{grid-area:qty; width:118px}
  .cart-table td.cart-sum{grid-area:sum; align-self:center; width:auto}
  .cart-table td.cart-drop{grid-area:drop; align-self:center; width:auto}
  .cart-card-foot{flex-wrap:wrap}
}

/* Приладка отдельной строкой под суммой: это не повтор итога, а деньги,
   которых в цене за штуку нет. Раньше подпись жила в карточке товара —
   вместе с итогом по товару, который оттуда убран как дубль панели. */
.cart-setup-note{margin:-4px 0 0; color:var(--ep-meta); font-size:11.5px; line-height:1.5}

/* Подпись над корзиной. В `.sec-head p` стоит 16px — размер лида раздела,
   и для служебной строчки «сумма пересчитается сама» он великоват; селектор
   там сильнее .pc-hint, поэтому переопределяем явно. Заодно прижимаем её
   к панели «Ваш заказ», о которой она и говорит. */
.shop .sec-head p.cart-lead{margin:0; font-size:12.5px; color:var(--ep-meta);
  max-width:none; text-align:right}
.shop .cart-lines + .cart-side, .shop .cart-layout{margin-top:6px}
/* Номер корзины: рядом с заголовком, но тише его — это ссылка на разговор
   с менеджером, а не заголовок. */
.cart-no{font-size:13px; font-weight:700; color:var(--ep-meta);
  font-variant-numeric:tabular-nums; white-space:nowrap}

/* «выбранного цвета» рядом с остатком: приписка, а не часть цифры.
   Без неё «в наличии 50 шт» у товара, где на складе 27 000, читается
   как ошибка сайта. */
.avail-of{color:var(--ep-meta); font-size:11.5px; font-weight:600}

/* «Всё в вашей корзине» — не ошибка и не отказ, поэтому не красное.
   Янтарное: состояние, которое человек создал сам и может изменить,
   убрав лишнее из корзины. */
.shop .avail.is-reserved{background:#FFF6E8; color:#8A5200}
.avail-reserved{margin-left:8px; color:#8A5200; font-size:12px; font-weight:700;
  white-space:nowrap}

/* ── Выражение расчёта в карточке товара ───────────────────────────────────
   Ряд читается одной фразой: «53 × 1 700 ₽ за шт. = 90 100 ₽». Через
   space-between цена и итог стояли по краям, и на карточке шириной 774px
   между ними было 456px пустоты: глаз видел две цифры, а не умножение.

   Перенос отдан flex-wrap, а не медиазапросу: самая узкая колонка расчёта
   не на телефоне, а на ноутбуке около 950px, где галерея забирает 520px
   и внутри .buy-row остаётся 284px против мобильных 264. Ширина окна
   об этом не знает.

   Отдельный класс, а не правка .total: те же .total и .calc-summary-row
   стоят на странице сметы и на «Заказ принят». */
.shop .calc-expr{display:flex; align-items:center; flex-wrap:wrap; gap:9px 12px}
/* Итог прижат к правому краю ряда: множители читаются слева направо,
   а сумма стоит там, где её и ищут глазом. */
.shop .calc-expr > .total{margin-left:auto; display:block; width:auto;
  text-align:right}
.shop .calc-expr > .stepper, .shop .calc-expr > .qty-sum{flex:0 0 auto}
/* Множитель — цельный кусок: при переносе знак уходит на новую строку вместе
   со своим числом, а не остаётся висеть хвостом предыдущей. */
.shop .calc-expr__part{display:inline-flex; align-items:baseline; gap:6px;
  white-space:nowrap}
/* Фиксированная ширина ставит × и = в один левый столбец, когда ряд
   переносится: выражение продолжает читаться столбиком, как на бумаге. */
.shop .calc-expr__op{flex:0 0 auto; width:14px; color:var(--ep-meta);
  font-size:15px; font-weight:600; font-style:normal; text-align:center}
/* Цена за штуку — участник выражения, а не сноска. «за шт.» отдельным словом
   и серым, иначе «1 700 ₽ за шт.» слипается в одно длинное число. */
.shop .calc-expr__price{color:var(--ep-ink); font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums}
.shop .calc-expr__unit{color:var(--ep-meta); font-size:11.5px; font-weight:600;
  font-style:normal}
@media (max-width:560px){
  .shop .calc-expr{gap:8px 10px}
}

/* Артикул размера под его названием: у оверсайза он свой у каждой пары
   («52104.102/XS/S»), и заказывают у поставщика именно по нему. Без него
   на карточке у всех размеров стоял один артикул модели. */
.shop .size-run-table td b{display:block; font-size:13.5px; font-weight:800}
.shop .size-sku{display:block; margin-top:2px; color:var(--ep-meta); font-size:11px;
  font-variant-numeric:tabular-nums}

/* Подартикул цвета рядом с его названием. Артикул у Happy Gifts
   трёхуровневый: модель «52104», цвет «52104.126», размер «52104.126/XS/S».
   В шапке карточки стоит модель — она одна на пятнадцать цветов. */
/* Артикул выбранного цвета — теперь единственный на карточке, поэтому
   не серой сноской, а рядовым текстом: по нему ищут у поставщика. */
.shop .variant-sku{margin-left:10px; color:var(--ep-ink); font-size:13px;
  font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}

/* Кнопка «В корзину» стоит внутри серой плиты расчёта, последней строкой:
   тираж → цена за штуку → итог → действие. Раньше она висела под плитой
   отдельно, и решение оказывалось оторвано от суммы, ради которой его
   принимают. */
.shop .buy-row__cta{margin:12px 0 0; padding-top:12px;
  border-top:1px solid rgba(32,36,44,.08)}
.shop .buy-row__cta .btn-red{width:100%; justify-content:center; padding:13px 22px;
  font-size:14.5px}

/* ── Итоговая сетка расчёта: скидки слева, оговорки справа ────────────────
   Четыре величины стояли одним flex-рядом с переносом, и порядок переноса
   решала ширина: на 1440 всё влезало в строку, на 950 разваливалось на три
   ступеньки, где «Персональная» оказывалась под «Без логотипа». Сетка
   расставляет их по смыслу и держит расстановку на всех ширинах.

   Переключает колонки @container, а не медиазапрос: самая узкая колонка
   расчёта не на телефоне, а на ноутбуке около 950px — замерено 282px внутри
   плиты против 264px на телефоне 390. Ширина окна об этом не знает,
   а плита знает про себя. */
.shop .buy-row{container-type:inline-size; container-name:calc}

/* Умолчание — один столбец. Так же выглядит расчёт в браузере без поддержки
   @container: узкая раскладка ничего не ломает, широкая без сетки — ломает. */
.shop .calc-result__details{display:grid; grid-template-columns:minmax(0,1fr);
  align-items:start}
/* Скрытые ячейки должны исчезать, а не пустовать: у grid-детей собственный
   display перебил бы браузерное [hidden]{display:none}, поэтому правило явное
   и не только для span — подсказка про тираж это button. */
.shop .calc-result__details > [hidden]{display:none}

/* Две колонки включаются с 360px: левой хватает 165px под «Персональная
   скидка 12,5%», правой нужен 181px под «Логотип — посчитаем отдельно»,
   плюс 18px между ними. На 340px длинная оговорка вылезала за край плиты. */
@container calc (min-width:360px){
  .shop .calc-result__details{grid-template-columns:auto minmax(0,1fr)}
  /* Место каждой ячейки задано числом, а не порядком в потоке: срочность
     и подсказка приходят и уходят, и при авторасстановке уход одной утаскивал
     бы за собой соседнюю в чужой столбец. */
  .shop [data-role="calc-personal"]{grid-area:1 / 1}
  .shop [data-role="calc-volume"]{grid-area:2 / 1}
  .shop #calc-rush-row{grid-area:3 / 1}
  .shop [data-role="calc-print-note"]{grid-area:1 / 2}
  .shop .calc-next{grid-area:2 / 2}
  /* Правая колонка прижата к правому краю — под «Итого за товар». Сумма и то,
     что к ней относится, читаются одним столбцом сверху вниз. */
  .shop [data-role="calc-print-note"],
  .shop .calc-next{justify-self:end; text-align:right}
}

/* Обе правые строки переносятся по словам: в узкой колонке (замерено 267px
   на окне 1100) подсказка занимает две строки, и обрезать её нечем. */
.shop .calc-note,
.shop .calc-next{white-space:normal}

/* Подсказка про следующую ступень тиража. Кнопка, а не ссылка: нажатие
   доставляет тираж до ступени. Ширина по тексту, иначе нажималась бы
   вся пустая половина ячейки. */
.shop .calc-next{padding:0; border:0; background:none; text-align:left;
  color:var(--ep-body); font:inherit; font-size:11.5px;
  cursor:pointer; text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px; text-decoration-color:var(--ep-line)}
.shop .calc-next:hover{color:var(--ep-ink)}
/* У товаров с размерной сеткой нажимать некуда — тираж там набирается
   по размерам. Оставляем обычной строкой, а не мёртвой кнопкой. */
.shop .calc-next:disabled{cursor:default; text-decoration:none; color:var(--ep-body)}
.shop .calc-next b{color:var(--ep-ink); font-weight:700;
  font-variant-numeric:tabular-nums}
/* Зелёный включается только там, где больший тираж дешевле целиком. Это
   исправление ошибки в заказе, а не скидка: красный читался бы как акция,
   серый — как сноска, которую можно не читать. */
.shop .calc-next.is-cheaper b{color:var(--ep-green)}

/* Бургер главного меню. Десктоп: кнопка скрыта, обёртка .nav-items прозрачна
   для флекс-раскладки (display:contents). Телефон: пункты складываются в
   вертикальную панель под кнопкой. Порог 860px — тот же, что у остальной
   мобильной раскладки. */
.nav-burger{display:none; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  padding:10px 14px; border-radius:100px; border:1px solid var(--line); background:none; color:var(--body); cursor:pointer}
.nav-items{display:contents}
@media (max-width:860px){
  .nav-burger{display:inline-flex}
  .nav-items{display:none}
  .navrow.nav-open .nav-items{display:flex; flex-direction:column; align-items:stretch; flex-basis:100%; padding:6px 0 4px}
  .navrow.nav-open .nav-items a.item{padding:11px 14px; border-radius:12px}
}

/* Загрузка макета в карточке. Кнопка — как чип места, а не как системный
   input[type=file]: тот тянет за собой «файл не выбран» на языке системы. */
.lp-upload-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.lp-upload{display:inline-flex; align-items:center; gap:8px; padding:9px 14px;
  border:1px dashed var(--line); border-radius:100px; font-size:13.5px; font-weight:600;
  color:var(--body); cursor:pointer; background:var(--card)}
.lp-upload:hover{border-color:var(--red); color:var(--red)}
.lp-upload-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 8px 8px 14px;
  background:var(--tint); border-radius:100px; font-size:13px; font-weight:600; color:var(--body)}
.lp-upload-chip button{border:0; background:none; font-size:16px; line-height:1;
  color:var(--meta); cursor:pointer; padding:2px 6px}
.lp-upload-chip button:hover{color:var(--red)}
.lp-upload-hint{font-size:12px; color:var(--meta)}
.lp-upload-hint.is-error{color:var(--red)}