/* ============================================================
   3DGamBiT.ru — «БУМАГА ЦЕХА»

   Новый вид сайта: тёплая бумага, оранжевый филамент, печатный
   рельеф вместо неонового свечения. Собран по макету `design/`
   (там он жил отдельной страницей).

   ПОДКЛЮЧАЕТСЯ ПОСЛЕ css/style.css и НИЧЕГО НЕ ЛОМАЕТ:
   разметка, классы и вся логика сайта остаются прежними — панель,
   магазин, работы, корзина, окна и проверки продолжают работать.
   Здесь только внешность: краски, тени, шрифтовые акценты.

   Правило перекраски: старые имена переменных (--cyan, --violet,
   --magenta) НЕ удалены, а переопределены на тёплую палитру. Поэтому
   любая разметка, которую строит скрипт (карточки товаров, работы,
   корзина), получает новый цвет сама, без правок в js.
   ============================================================ */

/* ---------- 1. ПАЛИТРА ---------- */
:root{
  /* бумага цеха */
  --bg:#f4f1ea;
  --bg-2:#efe9dd;
  --bg-1:#efeade;
  --bg-3:#e9e3d6;
  --surface:#fffdf8;
  --surface-2:#f8f3ea;
  /* чернила */
  --ink:#1b1713;
  --ink-2:#4b443b;
  --ink-3:#7c7468;
  --mute:#7c7468;
  /* филамент */
  --acc:#ff6a1a;
  --acc-2:#ff8f45;
  --acc-3:#ffb37a;
  --acc-soft:#ffe9d9;
  --acc-deep:#c24405;
  /* графит */
  --graph:#221d18;
  --line:rgba(27,23,19,.13);
  --line-2:rgba(27,23,19,.07);
  --line-strong:rgba(27,23,19,.22);

  /* старые имена — на тёплое */
  --cyan:var(--acc);
  --violet:var(--acc-deep);
  --magenta:var(--acc-2);
  --lime:#7f9a6b;

  --glow-cyan:none;
  --glow-violet:none;

  /* тени: вместо чёрного свечения — тёплая тень на бумаге */
  --sh-card:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(27,23,19,.09),
    0 4px 0 rgba(27,23,19,.05),
    0 22px 40px -26px rgba(70,50,25,.55);
  --sh-card-hover:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(255,106,26,.22),
    0 6px 0 rgba(255,106,26,.16),
    0 34px 54px -28px rgba(70,50,25,.6);
  --sh-block:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -3px 0 rgba(150,52,0,.30),
    0 5px 0 #c04505,
    0 14px 24px -10px rgba(255,106,26,.62);
  --sh-paper:
    inset 0 1px 0 #fff,
    inset 0 -3px 0 rgba(120,105,85,.16),
    inset 0 0 0 1px rgba(27,23,19,.10),
    0 5px 0 #ded5c4,
    0 14px 24px -12px rgba(80,60,30,.4);

  --r:22px;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --spring:cubic-bezier(.34,1.46,.64,1);

  /* цвет цены в магазине: скрипт ставит свой, если владелец выбрал */
  --shop-price:var(--acc-deep);
}

/* ---------- 2. ОСНОВА ---------- */
/* `color-scheme: light` — не украшение. Сайт светлый, и без этой строки
   БРАУЗЕРНЫЕ органы управления остаются тёмными: полоса бегунка объёма в
   калькуляторе рисовалась угольно-чёрной, а не «светлой канавкой», и на
   бумаге читалась вырезанной щелью. Заодно светлыми становятся стрелка
   выпадающего списка, полосы прокрутки и календарь — всё, что рисует не
   оформление, а сам браузер. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
body{
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  background-image:
    radial-gradient(900px 640px at 82% -6%,rgba(255,140,60,.16),transparent 62%),
    radial-gradient(700px 520px at 2% 8%,rgba(255,190,120,.13),transparent 66%),
    linear-gradient(180deg,#f7f4ee 0%,#f2eee6 46%,#efe9dd 100%);
  background-attachment:fixed;
}
body.no-scroll,body.cart-open{overflow:hidden}

::selection{background:rgba(255,106,26,.24);color:#2a1200}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#eee7da}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--acc-2),var(--acc-deep));
  border-radius:10px;border:2px solid #eee7da;
}

/* неоновые пятна и свечение курсора на бумаге не читаются — убираем */
.ambient,.cursor-glow,.scanline,.progress{display:none}

/* ---------- 3. ФАКТУРА: зерно бумаги и нить филамента ---------- */
.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7'/><feColorMatrix type='saturate' values='0'/></filter><rect width='420' height='420' filter='url(%23g)' opacity='0.5'/></svg>");
  background-size:260px 260px;
}
/* Нить — указатель прочитанного: тянется сверху вниз по левому краю.
   Позицию считает js/theme.js (высота .filament-line и .filament-tip). */
.filament{position:fixed;left:16px;top:0;bottom:0;width:2px;z-index:20;pointer-events:none}
.filament-rail{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(27,23,19,.10) 12%,rgba(27,23,19,.10) 88%,transparent);
}
.filament-line{
  position:absolute;left:0;top:0;width:2px;height:0;
  background:linear-gradient(180deg,rgba(255,106,26,0),var(--acc) 30%,var(--acc-deep));
  box-shadow:0 0 10px rgba(255,106,26,.55);border-radius:2px;
}
.filament-tip{
  position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:radial-gradient(circle,#fff3e6,#ff8f45 45%,rgba(255,106,26,0) 72%);
  box-shadow:0 0 14px 3px rgba(255,106,26,.45);
}

/* ---------- 4. ПЕЧАТНЫЙ РЕЛЬЕФ БУКВ ----------
   Слои пластика по лицевой грани + выдавленный бок. Приём из макета:
   цепочка drop-shadow в em, поэтому рельеф масштабируется вместе с кеглем. */
.p3d,.hero h1 .line > span{
  display:inline-block;color:transparent;
  background-image:
    repeating-linear-gradient(180deg,rgba(255,255,255,.13) 0 1px,rgba(0,0,0,.14) 1px 2px,transparent 2px 4px),
    linear-gradient(176deg,#3b342b 0%,#241f1a 46%,#141110 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:
    drop-shadow(0 .012em 0 #b0a696) drop-shadow(0 .012em 0 #a59b8b) drop-shadow(0 .012em 0 #998f80)
    drop-shadow(0 .012em 0 #8d8374) drop-shadow(0 .012em 0 #817768) drop-shadow(0 .012em 0 #756b5d)
    drop-shadow(0 .012em 0 #695f52) drop-shadow(0 .07em .05em rgba(60,42,20,.15));
}
.p3d-o,.hero h1 .line > span.grad,.sec-head h2 .grad{
  display:inline-block;color:transparent;
  background-image:
    repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 1px,rgba(120,40,0,.13) 1px 2px,transparent 2px 4px),
    linear-gradient(176deg,#ffa869 0%,#ff7420 44%,#ef5606 100%);
  -webkit-background-clip:text;background-clip:text;
  background-size:auto;
  filter:
    drop-shadow(0 .012em 0 #ff9f5e) drop-shadow(0 .012em 0 #fa8f4c) drop-shadow(0 .012em 0 #f0803c)
    drop-shadow(0 .012em 0 #e57230) drop-shadow(0 .012em 0 #d86426) drop-shadow(0 .012em 0 #c9571d)
    drop-shadow(0 .012em 0 #b84a14) drop-shadow(0 .07em .05em rgba(190,60,0,.18));
}
/* Пляшущий градиент старого акцента гасим у заголовков разделов, но у
   ПЕРВОЙ СТРОКИ первого экрана анимация нужна своя — въезд снизу.
   Раньше здесь стояло общее `animation:none`, и средняя строка hero
   оставалась с opacity:0 из базового правила: буквы есть, а не видно. */
.sec-head h2 .grad,.p3d-o{animation:none}
.hero h1 .line > span.grad{animation:riseUp 1.05s var(--ease) forwards;animation-delay:.3s}

/* ---------- ШРИФТ ЗАГОЛОВКОВ РАЗДЕЛОВ: РЕЛЬЕФ ----------

   Владелец (29.10) обвёл пять заголовков и попросил «добавь Manrope туда».
   Замер движком показал: заголовки УЖЕ набраны Manrope (все 64, системного
   шрифта нет ни у одного). Видимая разница — в отрисовке: у первого экрана
   буквы с выдавленным боком, у заголовков разделов ровная заливка.

   Настройка (`sections.font` в панели, раздел «Заголовки секций») включает
   тот же рельеф заголовкам разделов. Сделан он цепочкой `text-shadow`, а не
   заливкой по буквам, как `.p3d`: заливка требует обёртки вокруг обычной
   части заголовка, а панель пишет её ПЕРВЫМ ТЕКСТОВЫМ УЗЛОМ — обёртка
   сломала бы правку заголовка из панели. Тени дают тот же бок и ничего не
   ломают.

   Цветной части тени отключаем: у неё свой рельеф заливкой, и серые тени
   легли бы поверх оранжевого грязью. */
[data-h2-font="relief"] .sec-head h2{
  text-shadow:
    0 .012em 0 #b0a696, 0 .024em 0 #a59b8b, 0 .036em 0 #998f80,
    0 .048em 0 #8d8374, 0 .060em 0 #817768, 0 .072em 0 #756b5d,
    0 .100em .06em rgba(60,42,20,.20);
}
[data-h2-font="relief"] .sec-head h2 .grad{text-shadow:none}
.p3d-on{
  display:inline-block;color:transparent;
  background-image:
    repeating-linear-gradient(180deg,rgba(255,255,255,.20) 0 1px,rgba(0,0,0,.16) 1px 2px,transparent 2px 4px),
    linear-gradient(176deg,#fffaf1 0%,#efe4d1 55%,#ddcfb7 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:
    drop-shadow(0 .012em 0 #6b6055) drop-shadow(0 .012em 0 #61564c) drop-shadow(0 .012em 0 #574d43)
    drop-shadow(0 .012em 0 #4d443b) drop-shadow(0 .012em 0 #443b33) drop-shadow(0 .012em 0 #3b332c)
    drop-shadow(0 .012em 0 #332c25) drop-shadow(0 .07em .06em rgba(0,0,0,.32));
}

/* ---------- 5. ШАПКА ---------- */
.nav.solid{
  background:rgba(247,244,238,.84);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line-2);
  box-shadow:0 10px 30px -24px rgba(60,45,25,.55);
}
.nav-in{height:84px}

.logo .mark{
  width:42px;height:42px;border-radius:50%;
  background:none;border:0;
  box-shadow:0 6px 14px -6px rgba(60,45,25,.7),0 0 0 1px rgba(27,23,19,.06);
  animation:none;
  transition:transform .5s var(--spring);
  overflow:hidden;
}
.logo:hover .mark{transform:rotate(-12deg) scale(1.06)}
.logo .mark img{width:100%;height:100%;border-radius:50%;display:block}
.logo .mark svg{width:20px;height:20px;stroke:var(--acc-deep)}
.logo b{
  background:none;color:var(--ink);
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  font-size:19px;letter-spacing:-.02em;
}
.logo b span{color:var(--acc);text-shadow:none}

/* ---------- 5.1 ЛОГОТИП: МОНЕТА-КАТОК ----------
   Монета едет по буквам и придавливает их, возвращается, переворачиваясь
   другой стороной, потом головка хотенда печатает буквы заново, а под ними
   появляется «КАЧЕСТВЕННАЯ ПЕЧАТЬ». После сцены монета крутится от прокрутки.

   Всю разметку собирает js/theme.js из прежнего `.logo` (знак + <b>3DGamBiT</b>).
   Если скрипт не отработал — остаётся обычный логотип, как раньше: шапку
   сервер вырезает из index.html и ставит на опубликованные страницы, где
   этой темы нет вовсе. */
.brand{
  position:relative;display:block;
  width:210px;height:76px;
  margin-block:-6px;
}
.brand-coin{
  position:absolute;left:0;top:12px;width:52px;height:52px;
  transform-style:preserve-3d;will-change:transform;z-index:3;
}
/* Тень — ОТДЕЛЬНЫМ элементом, а не filter на .brand-coin: filter схлопывает
   preserve-3d, и обе грани монеты рисуются плоско — на повороте видно
   зеркальный оборот поверх лица. */
.brand-coin-shadow{
  position:absolute;left:8px;top:56px;width:36px;height:8px;z-index:2;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(60,45,25,.34),rgba(60,45,25,.12) 55%,transparent 78%);
  filter:blur(3px);
}
.bcoin{position:absolute;inset:0;perspective:520px;perspective-origin:50% 50%}
.bcoin-spin{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.bcoin-face{
  position:absolute;inset:0;border-radius:50%;
  backface-visibility:hidden;overflow:hidden;
}
.bcoin-face.is-front{transform:translateZ(var(--bh,2.4px))}
.bcoin-face.is-back{transform:rotateY(180deg) translateZ(var(--bh,2.4px))}
.bcoin-face img{
  display:block;width:100%;height:100%;border-radius:50%;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.bcoin-rim{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.bcoin-rim i{
  position:absolute;left:50%;top:50%;
  width:var(--t,4.8px);height:var(--w,2px);
  margin-left:calc(var(--t,4.8px) / -2);margin-top:calc(var(--w,2px) / -2);
  transform:translate3d(var(--x,0px),var(--y,0px),0) rotateZ(var(--a)) rotateY(90deg);
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.26) 0,
      rgba(255,255,255,.16) calc(var(--p,1.5px) / 2),
      rgba(0,0,0,.26) var(--p,1.5px)),
    linear-gradient(90deg,#3b372f,#6b6456 26%,#a89f8d 50%,#6b6456 74%,#3b372f);
  background-blend-mode:overlay,normal;
}
.logo .brand-word{
  position:absolute;left:64px;top:20px;display:flex;
  font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--ink);text-shadow:none;z-index:1;
}
.logo .brand-word .bl{
  display:inline-block;font-style:normal;transform-origin:50% 100%;
  will-change:transform,opacity;backface-visibility:hidden;
}
.logo .brand-word .bl.acc{color:var(--acc)}
.logo .brand-sub{
  position:absolute;left:65px;top:52px;white-space:nowrap;
  font:600 8px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);text-shadow:none;opacity:0;will-change:transform,opacity;
}
/* Головка стоит в начале координат коробки: положение задаёт только
   transform. С left:64px координата xs[0] считалась дважды, и сопло ехало
   на 50px впереди печатаемой буквы (буквы допечатывались уже за кадром). */
.brand-head{
  position:absolute;left:0;top:0;width:21px;height:28px;
  opacity:0;pointer-events:none;z-index:2;will-change:transform,opacity;
}
.brand-head svg{display:block;width:100%;height:100%}

/* ---------- 5.2 ТА ЖЕ СЦЕНА В ПОДВАЛЕ ----------
   Собирает её тот же код, поэтому размеры живут ЗДЕСЬ: скрипт читает
   ширину монеты и отступ слова (offsetWidth / offsetLeft) и сам
   пересчитывает дорожку катка, гурт, головку и коробку. Ни одного числа
   про логотип в скрипте нет — иначе подвал пришлось бы чинить дважды. */
.foot-in .logo .brand{height:60px;margin-block:-4px}
.foot-in .logo .brand-coin{width:42px;height:42px;top:9px}
.foot-in .logo .brand-coin-shadow{left:6px;top:44px;width:30px;height:7px}
.foot-in .logo .brand-word{left:52px;top:14px;font-size:20px}
.foot-in .logo .brand-sub{left:53px;top:38px;font-size:6.5px;letter-spacing:.18em}
.foot-in .logo .brand-head{width:17px;height:23px}

.nav-links a{color:var(--ink-2);font-weight:600;font-size:.9rem}
.nav-links a::after{
  background:var(--acc);box-shadow:none;height:2px;border-radius:2px;
}
.nav-links a:hover{color:var(--ink);background:rgba(27,23,19,.045)}
/* Пункт, на который смотрит страница. Раньше он подсвечивался голубым
   прямоугольником с белой подписью — на бумаге белое на светлом не видно. */
.nav-links a.active{color:var(--acc-deep);background:var(--acc-soft)}
.nav-links a.active::after{width:52%;background:var(--acc)}
/* выпадающее подменю раздела */
/* Окно подменю собирается из переменных --sub-*: пока владелец не выбрал
   своё окно, работают эти. Краски — бумажные, иначе на светлом фоне
   повисала почти чёрная плашка. */
.nav-links .nav-sub{
  --sub-bg:var(--surface);--sub-bd:var(--line);
  --sub-sh:0 20px 44px -26px rgba(60,45,25,.55);
  --sub-blur:0px;
  background:var(--surface);border-color:var(--line);
  box-shadow:var(--sub-sh);
}
.nav-sub a{color:var(--ink-2)}
.nav-sub a:hover{color:var(--acc-deep);background:var(--acc-soft)}
.nav-caret{color:var(--mute)}

/* кнопки-таблетки в шапке (корзина, кабинет, бонусы) */
.cart-btn,.cab-btn,.bonus-badge{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(27,23,19,.10);
  border-radius:999px;
}
/* Вид свечения выбирает владелец, и базовое правило красит кнопку в белый
   и обводит неоновым ореолом. На бумаге белый текст пропадает — гасим и
   цвет, и ореол, оставляя выбранный оттенок только значку. */
.cart-btn[data-cart-glow]{
  color:var(--ink);border-color:var(--line);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(27,23,19,.10);
}
.cart-btn[data-cart-glow]:hover{
  color:var(--acc-deep);border-color:rgba(255,106,26,.42);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 rgba(255,106,26,.18);
}
.cart-btn[data-cart-glow]:not([data-cart-glow="none"]) svg{color:var(--acc-deep)}
.cart-btn:hover,.cab-btn:hover,.bonus-badge:hover{
  border-color:rgba(255,106,26,.4);color:var(--acc-deep);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 rgba(255,106,26,.18);
}
.cart-btn svg,.cab-btn svg,.bonus-badge svg{stroke:currentColor}

.burger{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 3px 0 rgba(27,23,19,.10);
}

/* Телефонное меню — БУМАЖНОЕ.
   Панель пунктов в style.css красится в `rgba(5,8,15,.97)` — это цвет тёмной
   темы, и на бумаге он оставался единственной чёрной плашкой на сайте.
   Хуже цвета было то, что подписи пунктов бумажная тема уже перекрасила в
   чернила (`--ink-2`): на почти чёрном фоне получались тёмно-серые буквы на
   чёрном — владелец обвёл красным весь список и не смог его прочитать.
   Поэтому здесь меняется не только фон: панель получает бумажную подложку,
   тень-отрыв от страницы и чернильные пункты.

   Стоит ПОСЛЕ `.burger`, но это неважно: селектор `.nav-links` ни с чем не
   спорит — правило панели в style.css лежит в медиазапросе с той же
   границей 890, а файл темы подключается позже. */
@media (max-width:890px){
  .nav-links{
    background:rgba(255,253,248,.985);
    -webkit-backdrop-filter:blur(20px) saturate(1.15);
    backdrop-filter:blur(20px) saturate(1.15);
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 44px -30px rgba(70,50,25,.6);
  }
  .nav-links a{color:var(--ink)}
  .nav-links a:hover{color:var(--acc-deep);background:var(--acc-soft)}
  .nav-links a.active{color:var(--acc-deep);background:var(--acc-soft)}
}

/* ---------- 6. КНОПКИ — ПЕЧАТНЫЙ БРУСОК ---------- */
.btn{
  border:0;border-radius:16px;overflow:hidden;
  height:56px;padding:0 26px;
  font:800 15px/1 'Manrope',system-ui,sans-serif;letter-spacing:.005em;
  transform:translateY(0);
  transition:transform .2s var(--spring),box-shadow .2s var(--ease),background .25s;
  isolation:auto;
}
.btn-sm{height:44px;padding:0 18px;font-size:13.5px;border-radius:12px}
.btn-lg{height:60px;padding:0 30px;font-size:16px;border-radius:18px}

/* блик, пробегающий по пластику */
.btn::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 34%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-130%);transition:transform .7s var(--ease);
  opacity:1;
}
.btn:hover::before{transform:translateX(130%)}
/* поперечные слои печати */
.btn::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.14) 0 1px,rgba(255,255,255,0) 1px 3px);
  opacity:.55;
}

.btn-primary{
  color:#2c1300;
  background:linear-gradient(180deg,#ffa45c 0%,#ff7a28 44%,#f75c0b 100%);
  box-shadow:var(--sh-block);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -3px 0 rgba(150,52,0,.28),
    0 7px 0 #c04505,
    0 20px 30px -12px rgba(255,106,26,.7);
}
.btn-primary:active{
  transform:translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(150,52,0,.4),
    0 1px 0 #c04505,
    0 6px 10px -6px rgba(255,106,26,.5);
}

.btn-ghost{
  color:var(--ink);
  background:linear-gradient(180deg,#fffdf9 0%,#f6f0e6 100%);
  border:0;backdrop-filter:none;
  box-shadow:var(--sh-paper);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#fffdf9 0%,#f8f1e4 100%);
  border-color:transparent;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 0 rgba(120,105,85,.14),
    inset 0 0 0 1px rgba(27,23,19,.12),
    0 7px 0 #ded5c4,
    0 20px 30px -14px rgba(80,60,30,.45);
}
.btn-ghost:active{
  transform:translateY(4px);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(27,23,19,.12),
    0 1px 0 #ded5c4,
    0 6px 10px -6px rgba(80,60,30,.3);
}

/* ---------- 7. ПЕРВЫЙ ЭКРАН ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:136px;padding-bottom:64px;
  min-height:calc(100vh - 84px);
}
/* свет и разметка стола: тёплое пятно справа, сетка, слои печати по низу */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 760px at 82% -6%,rgba(255,150,70,.30),rgba(255,170,100,.10) 44%,transparent 68%),
    radial-gradient(520px 520px at -8% 38%,rgba(255,190,130,.24),transparent 66%);
  filter:blur(6px);
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(27,23,19,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,23,19,.055) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(72% 62% at 62% 40%,#000 8%,transparent 76%);
  -webkit-mask-image:radial-gradient(72% 62% at 62% 40%,#000 8%,transparent 76%);
  opacity:.5;
}
/* старый неоновый каркас и бегущая полоса-сканер больше не нужны:
   первый экран теперь показывает монету (разметка в index.html) */
#stage{display:none}

.hero-in{grid-template-columns:1.14fr .86fr;gap:40px;align-items:center;z-index:3}
.hero h1{
  /* Кегль подобран замером, а не на глаз: строка «моделей и прототипов»
     длиннее, чем строки макета, и при 78 точках ломалась на две — заголовок
     переставал читаться как три печатные строки. При 60 она влезает в
     колонку целиком (замер: 640 из 667). */
  font-size:clamp(38px,4.15vw,60px);
  line-height:.98;letter-spacing:-.04em;font-weight:800;
  margin:22px 0 0;
}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.12em;padding-top:.03em}
.hero h1 .line > span{display:block;letter-spacing:-.04em}
/* ТРЕТЬЯ СТРОКА ПЕРВОГО ЭКРАНА — С ПРЕЖНИМ РЕЛЬЕФОМ.
   Владелец (29.10, снимок): «верни сюда прежний шрифт как был». До этой
   правки у строки стоял сброс рельефа (заливка-градиент, полосы и цепочка
   теней снимались), и «без компромиссов» рисовалась ровной плоской заливкой:
   рядом с двумя рельефными строками она читалась как ДРУГОЙ, более тонкий
   шрифт. Гарнитура при этом не менялась — Manrope 800 везде; менялся только
   приём отрисовки.
   Сброс снят: строка снова получает `.p3d` из общего правила выше — тот же
   пластик и тот же выдавленный бок, что у первой строки. Движение (`riseUp`)
   живёт в `animation` и правкой не затрагивается. */

.hero .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  height:36px;padding:0 16px;margin-bottom:30px;
  border-radius:999px;background:var(--surface);
  border:0;
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.10),0 4px 0 rgba(27,23,19,.06),0 10px 18px -12px rgba(60,45,25,.5);
  font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc-deep);
}
.hero .eyebrow::before{
  width:7px;height:7px;background:var(--acc);box-shadow:none;
  animation:pulseDot 2.6s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(255,106,26,.5)}
  70%{box-shadow:0 0 0 9px rgba(255,106,26,0)}
  100%{box-shadow:0 0 0 0 rgba(255,106,26,0)}
}

.hero .lead{
  margin-top:26px;max-width:47ch;
  color:var(--ink-2);font-size:16.5px;line-height:1.72;font-weight:400;
}
.hero-cta{display:flex;gap:14px;margin:34px 0 0;flex-wrap:wrap}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,auto);gap:0 34px;
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line);
}
.hstat b{
  display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  background:none;color:var(--ink);-webkit-text-fill-color:currentColor;
  white-space:nowrap;
}
.hstat small{
  display:block;margin-top:7px;
  color:var(--mute);font:500 11px/1.3 var(--f-mono);
  letter-spacing:.13em;text-transform:uppercase;
}

/* правая колонка: монета + плашки характеристик под ней */
.hero-visual{
  position:relative;height:auto;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding-top:6px;
}
#floatCards{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  width:100%;max-width:430px;
}
.float-card{
  position:static;padding:10px 13px;border-radius:12px;
  background:var(--surface);border:0;backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.09),0 3px 0 rgba(27,23,19,.05);
  animation:none;
  transform:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.float-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,106,26,.24),0 4px 0 rgba(255,106,26,.14)}
.float-card .k{
  font:600 9px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
}
.float-card .v{font-size:14px;font-weight:800;letter-spacing:-.01em;margin-top:5px;color:var(--ink)}
.float-card .v em{font-style:normal;color:var(--acc-deep);text-shadow:none}

/* ---------- 7б. ОБЛАКО ПЛАШЕК ----------

   Владелец (снимок #13): «надо переделать чтобы там было облако и они
   летали по облаку двигались с моушен эффектом в 3д красиво и
   анимированно как карты и в админ панели чтобы это мог настраивать и
   редактировать там все».

   Было: две колонки под монетой, ровно и плоско. Стало: кольцо вокруг
   монеты в 3D — дальние плашки меньше, ближние крупнее, кольцо плывёт
   или облетает фигуру, и всё облако поворачивается за курсором. Место
   каждой плашки считает js/main.js (startCloud), здесь только материал
   и 3D-контейнер.

   ТРИ ЗАПРЕТА, БЕЗ КОТОРЫХ ОБЛАКО СТАНОВИТСЯ НАКЛЕЙКОЙ.
   Любой filter, backdrop-filter, opacity<1, mask, clip-path или
   mix-blend-mode ВНУТРИ ветки preserve-3d схлопывает её в плоскую
   картинку. У .float-card из style.css стоял backdrop-filter:blur(14px)
   — он бы всё и убил. Поэтому карточка в облаке: ни размытия, ни
   прозрачности, только transform и box-shadow. Тот же запрет записан
   рядом с движком. (Навык css3d-flattens-on-effect-properties.)

   ПОЧЕМУ absolute, А НЕ grid. В облаке плашки не занимают места в
   колонке: они висят ВОКРУГ монеты, и высоту первого экрана по-прежнему
   задаёт монета. Иначе кольцо раздвинуло бы колонку и увезло монету
   вверх. */
#floatCards.is-cloud{
  /* ОБЛАКО ЖИВЁТ ПОД МОНЕТОЙ, А НЕ ВОКРУГ НЕЁ.
     Владелец (29.10, снимок): «под монетой надо сделать облако из этих
     плашек». Прежде контейнер был растянут на ВСЮ колонку (inset:0), и
     кольцо плашек ложилось на лицо монеты. Теперь это обычный блок в
     потоке — колонка выросла на его высоту, монета осталась сверху
     нетронутой, а облако заняло свою полосу под ней. */
  position:relative;
  display:block;width:100%;max-width:none;
  height:clamp(168px,21vh,224px);
  margin-top:2px;
  perspective:1200px;perspective-origin:50% 50%;
  /* Плашки декоративны, а под ними — монета, которую владелец просил
     тянуть мышью. Пропускаем курсор насквозь, иначе облако заберёт
     перетаскивание себе. */
  pointer-events:none;
  z-index:3;
}
#floatCards.is-cloud .cloud-deck{
  position:absolute;left:50%;top:50%;
  width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform;
}
#floatCards.is-cloud .float-card{
  position:absolute;left:0;top:0;
  width:138px;padding:10px 12px;border-radius:11px;
  background:var(--surface);border:0;
  /* Тень чуть глубже сеточной: плашка висит в воздухе, а не лежит на
     листе. */
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.10),0 16px 32px -18px rgba(58,40,18,.55);
  backdrop-filter:none;
  animation:none;transition:none;
  transform-style:preserve-3d;
  will-change:transform;
  pointer-events:none;
}
#floatCards.is-cloud .float-card .k{
  font:600 8.5px/1.2 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);
}
#floatCards.is-cloud .float-card .v{
  font-size:13px;font-weight:800;letter-spacing:-.01em;margin-top:4px;color:var(--ink);
}
#floatCards.is-cloud .float-card .v em{color:var(--acc-deep)}


/* ---------- 8. МОНЕТА ----------
   Настоящее фото на цилиндре: две грани и гурт из полос.
   Крутится сама, тянется мышью, доводится по инерции (js/theme.js).

   ВАЖНО: не вешать filter на .coin-rim — он схлопывает preserve-3d,
   и гурт превращается в плоский эллипс. */
.hero-coin{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;
}
.coin-halo{
  position:absolute;width:92%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,140,60,.30),rgba(255,160,90,.10) 42%,transparent 66%);
  filter:blur(30px);animation:coinBreath 9s ease-in-out infinite;
}
@keyframes coinBreath{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.coin-bed{
  position:absolute;bottom:9%;left:50%;width:72%;aspect-ratio:1/.34;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(27,23,19,.12) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(180deg,rgba(27,23,19,.12) 0 1px,transparent 1px 18px);
  mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);
  animation:bedPulse 9s ease-in-out infinite;
}
@keyframes bedPulse{0%,100%{opacity:.34;transform:translateX(-50%) scale(1)}50%{opacity:.6;transform:translateX(-50%) scale(1.03)}}

.coin-stage{
  position:relative;width:min(100%,380px);aspect-ratio:1;
  perspective:1500px;perspective-origin:50% 46%;
  cursor:grab;z-index:1;touch-action:pan-y;
  animation:coinIn 1.25s cubic-bezier(.2,.8,.2,1) .1s both;
}
.coin-stage:active{cursor:grabbing}
.coin-stage:focus-visible{outline:2px solid var(--acc);outline-offset:18px;border-radius:50%}
@keyframes coinIn{
  0%{opacity:0;transform:translateY(30px) scale(.86) rotate(-7deg)}
  100%{opacity:1;transform:none}
}
.coin-shadow{
  position:absolute;left:9%;right:9%;bottom:-8%;height:11%;z-index:0;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(70,48,24,.46),rgba(70,48,24,.18) 46%,transparent 74%);
  filter:blur(13px);
}
.coin-tilt,.coin-spin{position:absolute;inset:0;transform-style:preserve-3d}
.coin-tilt{will-change:transform}
.coin-spin{
  will-change:transform;
  /* Тёмный диск В ТОЛЩЕ монеты.
     Между внутренним краем полоски гурта и краем грани остаётся щель тоньше
     пикселя, и в неё просвечивал фон страницы — владелец видел это как
     белую тень на ребре (обвёл красным). Диск лежит в плоскости z=0: снаружи
     его не видно (грани ближе к зрителю), а щель он закрывает. */
  background:#565045;border-radius:50%;
}
.coin-face{
  position:absolute;inset:0;border-radius:50%;
  transform-style:preserve-3d;backface-visibility:hidden;
}
.coin-face.is-front{transform:translateZ(var(--half,20px))}
.coin-face.is-back{transform:rotateY(180deg) translateZ(var(--half,20px))}
.coin-face img{
  position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;
  filter:brightness(1.05) contrast(1.02);
}
.coin-shade,.coin-sheen,.coin-metal{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
}
/* Тень на грани — ТЁПЛАЯ И СЛАБАЯ. Было `#181310` (почти чёрный) с долей до
   0,26: на повороте этот слой ложится ПОВЕРХ металла (он последний в
   разметке) и уводил всю грань в чёрно-коричневое пятно. Собственной
   краски у тени теперь почти нет — она только сгущает тон, а не красит. */
.coin-shade{background:#3a3126}
/* Металл грани — то, что видит зритель, когда грань почти отвернулась: снимок
   на таком угле сжимается в полоску и рассыпается в кашу. Слой непрозрачный,
   он и прячет снимок, и даёт «полированный торец».

   Полосок здесь БОЛЬШЕ НЕТ. Прежняя гребёнка 0,7 / 1,3 / 2,6 px при экране 1×
   давала муар: линии тоньше пикселя складывались в диагональную сетку — та
   самая «расчёска», которую владелец обвёл красным на повороте. Металл на
   этом угле должен читаться гладкой заливкой, а не штриховкой.

   И СВЕТЛОГО ЯДРА ЗДЕСЬ ТОЖЕ НЕТ. Стояла своя рампа с почти белым ядром —
   `#cdc6b6 42%`, `#e4dccb 50%`, `#c6bead 59%`. На повороте грань сжимается в
   полоску 25–30 px, и это ядро занимало в ней половину: у торца вставала
   СВЕТЛАЯ полоса во всю высоту монеты — владелец обвёл её красным с ОБЕИХ
   сторон (28.10). Замер `_probe-coin-layers.js` при 85°: спрятать
   `.coin-metal` — и самая светлая колонка падает 164 → 110, а колонок
   светлее 150 не остаётся ни одной. Значит, полосу рисовал именно он.

   Теперь металл грани и металл гурта — ОДНА краска (та же рампа, что у
   `.coin-rim i`): грань на повороте уходит в тон торца, и кромка читается
   одной полированной полосой металла, без «белой каймы».

   НО ТЁМНАЯ СТОРОНА ОСТАЛАСЬ (29.10). Владелец: «на монете при повороте на
   определенном развороте темная сторона, надо это исправить так не должно
   быть». Замер `_probe-coin-dark.js`: средняя яркость монеты падала
   88,7 → 63,6, и виновата именно эта полоска — она сжимается в 20–35 px, а
   по её краям стояли `#332f28` (яркость 47). На такой ширине светлое ядро
   занимает 1–2 px, то есть НЕ ВИДНО, и зритель видит только два тёмных
   края — плоское бурое пятно рядом с более светлым гуртом.
   Прежняя ошибка была обратной (почти белое ядро `#e4dccb` = 224 давало
   белую полосу), поэтому теперь берётся СЕРЕДИНА: края 83, ядро 122 — в тон
   гурту, и тёмная зона сжата до внешних 8 %, где она читается контуром,
   а не заливкой. Краска — НЕЙТРАЛЬНАЯ, без бронзового уклона: снимок монеты
   серебряный, и тёплый металл спорил с ним цветом. */
.coin-metal{
  background:
    linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 24%,rgba(0,0,0,.03) 60%,rgba(0,0,0,.12) 100%),
    /* ТЁМНАЯ ПЛИТА ВМЕСТО ГРАНИ (29.10, вечер, третий заход). Владелец снова
       обвёл красным тёмную сторону на повороте. Замер `_b17-coin3.js` в его
       условиях (окно 1080, экран 1×): у ребра слева стояла ровная серая
       плита 92…110 без единой светлой полосы, а гурт рядом — 110…155. Глаз
       читает это не как «грань отвернулась», а как тёмную наклейку сбоку.
       Причина — рампа этого слоя была на 20–25 темнее рампы гурта
       (`#56534d`=83 против `#6b665b`=103), хотя по замыслу это ОДИН металл.
       Теперь краски буквально те же, что у `.coin-rim i`: грань на повороте
       уходит в тон торца, и тёмной плиты не остаётся. */
    linear-gradient(90deg,#767166 0%,#7c766a 8%,#847e71 15%,#8a8374 26%,#8f8a7b 50%,#8a8374 74%,#847e71 85%,#7c766a 92%,#767166 100%);
}
.coin-sheen{
  background:linear-gradient(105deg,transparent 30%,rgba(255,250,240,.42) 45%,rgba(255,250,240,.72) 50%,rgba(255,250,240,.28) 56%,transparent 72%);
  mix-blend-mode:screen;
}
.coin-rim{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.coin-rim i{
  position:absolute;left:50%;top:50%;
  width:var(--t,46px);height:var(--w,9px);
  margin-left:calc(var(--t,46px) / -2);margin-top:calc(var(--w,9px) / -2);
  transform:translate3d(var(--x,0px),var(--y,0px),0) rotateZ(var(--a)) rotateY(90deg);
  /* Гурт с насечкой. Канавка = тень в дне, подъём, блик на ребре, снова тень:
     за счёт этого она читается ГЛУБОКОЙ, а не просто полосатой.

     ШАГ КАНАВКИ — ШАГ ПОЛОСКИ (--p), а НЕ --w / 2. Полоска намеренно шире
     шага на 8 % (нахлёст, иначе между полосами просвечивает фон). При
     периоде --w/2 фаза узора на каждом стыке прыгала на 0,85 периода — по
     кругу шли 180 НЕРЕГУЛЯРНЫХ полос, и на ребре это читалось «расчёской»
     из случайных линий (владелец обвёл её красным). Теперь на полоску ровно
     один период, стык ПРОДОЛЖАЕТ узор, а насечек по кругу 180 — как у
     настоящей монеты. Контраст мягче: при 1× полосы в 1,5 px всё равно
     слипались в грязные пятна, металл должен читаться заливкой, а не зеброй. */
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.13) 0,
      rgba(0,0,0,.20) calc(var(--p,7px) * .13),
      rgba(0,0,0,.07) calc(var(--p,7px) * .25),
      rgba(255,255,255,.11) calc(var(--p,7px) * .35),
      rgba(255,255,255,.02) calc(var(--p,7px) * .45),
      rgba(0,0,0,.02) calc(var(--p,7px) * .52),
      rgba(0,0,0,.13) var(--p,7px)),
    /* Толщина. Блика в СЕРЕДИНЕ больше нет: прежний #c3baa8 при взгляде на
       ребро складывался в белую полосу во всю высоту монеты (владелец обвёл
       её красным). Теперь это ровный металл — тёмные края, чуть светлее к
       середине, но без «лампы»: свет даёт насечка, а не заливка.

       ТЁМНЫХ СТОРОН БОЛЬШЕ НЕТ (29.10, второй заход). Владелец обвёл
       красным левый и правый края ребра на двух снимках — «убери их, там не
       должно быть такого тёмного». Замер `_b16-coin.js` при 84° (1×): ребро
       шло 52…74, а металл грани рядом — 84…109, то есть торец читался
       чёрной каймой рядом со светлой гранью. Причина — не тень скрипта, а
       сама рампа: по её краям стояли `#4e4a43` (яркость 74), и это ДО
       затемнения `--k`, которое на крайних полосках (φ=0 и 180°) снимало
       ещё 16 %. Вместе получалось 62, а с канавкой — 52.
       Теперь края 103, ядро 131, а `--k` на крайних полосках почти не
       темнит (см. `place()` в js/theme.js). Ребро держится в 82…124 — в тон
       грани, и тёмной каймы по силуэту не остаётся. */
    linear-gradient(90deg,#767166 0%,#7c766a 10%,#847e71 26%,#8a8374 40%,#8f8a7b 50%,#8a8374 60%,#847e71 74%,#7c766a 90%,#767166 100%);
  /* overlay, а не обычное наложение: у тёмных краёв толщины блик не
     «выбеливает» металл, и цилиндр не превращается в плоскую ленту. */
  background-blend-mode:overlay,normal;
  /* Свет сверху: у полоски своя доля затемнения (--k), край перестаёт быть
     плоской доской и читается цилиндром. */
  box-shadow:inset 0 0 0 80px rgba(0,0,0,var(--k,0));
}
.coin-hint{
  position:relative;z-index:2;margin-top:14px;display:flex;align-items:center;gap:9px;
  font:600 10.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
/* Подпись правится в панели («Главный экран» → «Подпись под монетой»).
   Владелец может стереть её совсем — тогда строку прячем ЦЕЛИКОМ вместе с
   точкой-маркером: одинокая пульсирующая точка без текста читалась бы как
   поломка. `:empty` — по пустому месту подписи, а не по классу: так правило
   работает и без скрипта. */
.coin-hint:has([data-coin-hint]:empty){display:none}
.hint-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulseDot 3s infinite}

/* ---------- 9. БЕГУЩАЯ СТРОКА ---------- */
.marquee{
  overflow:hidden;padding:18px 0;border-block:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,253,248,.7),rgba(246,240,230,.9));
  position:relative;
}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,#f6f2ea,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#f6f2ea,transparent)}
.marquee-track span{
  font:800 clamp(20px,2.6vw,36px)/1 'Manrope',system-ui,sans-serif;
  letter-spacing:.05em;color:transparent;-webkit-text-stroke:1px rgba(27,23,19,.42);
  white-space:nowrap;
}
.marquee-track span:nth-child(4n+1){color:var(--acc);-webkit-text-stroke:0;opacity:.9}

/* ---------- 10. ЗАГОЛОВКИ РАЗДЕЛОВ ---------- */
.sec-head{max-width:820px;margin-bottom:clamp(34px,4.4vw,56px)}
.sec-head .eyebrow{
  display:flex;align-items:center;gap:12px;
  padding:0;margin-bottom:20px;border:0;border-radius:0;background:none;box-shadow:none;
  font:600 11px/1 var(--f-mono);letter-spacing:.34em;text-transform:uppercase;
  color:var(--acc-deep);
}
.sec-head .eyebrow::before{
  content:'';width:26px;height:1px;border-radius:0;
  background:var(--acc);opacity:.8;box-shadow:none;animation:none;
}
.sec-head h2{
  color:var(--ink);
  font-weight:800;letter-spacing:-.028em;line-height:1.08;
}
.sec-head .lead{color:var(--mute);font-size:15.5px;line-height:1.7;font-weight:400;max-width:52ch}
h2{letter-spacing:-.028em;font-weight:800}

/* тёмная полоса — ритм: два раздела на бумаге темнее */
#works,#prices,#reviews{
  background:linear-gradient(180deg,rgba(233,227,214,.55),rgba(236,230,217,.9));
  border-block:1px solid var(--line-2);
}

/* ---------- 11. КАРТОЧКИ УСЛУГ ---------- */
.card{
  position:relative;padding:34px 30px 28px;border-radius:var(--r);border:0;
  background:linear-gradient(168deg,var(--surface) 0%,#faf5ec 62%,#f4eee3 100%);
  box-shadow:var(--sh-card);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  transform-style:flat;
  overflow:hidden;
}
/* кромка филамента по левому краю */
.card::before{
  content:'';position:absolute;left:0;top:26px;bottom:26px;width:4px;border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg,var(--acc) 0 2px,rgba(27,23,19,.22) 2px 5px);
  opacity:.55;mix-blend-mode:normal;z-index:0;inset:auto auto 26px 0;
}
.card::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;padding:0;opacity:0;
  background:radial-gradient(400px 260px at var(--mx,50%) var(--my,0%),rgba(255,140,60,.16),transparent 70%);
  -webkit-mask:none;mask:none;animation:none;
  transition:opacity .4s;
}
.card:hover{
  transform:translateY(-7px);border-color:transparent;
  box-shadow:var(--sh-card-hover);
}
.card:hover::after{opacity:1}
.card .ico{
  width:52px;height:52px;border-radius:14px;margin-bottom:24px;
  background:var(--acc-soft);border:0;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.22),0 3px 0 rgba(27,23,19,.06);
  transition:transform .5s var(--ease),box-shadow .5s;
}
.card:hover .ico{
  transform:translateY(-3px) rotate(-5deg) scale(1.05);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.34),0 5px 0 rgba(255,106,26,.16);
}
.card .ico svg{
  stroke:var(--acc-deep);filter:none;
}
.card .tag{
  display:inline-block;margin-bottom:10px;
  font:700 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-deep);
}
.card h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.card p{color:var(--ink-2);font-size:14.5px;font-weight:400;margin:12px 0 0;line-height:1.65}
.card .num{
  position:absolute;top:22px;right:24px;
  font:700 11px/1 var(--f-mono);letter-spacing:.14em;
  color:rgba(27,23,19,.34);
}

/* ---------- 12. ПЛИТКИ «ЧТО ВЫХОДИТ» ---------- */
.bento .b{
  border:0;border-radius:20px;
  background:linear-gradient(168deg,var(--surface) 0%,#faf5ec 62%,#f4eee3 100%);
  box-shadow:var(--sh-card);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.bento .b::before{
  mix-blend-mode:normal;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,140,60,.16),transparent 64%);
}
.bento .b:hover{
  transform:translateY(-7px);border-color:transparent;
  box-shadow:var(--sh-card-hover);
}
.bento .b .bi{
  width:48px;height:48px;border-radius:14px;
  background:var(--acc-soft);border:0;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.22),0 3px 0 rgba(27,23,19,.06);
}
.bento .b:hover .bi{transform:translateY(-3px) rotate(-5deg) scale(1.05);box-shadow:inset 0 0 0 1px rgba(255,106,26,.34),0 5px 0 rgba(255,106,26,.16)}
.bento .b .bi svg{stroke:var(--acc-deep);filter:none}
.bento .b h4{font-size:17px;font-weight:800;letter-spacing:-.015em}
.bento .b p{color:var(--mute);font-size:13.5px;font-weight:400;line-height:1.6}
.bento .b .wm{
  color:transparent;-webkit-text-stroke:1px rgba(27,23,19,.10);
  font:800 5.6rem/0.8 'Manrope',sans-serif;
}
.bento .b:hover .wm{-webkit-text-stroke-color:rgba(255,106,26,.28)}

/* ---------- 13. МАТЕРИАЛЫ ---------- */
.mat{
  border:0;border-radius:18px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.09),0 4px 0 rgba(27,23,19,.05),0 18px 32px -26px rgba(70,50,25,.55);
  transition:transform .45s var(--ease),box-shadow .45s;
}
.mat::after{background:linear-gradient(100deg,transparent,rgba(255,106,26,.10),transparent)}
.mat:hover{
  transform:translateY(-5px);border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.24),0 6px 0 rgba(255,106,26,.12),0 26px 40px -26px rgba(70,50,25,.6);
}
.mat h4{font-size:16px;font-weight:800;letter-spacing:-.01em}
.mat h4 span{
  font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc-deep);margin-top:6px;
}
.mat p{font-size:13px;color:var(--mute);font-weight:400;line-height:1.6}
.mat .bar{height:3px;border-radius:3px;background:#e7dfd0}
.mat .bar i{background:linear-gradient(90deg,var(--acc-2),var(--acc-deep));box-shadow:none}

/* ---------- 14. ПРОЦЕСС ---------- */
.steps::before{
  left:26px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,106,26,.55) 8%,rgba(27,23,19,.14) 92%,transparent);
  opacity:1;
}
.step{border-top:1px solid var(--line);padding:24px 0}
.step:last-child{border-bottom:1px solid var(--line)}
.step .dot{
  width:52px;height:52px;border-radius:14px;
  background:var(--surface);
  border:0;
  font:800 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--acc-deep);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.10),0 3px 0 rgba(27,23,19,.07);
}
.step:hover .dot{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.35),0 5px 0 rgba(255,106,26,.16);
}
.step h3{font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.step p{color:var(--mute);font-size:13.8px;font-weight:400;line-height:1.65;max-width:60ch}
.step .body::after{background:linear-gradient(90deg,var(--line),transparent 70%)}

/* ---------- 15. ОТРАСЛИ ---------- */
.chip{
  border:0;border-radius:12px;
  background:var(--surface);
  color:var(--ink-2);font-size:13.5px;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.09),0 3px 0 rgba(27,23,19,.05);
  transition:transform .35s var(--ease),box-shadow .35s,color .35s;
}
.chip i{width:7px;height:7px;background:var(--acc);box-shadow:none}
.chip:hover{
  transform:translateY(-3px);color:var(--ink);border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.28),0 5px 0 rgba(255,106,26,.14);
}
.chip:hover i{transform:scale(1.5)}

/* ---------- 16. ЦЕНЫ ---------- */
.price-wrap{
  border:0;border-radius:22px;overflow:hidden;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.09),0 4px 0 rgba(27,23,19,.05),0 30px 60px -40px rgba(70,50,25,.6);
}
.price-note{
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(90deg,rgba(255,106,26,.07),rgba(255,180,110,.05));
}
.price-note b{font-size:16px;font-weight:800;color:var(--ink)}
.price-note span{color:var(--mute);font-size:13.5px}
th,td{border-bottom:1px solid var(--line-2);font-size:14px}
th{
  font:700 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);background:#faf5ec;
}
tbody tr:hover{background:rgba(255,106,26,.05);box-shadow:none}
td:first-child{font-weight:700;color:var(--ink)}
td .tech{
  font:600 9.5px/1 var(--f-mono);letter-spacing:.1em;
  color:var(--acc-deep);border:0;background:var(--acc-soft);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.2);
}
td .p{color:var(--acc-deep);text-shadow:none;font-weight:800}
td.muted{color:var(--mute);font-size:13px}
.price-foot{color:var(--mute);font-size:13px;border-top:1px solid var(--line-2)}

/* ---------- 17. ЦИФРЫ «ПОЧЕМУ» ---------- */
.adv-item{padding-left:24px}
.adv-item::before{
  width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--acc),rgba(255,106,26,0));
  box-shadow:none;
}
.adv-item b{
  font:800 2.5rem/1 'Manrope',sans-serif;letter-spacing:-.04em;
  background:none;color:var(--ink);-webkit-text-fill-color:currentColor;
}
.adv-item h4{font-size:15px;font-weight:800;margin:10px 0 6px}
.adv-item p{color:var(--mute);font-size:13.5px;font-weight:400;line-height:1.6}

/* ---------- 18. ВОПРОСЫ ---------- */
.q{
  border:0;border-radius:16px;margin-bottom:10px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.09),0 3px 0 rgba(27,23,19,.05);
  transition:box-shadow .4s;
}
.q[open]{
  border-color:transparent;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.30),0 4px 0 rgba(255,106,26,.14),0 18px 34px -28px rgba(70,50,25,.6);
}
.q summary{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.q summary:hover{color:var(--acc-deep)}
.q summary:focus-visible{outline:2px solid var(--acc);outline-offset:-4px;border-radius:16px}
.q .plus{border:0;background:var(--acc-soft);box-shadow:inset 0 0 0 1px rgba(255,106,26,.22)}
.q .plus::before,.q .plus::after{background:var(--acc-deep);box-shadow:none}
.q[open] .plus{box-shadow:inset 0 0 0 1px rgba(255,106,26,.5)}
.q .ans p{color:var(--ink-2);font-size:14px;font-weight:400;line-height:1.7}

/* ---------- 19. ОТЗЫВЫ ---------- */
.rev-card{
  border:0;border-radius:22px;
  background:linear-gradient(168deg,var(--surface) 0%,#faf5ec 70%,#f4eee3 100%);
  box-shadow:var(--sh-card);
}
/* ОБЪЁМНАЯ КАРТОЧКА НА БУМАГЕ — край из картона, а не из ночи.
   Геометрию (наклон, перелив, толщину) задаёт style.css; здесь только цвет
   края и тени: картон светлее листа, поэтому «плита» под карточкой читается
   как её толщина, а не как грязь под ней. */
.rev[data-rev-card="volume"] .rev-card{
  --rev-edge:#e7ddc9;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(27,23,19,.09),
    0 1px 0 var(--rev-edge),
    0 2px 0 var(--rev-edge),
    0 3px 0 var(--rev-edge),
    0 4px 0 var(--rev-edge),
    0 5px 0 var(--rev-edge),
    0 6px 0 var(--rev-edge),
    0 12px 18px -8px rgba(70,50,25,.22),
    0 30px 46px -26px rgba(70,50,25,.5);
}
/* Блик на бумаге — тёплый, а не белый: белый на кремовом листе выглядит
   как засветка, а тёплый — как перелив фольги. Прозрачность подобрана так,
   чтобы буквы под бликом читались: подпись отзыва — не место для эффекта. */
.rev[data-rev-card="volume"] .rev-card::before{
  background:
    radial-gradient(56% 42% at calc(50% + var(--rev-mx,0) * 46%) calc(50% + var(--rev-my,0) * 46%),
      rgba(255,255,255,.6),rgba(255,255,255,0) 62%),
    linear-gradient(112deg,
      rgba(255,255,255,0) 24%,rgba(255,138,40,.10) 38%,
      rgba(255,255,255,.34) 48%,rgba(255,176,110,.13) 58%,
      rgba(255,255,255,0) 74%);
}
.rev-face{
  background:var(--acc-soft);color:var(--acc-deep);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.25);
  font-weight:800;
}
.rev-stars{color:var(--acc)}
.rev-quote,.rev-text{color:var(--ink-2)}
.rev-name{color:var(--ink)}
.rev-role{color:var(--mute)}
/* Прокрутка отзывов на бумаге: полоса — светлая канавка, бегунок —
   филамент. Тень под бегунком не свечение, а мягкая тень на картоне. */
.rev-rail{
  background:rgba(27,23,19,.13);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.05);
}
.rev-rail-thumb{
  background:linear-gradient(180deg,var(--acc-2) 0%,var(--acc) 55%,var(--acc-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 3px rgba(120,52,0,.28);
}
.rev[data-rev-scrub] .rev-rail-thumb,
.rev-rail:hover .rev-rail-thumb{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 8px rgba(255,106,26,.45);
}
.rev-rail-num{
  background:#fffdf8;color:var(--acc-deep);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.12),0 2px 6px rgba(70,50,25,.16);
}

/* ---------- 19б. ОТЗЫВЫ ИДУТ ПО КРУГУ ----------
   Владелец (29.10, снимок): «отзывы надо переделать чтобы был 3д моушен
   эффект они листались сверху вниз или снизу вверх по кольцу… и варианты
   до 7 штук разные и эффектные были как будто это 3д печать в реальном
   времени».

   Устройство: в 3D-видах кадры стоят ДРУГ НА ДРУГЕ в одной ячейке сетки
   (`grid-area:1/1`). Высота карусели при этом равна самому высокому кадру
   и считается браузером — никаких замеров высоты и никакой «подгонки»,
   из-за которой содержимое вылезало из рамки (навык
   grid-ignores-container-height).

   Место каждого кадра задаёт РАССТОЯНИЕ ДО ТЕКУЩЕГО: `--rev-d` со знаком
   (сверху/снизу) и `--rev-a` без. Числа пишет скрипт — он один знает
   номер текущего кадра. Отсюда и поворот, и глубина, и бледность:
   дальний кадр меньше, повёрнут и бледнее, как на настоящем барабане.

   Полосу карусели держим в прежнем окне с отступом 70 px: соседи
   выглядывают из-за края и обрезаются, а не наезжают на заголовок
   раздела. */
.rev[data-rev-view]:not([data-rev-view="slide"]) .rev-view{
  overflow:hidden;padding:70px 0;
}
.rev[data-rev-view]:not([data-rev-view="slide"]) .rev-track{
  display:grid;
  transform:none;transition:none;
  transform-style:preserve-3d;
}
.rev[data-rev-view]:not([data-rev-view="slide"]) .rev-card{
  grid-area:1/1;
  position:relative;
  transition:transform .66s var(--ease),opacity .5s var(--ease);
  will-change:transform,opacity;
}
/* Дальние кадры (больше двух шагов) у кольца не видны — прячем совсем,
   иначе они ловили бы нажатия и Tab. */
.rev[data-rev-view]:not([data-rev-view="slide"]) .rev-card[data-rev-far="1"]{
  opacity:0;pointer-events:none;
}
/* СОСЕДНИЕ КАДРЫ В 3D-ВИДАХ НЕ ЛОВЯТ НАЖАТИЯ.

   В кольце, стопке и барабане кадры стоят в ОДНОЙ ячейке сетки друг на
   друге. Ближний к зрителю сосед оказывается выше текущего по порядку
   отрисовки — и перехватывал нажатие по кнопке «Показать полностью»: она
   видна, но нажать её нельзя (Playwright: «subtree intercepts pointer
   events»). Курсор и палец должны попадать только в ТЕКУЩИЙ отзыв; всё
   остальное в этих видах — фон. */
.rev[data-rev-view]:not([data-rev-view="slide"]) .rev-card[aria-hidden="true"]{
  pointer-events:none;
}

/* 1. Кольцо сверху вниз: кадры уходят вверх и вниз, поворачиваясь вокруг
   горизонтальной оси. */
.rev[data-rev-view="ring"] .rev-view{perspective:1400px}
/* Края окна растворяются, а не обрезаются ножом: уходящий кадр тает, и
   кольцо читается как глубина, а не как карточка, обрезанная по линейке. */
.rev[data-rev-view="ring"] .rev-view,
.rev[data-rev-view="drum"] .rev-view,
.rev[data-rev-view="stack"] .rev-view,
.rev[data-rev-view="wave"] .rev-view{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.rev[data-rev-view="ring"] .rev-card{
  transform:
    translate3d(0,calc(var(--rev-d,0) * 46%),calc(var(--rev-a,0) * -120px))
    rotateX(calc(var(--rev-d,0) * 24deg))
    scale(calc(1 - var(--rev-a,0) * .10))
    /* + наклон объёмной карточки за курсором. ДОБАВКОЙ к месту на кольце,
       а не вместо него: два поворота вокруг одной оси складываются, поэтому
       кадр остаётся на своём месте и лишь доворачивается за рукой. */
    rotateX(calc(var(--rev-my,0) * 3.4deg))
    rotateY(calc(var(--rev-mx,0) * -4.2deg))
    scale(var(--rev-s,1));
  opacity:calc(1 - var(--rev-a,0) * .30);
}

/* 2. Кольцо слева направо: то же самое вокруг вертикальной оси. */
.rev[data-rev-view="ringx"] .rev-view{perspective:1400px}
.rev[data-rev-view="ringx"] .rev-view{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.rev[data-rev-view="ringx"] .rev-card{
  transform:
    translate3d(calc(var(--rev-d,0) * 52%),0,calc(var(--rev-a,0) * -110px))
    rotateY(calc(var(--rev-d,0) * -26deg))
    scale(calc(1 - var(--rev-a,0) * .10))
    /* + наклон за курсором (см. «кольцо» выше) */
    rotateX(calc(var(--rev-my,0) * 3.4deg))
    rotateY(calc(var(--rev-mx,0) * -4.2deg))
    scale(var(--rev-s,1));
  opacity:calc(1 - var(--rev-a,0) * .30);
}

/* 3. Барабан: кадры почти лежат на гранях цилиндра — поворот круче,
   глубина больше, дальние заметно бледнее. */
.rev[data-rev-view="drum"] .rev-view{perspective:1100px}
.rev[data-rev-view="drum"] .rev-card{
  transform:
    translate3d(0,calc(var(--rev-d,0) * 30%),calc(var(--rev-a,0) * -210px))
    rotateX(calc(var(--rev-d,0) * 52deg))
    scale(calc(1 - var(--rev-a,0) * .16))
    /* + наклон за курсором (см. «кольцо» выше) */
    rotateX(calc(var(--rev-my,0) * 3.4deg))
    rotateY(calc(var(--rev-mx,0) * -4.2deg))
    scale(var(--rev-s,1));
  opacity:calc(1 - var(--rev-a,0) * .38);
}

/* 4. Стопка: кадры лежат друг на друге со сдвигом вверх — как колода. */
.rev[data-rev-view="stack"] .rev-view{perspective:1600px}
.rev[data-rev-view="stack"] .rev-card{
  transform:
    translate3d(calc(var(--rev-d,0) * 14px),calc(var(--rev-d,0) * 10px),calc(var(--rev-a,0) * -60px))
    rotate(calc(var(--rev-d,0) * -.7deg))
    scale(calc(1 - var(--rev-a,0) * .05))
    /* + наклон за курсором (см. «кольцо» выше) */
    rotateX(calc(var(--rev-my,0) * 3.4deg))
    rotateY(calc(var(--rev-mx,0) * -4.2deg))
    scale(var(--rev-s,1));
  opacity:calc(1 - var(--rev-a,0) * .34);
}

/* 5. Волна: кадры качаются на волне — вбок и с наклоном. */
.rev[data-rev-view="wave"] .rev-view{perspective:1600px}
.rev[data-rev-view="wave"] .rev-card{
  transform:
    translate3d(calc(var(--rev-d,0) * 26px),calc(var(--rev-d,0) * 20%),calc(var(--rev-a,0) * -50px))
    rotate(calc(var(--rev-d,0) * 2.4deg))
    scale(calc(1 - var(--rev-a,0) * .06))
    /* + наклон за курсором (см. «кольцо» выше) */
    rotateX(calc(var(--rev-my,0) * 3.4deg))
    rotateY(calc(var(--rev-mx,0) * -4.2deg))
    scale(var(--rev-s,1));
  opacity:calc(1 - var(--rev-a,0) * .34);
}

/* 6. 3D-печать: кадр не едет, а ПЕЧАТАЕТСЯ слоями снизу вверх. Обрезка
   идёт ступенями (steps), как слои принтера, а по кромке ползёт тонкая
   оранжевая линия — «сопло». */
.rev[data-rev-view="printer"] .rev-card{
  transform:none;
  opacity:0;
  transition:opacity .28s linear;
}
.rev[data-rev-view="printer"] .rev-card[aria-hidden="false"]{opacity:1}
.rev[data-rev-view="printer"] .rev-card.rev-in{
  animation:revPrint .95s steps(18,end) both;
}
.rev[data-rev-view="printer"] .rev-card.rev-in::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  box-shadow:0 0 14px rgba(255,106,26,.65);
  animation:revPrintLine .95s steps(18,end) both;
}
@keyframes revPrint{
  from{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes revPrintLine{
  from{top:100%}
  to{top:0}
}
/* ПОЛОСЫ ПОД ОТЗЫВАМИ БОЛЬШЕ НЕТ ВОВСЕ.
   Владелец (29.10) сначала обвёл серую ленту на всю ширину под карточкой —
   её рисовала заливка `.rev-bar` — и просил убрать заливку. Потом обвёл саму
   полосу со стрелками и точками и попросил перенести прокрутку к правой
   кромке карточки. Поэтому `.rev-bar` вместе со стрелками и точками убран из
   разметки, а не просто обесцвечен: прозрачная полоса всё равно занимала бы
   место под карточкой и двигала раздел.
   Прокрутка теперь — `.rev-rail` у правой кромки (краски — выше). */

/* ---------- 20. ДОСТАВКА ---------- */
.ship-item{
  border:0;border-radius:18px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.09),0 3px 0 rgba(27,23,19,.05);
}
.ship-item[open]{box-shadow:inset 0 0 0 1px rgba(255,106,26,.3),0 4px 0 rgba(255,106,26,.13)}
.ship-q{color:var(--ink);font-weight:700}
.ship-q:hover{color:var(--acc-deep)}
.ship-ic{background:var(--acc-soft);color:var(--acc-deep);box-shadow:inset 0 0 0 1px rgba(255,106,26,.2)}
.ship-ic svg{stroke:var(--acc-deep)}
.ship-body,.ship-t{color:var(--ink-2)}
.ship-a{color:var(--acc-deep);font-weight:700}
.ship-plus::before,.ship-plus::after{background:var(--acc-deep)}

/* ---------- 21. КОНТАКТЫ И ФОРМА ---------- */
.form{
  border:0;border-radius:22px;
  background:linear-gradient(168deg,var(--surface) 0%,#fbf6ed 100%);
  box-shadow:var(--sh-card);
}
.field label{
  font:600 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:9px;
}
.field input,.field textarea,.field select{
  background:#fffdf9;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;
  box-shadow:inset 0 2px 4px rgba(70,50,25,.05);
}
.field input::placeholder,.field textarea::placeholder{color:#a9a094}
/* ФОКУС ПОЛЯ. В style.css у нажатого поля есть СВОЯ заливка —
   `background:rgba(10,16,28,.9)`, почти ночь. Здесь стояли только рамка и
   тень, а заливку правило не возвращало, поэтому при нажатии поле становилось
   тёмным, а цвет букв оставался чернильным (`--ink`) — «нажимаю ввести текст
   и там всё чёрное и не видно текст который ввожу».
   Замерено на `#task` (контакты, клик мышью): до клика `#fffdf9`,
   после — `rgba(10,16,28,.9)` при цвете букв `#1b1713`; средняя яркость
   нарисованного поля 42 (тёмное). Ставим заливку и цвет букв ЯВНО, иначе
   `:focus` из style.css снова победит. */
.field input:focus,.field textarea:focus,.field select:focus{
  background:#fffdf9;color:var(--ink);
  border-color:rgba(255,106,26,.55);
  box-shadow:0 0 0 3px rgba(255,106,26,.14),inset 0 2px 4px rgba(70,50,25,.04);
}
.form-msg{background:var(--acc-soft);color:var(--acc-deep);border:1px solid rgba(255,106,26,.28)}
.form-msg.bad{background:#fdeaea;color:#a32222;border-color:rgba(200,50,50,.3)}

.c-item{
  border:0;border-radius:16px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.09),0 3px 0 rgba(27,23,19,.05);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.c-item:hover{
  transform:translateX(4px);border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.3),0 4px 0 rgba(255,106,26,.13);
}
.c-item .ci{
  background:var(--acc-soft);border:0;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.2);
}
.c-item .ci svg{stroke:var(--acc-deep);filter:none}
.c-item .k{font:600 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.c-item .v{font-size:15px;font-weight:700;color:var(--ink)}
.c-item a.v:hover{color:var(--acc-deep);text-shadow:none}

/* капча в форме заявки */
.fc-reload,.fc-tile{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}
/* Поле картинки-задания. Сама картинка рисуется на сервере и уже бумажная;
   здесь только подложка под ней — она была почти чёрной и просвечивала
   полосой, пока картинка грузится. */
.fc-img{background:#efe9dd;border:1px solid var(--line)}
.fc-reload:hover{border-color:rgba(255,106,26,.4);color:var(--acc-deep)}
.fc-row input{
  background:#fffdf9;border:1px solid var(--line);color:var(--ink);
  box-shadow:inset 0 2px 4px rgba(70,50,25,.05);
}
.fc-row input::placeholder{color:#a9a094}
.fc-row input:focus{
  border-color:rgba(255,106,26,.6);background:#fff;
  box-shadow:0 0 0 3px rgba(255,106,26,.12);
}
.fc-row input.bad{border-color:rgba(200,50,50,.7);box-shadow:0 0 0 3px rgba(200,50,50,.14)}
/* Вопрос капчи тоже бывает окрашен настройкой (--fc-q-color) — свой цвет
   здесь не ставим, у style.css есть запасной «чернильный». */
.fc-tile:hover,.fc-tile[aria-pressed="true"]{border-color:rgba(255,106,26,.55);box-shadow:0 0 0 3px rgba(255,106,26,.14)}
.fc-hint{color:var(--mute)}

/* ---------- 22. БЛОКИ ССЫЛОК ---------- */
.lb{
  border:0;border-radius:22px;
  background:linear-gradient(168deg,var(--surface) 0%,#faf5ec 62%,#f4eee3 100%);
  box-shadow:var(--sh-card);
}
.lb-item{
  background:var(--surface-2);border:1px solid var(--line-2);
}
.lb-item:hover{border-color:rgba(255,106,26,.3);background:#fffdf9}
.lb-item-logo{background:#f4eee3}
.lb-item-btn{color:var(--acc-deep)}
.lb-arrow{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 3px 0 rgba(27,23,19,.08)}
.lb-arrow:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.35)}

/* ---------- 23. МАГАЗИН: ЛЕНТА ТОВАРОВ ---------- */
.shop-block-title{color:var(--ink)}
.shop-block-title-text{color:var(--ink)}
.shop-sec .sec-head{margin-bottom:8px}

.car-card{
  border:1px solid transparent;border-radius:20px;
  background:linear-gradient(168deg,#fffdf8 0%,#faf5ec 100%);
  background-clip:padding-box;-webkit-background-clip:padding-box;
  box-shadow:0 4px 0 rgba(27,23,19,.05),0 22px 40px -28px rgba(70,50,25,.6);
}
/* кромка карточки: вместо холодного блика — тёплая грань бумаги */
.car-card::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(27,23,19,.08);
  background:rgba(240,233,221,var(--dim,0));
}
.car-card[data-active="1"]{
  border-color:rgba(255,106,26,.55);
  background:linear-gradient(168deg,#fffdf8 0%,#faf5ec 100%);
  box-shadow:0 6px 0 rgba(255,106,26,.14),0 30px 50px -30px rgba(70,50,25,.65);
}
.car-card:hover{
  border-color:rgba(255,106,26,.62);
  box-shadow:0 6px 0 rgba(255,106,26,.14),0 30px 50px -30px rgba(70,50,25,.6);
}
.car-card:not([data-active="1"]):hover{
  border-color:transparent;
  box-shadow:0 22px 40px -30px rgba(70,50,25,.55);
}
/* Фотография, заходящая под подпись, гасла в цвет тёмной подложки.
   Подложка теперь бумажная — и гасить надо в бумагу, иначе под текстом
   остаётся чёрная полоса.

   НО ГАСИТЬ НАДО ТОЛЬКО СРЕЗ, А НЕ ПОЛОВИНУ ПОДПИСИ (29.10, вечер).
   Владелец обвёл красным подписи соседних карточек: «просил убрать
   размытость во всех каруселях». Замер `_b17-veil.js` на блоке «Кадр 3:4»:
   подпись активной карточки — 2377 (дисперсия лапласиана), у соседа 171,
   а стоит снять эту пелену — 467. То есть пелена съедала 2,7× контраста:
   на тёмной теме текст под ней уходил в фон незаметно, а на бумаге
   оставался серым призраком — «муть».

   Почему так вышло: полоса затухания была привязана к доле среза
   (`--cover` ≈ 55 %) и растягивалась на ПОЛОВИНУ подписи — с 27 % до
   54,8 %. Вся видимая правая часть названия и цены попадала в неё.

   СУЖЕНИЕ НЕ ПОМОГЛО, И ЭТО ЧЕСТНЫЙ ВЫВОД. Замер после сужения полосы
   (последние 20 % от доли среза): 171 → 217 при 467 без пелены вовсе.
   Причина в самой затее: срез стоит на 54,8 % ширины подписи, значит
   ЛЮБОЕ затухание перед срезом ложится на ВИДИМЫЙ текст. На тёмной теме
   это читалось как «подпись ушла за карточку», на бумаге — как мутное
   серое пятно. Поэтому на бумаге пелены нет совсем: подпись обрывается
   ровно по кромке соседней карточки (она непрозрачная), и обрыв читается
   как обычный край кадра, а не как смазанный текст.

   Свойства `[data-cover] .car-body::after` из style.css остаются (позиция,
   inset, pointer-events) — снимается только краска. */
.car-card[data-cover] .car-body::after{background:none}
.car-shot{background:#efe9dd}
.car-body{color:var(--ink)}
/* Цвета товара владелец выбирал на тёмной подложке: голубое название и
   белый переход подписи на бумаге почти не видны. Оставляем решение
   владельца там, где оно читается (значок, цена), а название и подпись
   возвращаем к чернилам и филаменту — иначе карточку не прочитать. */
.car-name{color:var(--ink);font-weight:800}
.car-card:hover .car-name{color:var(--acc-deep)}
.car-price{color:var(--acc-deep)}
.car-old,.car-out{color:var(--mute)}
.shop-block-title-text{
  background:linear-gradient(92deg,var(--ink) 0%,var(--ink) 38%,var(--acc-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.shop-block-title::before{
  background:linear-gradient(90deg,var(--acc),var(--acc-deep));
}
.car-badge{
  color:#2c1300;
  background:linear-gradient(180deg,#ffb179,#ff7420);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 rgba(160,55,0,.5),0 8px 16px -8px rgba(0,0,0,.35);
}
.car-badge[data-kind="sale"]{background:linear-gradient(180deg,#ff9c8a,#ef5a3c);color:#2c0a00}
.car-badge[data-kind="promo"]{background:linear-gradient(180deg,#ffc79a,#ff8f45);color:#2c1300}
.car-badge[data-kind="new"]{background:linear-gradient(180deg,#b9d8a8,#7f9a6b);color:#12200c}
.car-badge[data-kind="hit"]{background:linear-gradient(180deg,#ffcf8a,#ffab3d);color:#2c1300}
.car-arrow{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 4px 0 rgba(27,23,19,.08);
}
.car-arrow:hover{background:#fff;color:var(--acc-deep);border-color:rgba(255,106,26,.4)}
.car-dot,.car-dots button{background:rgba(27,23,19,.18)}
.car-dot[aria-current="true"],.car-dot.on,.car-dots button[aria-current="true"]{background:var(--acc)}
/* Точки кадров у лент. Некрупные точки красятся НЕ своим `background`, а
   переменной `--dot-bg`, объявленной правилом `[data-dots-window] .car-dot`
   в style.css. Оно точнее простого `.car-dot`, поэтому одной строки выше
   не хватило: точки оставались белыми (rgba(255,255,255,.88)) — на бумаге
   их не было видно вовсе. Красим ту же переменную и тем же весом.
   Кольцо и текущая точка не ломаются: у них свои, более точные правила. */
[data-dots-window] .car-dot{
  --dot-bg:rgba(27,23,19,.20);
  --dot-line:rgba(27,23,19,.20);
}
/* Кнопка паузы стояла тёмным кружком без подписи — на бумаге читалась
   дырой рядом с точками. */
.car-pause{
  background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(27,23,19,.06);
}
.car-pause:hover{background:#fff;border-color:rgba(255,106,26,.45);color:var(--acc-deep);box-shadow:none}
.car-pause.paused{color:var(--acc-deep);border-color:rgba(255,106,26,.45)}
.car-deal{color:var(--acc-deep)}
/* Полоса вкладок и переключатель вида. Здесь была ОДНА строка на двоих
   (`.shop-tabs,.shop-switch{background:var(--surface);border:1px solid var(--line)}`),
   и она красила не только переключатель, но и КОНТЕЙНЕР вкладок. У самого
   контейнера в style.css нет ни заливки, ни рамки, ни скругления — он просто
   `display:flex` с зазором 8px. Заливка легла прямоугольником ВОКРУГ круглых
   вкладок: в зазорах между ними и по углам стала видна белая бумага с
   ПРЯМЫМИ углами (`border-radius: 0px`, замерено). Владелец: «почему то
   белые заметные углы» — на снимке «как надо» вкладки лежат ПРЯМО НА БУМАГЕ.
   Поэтому контейнеру — ничего, а переключатель остаётся пилюлей: у него
   своё скругление 100px и своя рамка, и он один читается как орган
   управления. */
.shop-tabs{background:none;border:0}
.shop-switch{background:var(--surface);border:1px solid var(--line)}
/* Тени рамок строки. В style.css у трёх видов рамки тень ПОЧТИ ЧЁРНАЯ
   (`rgba(6,10,18,.9)`, `rgba(6,10,18,.92)`, `inset 0 2px 9px rgba(0,0,0,.6)`):
   на неоновом сайте это «глубина», на бумаге — чёрная грязь по кромке белой
   вкладки. Замером это видно у настройки владельца «вдавленная»: у белой
   пилюли переключателя кромка уходила в серо-чёрное.
   Перекрашиваем ТОЛЬКО тёмные части теней в чернила бумаги: форма, ширина и
   порядок теней прежние, поэтому виды рамки остаются различимыми (сторож
   `test-shop-row` требует, чтобы у каждого вида была своя подпись
   `рамка|тень`). «Без рамки» правила не имеет — как и раньше. */
.shop-view[data-row-frame="thick"] .shop-tab,
.shop-view[data-row-frame="thick"] .shop-switch{
  box-shadow:0 0 0 1px rgba(27,23,19,.55);
}
.shop-view[data-row-frame="double"] .shop-tab,
.shop-view[data-row-frame="double"] .shop-switch{
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.5),inset 0 0 0 2px var(--row-line);
}
.shop-view[data-row-frame="inset"] .shop-tab,
.shop-view[data-row-frame="inset"] .shop-switch{
  box-shadow:inset 0 2px 7px rgba(90,68,38,.26);
}
.shop-view[data-row-frame="glass"] .shop-tab,
.shop-view[data-row-frame="glass"] .shop-switch{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             0 12px 24px -18px rgba(70,50,25,.55);
}
.shop-view[data-row-frame="edge3d"] .shop-tab,
.shop-view[data-row-frame="edge3d"] .shop-switch{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             0 9px 20px -13px var(--row-glow);
}
.shop-sw-btn,.shop-tab{color:var(--ink-2)}
/* Выбранная кнопка вида и выбранная вкладка красятся ЦВЕТОМ СТРОКИ
   (`--row-c`) — так их задаёт style.css, и именно на это смотрит сторож
   `test-shop-row`: «выбранная кнопка другого цвета, чем без настройки».
   Своя заливка здесь ломала бы настройку владельца: кнопка становилась
   одинаковой при любом цвете строки. Своё только запасное значение
   (`--acc` вместо неонового `--cyan`) и цвет букв на светлой заливке. */
.shop-sw-btn[data-on],.shop-sw-btn[aria-pressed="true"]{
  background:var(--row-c,var(--acc));color:var(--ink);
}
.shop-pg,.shop-pager{color:var(--ink-2)}
.shop-pg-next,.shop-pg-prev{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}

/* ---------- 23б. ЛЕНТА РАБОТ ----------
   Карточка работы устроена как карточка товара: снимок, шапка с названием,
   подвал с сердцем. Подложка была ночной (#0c1220) — на бумаге это
   читалось чёрной полосой над фотографией. */
.wr-card{
  background:linear-gradient(168deg,#fffdf8 0%,#faf5ec 100%);
  background-clip:padding-box;-webkit-background-clip:padding-box;
  border:1px solid transparent;border-radius:20px;
  box-shadow:0 4px 0 rgba(27,23,19,.05),0 22px 40px -28px rgba(70,50,25,.6);
}
.wr-media{background:#efe9dd}
.wr-card[data-active="1"]{
  border-color:rgba(255,106,26,.55);
  box-shadow:0 6px 0 rgba(255,106,26,.14),0 30px 50px -30px rgba(70,50,25,.65);
}
.wr-card:not([data-active="1"]):hover{
  border-color:rgba(255,106,26,.3);
  box-shadow:0 22px 40px -30px rgba(70,50,25,.55);
}
/* То же, что у карточки товара: на бумаге пелены нет вовсе — название
   соседней работы обрывается по кромке соседней карточки. Разбор и замер —
   у `.car-body::after` выше. */
.wr-card[data-cover] .wr-head::after{background:none}
.wr-name{color:var(--ink)}
.wr-cap{color:var(--mute)}
.wr-ava{
  background:var(--acc-soft);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.24);
}
.wr-term{
  background:var(--acc-soft);color:var(--acc-deep);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.22);
}
.wr-count{background:rgba(27,23,19,.55);color:#fff}
.wr-like{color:var(--ink-2)}
.wr-like:hover,.wr-like[aria-pressed="true"]{color:var(--acc-deep);background:rgba(255,106,26,.08)}
.wr-like:focus-visible,.wr-share:focus-visible{outline:2px solid var(--acc)}
.wr-share{color:var(--ink-2)}
.wr-share:hover{color:var(--acc-deep);background:rgba(255,106,26,.1)}
.wr-pages button,.wr-page{background:rgba(27,23,19,.25)}
.wr-pages button[aria-current="true"],.wr-page.on{background:var(--acc)}
.wr-hint{color:var(--mute)}
/* ОКНО РАБОТЫ. В style.css это тёмная карточка: `.wr-modal-box` залит
   `#0c1220`, крестик — `rgba(8,13,23,.8)`, подложка — почти чёрная. На
   бумажном сайте окно оставалось единственным тёмным прямоугольником, и
   заголовок работы в нём (цвет `--ink`, тёмные чернила) просто исчезал —
   «во всплывающем окне все еще темный фон, надо это исправить».
   Теперь окно — лист бумаги: та же поверхность и рамка, что у окна
   товара, тень мягкая и тёплая. */
.wr-modal-back{background:rgba(40,30,20,.42);backdrop-filter:blur(7px)}
.wr-modal-box{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 30px 90px -34px rgba(60,40,15,.55),var(--sh-card);
  color:var(--ink);
}
.wr-modal-x{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}
.wr-modal-x:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.45)}
.wr-modal-x:focus-visible{outline:2px solid var(--acc)}
.wr-modal-note{color:var(--mute)}

/* ---------- 24. ОКНО ТОВАРА ---------- */
.pm-back{background:rgba(40,30,20,.42);backdrop-filter:blur(7px)}
.pm-box{
  border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(168deg,#fffdf8 0%,#fbf6ed 100%);
  box-shadow:0 40px 110px -40px rgba(60,40,15,.55);
  color:var(--ink);
}
.pm-x{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.08);
}
.pm-x:hover{border-color:rgba(255,106,26,.45);color:var(--acc-deep);background:#fff}
.pm-shot{background:#efe9dd}
.pm-name{color:var(--ink)}
.pm-desc,.pm-specs,.pm-note,.pm-delivery{color:var(--ink-2)}
.pm-price{color:var(--acc-deep)}
.pm-old{color:var(--mute)}
.pm-buy{
  color:#2c1300;
  background:linear-gradient(180deg,#ffa45c 0%,#ff7a28 44%,#f75c0b 100%);
  box-shadow:var(--sh-block);
}
.pm-buy:hover{transform:translateY(-2px)}
.pm-thumbs{background:transparent}
.pm-thumb{border:1px solid var(--line);background:#efe9dd}
.pm-thumb[aria-current="true"],.pm-thumb.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(255,106,26,.18)}
.pm-nav{background:rgba(255,253,248,.9);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 3px 0 rgba(27,23,19,.08)}
.pm-nav:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.4)}

/* ПРОСМОТР ФОТО И ВИДЕО В ПОЛНЫЙ РАЗМЕР — НА БУМАГЕ.
   Владелец (29.10, снимок): «при просмотре фото и видео товара в полный
   размер надо сделать светлее, а то сейчас остался там тёмный со старой
   темы сайта». Так и было: подложка просмотра объявлена в style.css ночным
   стеклом `rgba(3,5,11,.94)`, а крестик и счётчик — холодным `#eaf6ff` на
   `rgba(6,10,18,.55)`. После перехода сайта на бумагу это остался
   единственный тёмный остров, и он резал глаз сильнее всего.
   Теперь подложка — тот же лист, что и весь сайт, только плотнее (кадр под
   ней не должен мешать): светлая, с тёплым размытием. Крестик, счётчик и
   ободок кадра — чернила по бумаге. Стрелки уже бумажные (правило выше),
   их не трогаем. */
.pm-full{
  --full-rim-c:rgba(27,23,19,.24);
  --stk-c:var(--ink);
  --stk-line:rgba(27,23,19,.16);
}
.pm-full-back{
  background:rgba(244,241,234,.95);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
}
.pm-full-x,.pm-full-count{
  background:rgba(255,253,248,.92);
  border-color:rgba(27,23,19,.16);
  color:var(--ink);
  box-shadow:0 4px 0 rgba(27,23,19,.06),0 16px 28px -20px rgba(60,45,25,.7);
}
.pm-full-x:hover{background:var(--acc);border-color:var(--acc);color:#fff}
/* Свечение рамки было НЕОНОВО-ГОЛУБЫМ (#22e6ff) — цвет старой темы, и он
   один держался холодным пятном на тёплой бумаге. У владельца при этом
   выбран цвет рамки «огонь»: голубое свечение спорило с собственной
   настройкой. Теперь свечение — акцент сайта. */
.pm-full[data-full-rim="glow"]{
  --full-rim-c:rgba(255,106,26,.85);
  --full-rim-out:0 0 26px rgba(255,106,26,.45),0 0 60px rgba(255,106,26,.22);
}
.pm-badge{background:var(--acc-soft);color:var(--acc-deep);box-shadow:inset 0 0 0 1px rgba(255,106,26,.22)}
/* Строки выбора в окне товара — БЕЗ РАМОК.
   Владелец (29.10, снимок): обвёл «Цвет: не выбран» и «Размер: не выбран»
   и сказал «убрать там рамки, они там не нужны». Рамку и заливку давало
   ЭТО правило: `.pm-opt` — это группа (подпись + ряд кнопок), а не кнопка,
   и обводить её незачем: кнопки внутри и так имеют свою рамку.
   Гарнитуру и цвет подписи оставляем — убираем только обводку и подложку. */
.pm-opt{border:0;background:none;color:var(--ink-2)}
.pm-opt[aria-pressed="true"],.pm-opt.on{border-color:var(--acc);color:var(--acc-deep);background:var(--acc-soft)}
/* И у самих значений рамки нет: снимок владельца показал, что обведены были
   не только подписи — значения («ппавапа», «пвпапвап») тоже стояли в
   плашках. Выбранное значение отличается ЦВЕТОМ и мягкой подложкой, а не
   обводкой. Отступы уменьшены под текст без рамки, чтобы плашки не
   расползлись. */
.pm-opt-btn{
  border:0;background:none;padding:6px 6px;color:var(--ink);
  box-shadow:none;
}
.pm-opt-btn:hover{border-color:transparent;color:var(--acc-deep)}
.pm-opt-btn.on{
  border-color:transparent;color:var(--acc-deep);
  background:var(--acc-soft);box-shadow:none;border-radius:8px;
}
.pm-opt-need .pm-opt-btn{border-color:transparent}
/* БЛОК ПРОМОКОДА В ОКНЕ ТОВАРА. Владелец (снимок #7): «там рамка и цвет
   другой надо это убрать».
   Замерено в окне товара «Шалаш»:
     .pm-code   — заливка #f8f3ea и ПУНКТИРНАЯ рамка `1px dashed
                  rgba(255,106,26,.4)` ВОКРУГ ВСЕГО блока (плашка + поле +
                  «Применить»). Это и есть «рамка»: она обводила блок, хотя
                  он стоит на листе и ничем от него не отличается.
     .code-in   — заливка `rgba(120,160,220,.14)` и рамка того же синего:
                  голубой купон на тёплой бумаге читался вставкой из другого
                  сайта. Синий здесь не настройка владельца, а ЗАПАСНОЕ
                  значение style.css (`var(--stk-*, rgba(120,160,220,…))`):
                  палитра магазина объявлена для `[data-promo-color]`, а
                  плашка ставит `data-code-color`, и до неё палитра не
                  доходила.
     .code-val  — белое на 7 % и синее кольцо: код почти не виден.
     .code-plate — `--code-cut:#0d1424` (ночь): два ЧЁРНЫХ кружка-выреза по
                  бокам купона.
   Красим переменными палитры на самом блоке: все виды рамки и анимации в
   style.css читают `--stk-*`, поэтому одного этого правила хватает на все
   восемь видов, и настройка рамки владельца продолжает работать. Вырезы
   купона становятся цветом ЛИСТА — тогда они читаются как настоящие
   прорези, а не как дырки в монитор. */
.pm-code{
  background:none;border:0;
  --stk-c:var(--acc-deep);
  --stk-line:var(--line);
  --stk-bg:var(--bg-2);
  --stk-glow:rgba(255,106,26,.16);
}
.pm-code .code-plate{--code-cut:var(--surface)}
.pm-code .code-val{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.pm-code .code-copy{color:var(--ink-2)}
.pm-code .code-copy:hover{background:var(--acc-soft)}
/* Поле ввода промокода: в style.css это белое на 5 % с синей рамкой, а цвет
   букв оно наследует от блока (`--acc-deep`) — на бумаге набранный код
   выходил оранжевым по почти прозрачному. Здесь — обычное поле бумаги. */
.pm-code .code-field{background:var(--surface);border-color:var(--line);color:var(--ink)}
.pm-code .code-field::placeholder{color:var(--ink-3)}
.pm-code .code-field:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,106,26,.16)}
/* Всплывающее слово «Вставить» под курсором.

   Владелец (29.10, снимок #1): «нашёл вот тут отметил красным: тёмный цвет
   от старой темы, надо поменять на новый». В style.css плашка залита почти
   чёрным — rgba(8,14,24,.96), — и на бумажном окне это единственный тёмный
   прямоугольник: он читался вырезанной дырой, а не подсказкой.

   Краски те же числа, что у остальных бумажных плашек: тёплая бумага,
   тёмная тень, тонкая линия. Тёмной остаётся только тень под плашкой —
   она и должна быть тёмной. */
.paste-tip{
  border-color:rgba(27,23,19,.14);
  background:rgba(255,253,248,.97);
  color:var(--ink);
  box-shadow:0 10px 22px -14px rgba(60,45,25,.62),0 2px 0 rgba(27,23,19,.05);
}
/* «Показать полностью» — кнопка была залита белым на 6 %: на тёмном это
   читалось плашкой, на бумаге не читалось вовсе, и кнопка выглядела
   строчкой мелкого серого текста. */
.pm-fold-btn{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 2px 0 rgba(27,23,19,.05);
}
.pm-fold-btn:hover{background:var(--acc-soft);border-color:rgba(255,106,26,.45);color:var(--acc-deep)}
.pm-zoom-hint{background:rgba(255,253,248,.9);color:var(--ink-2);border:1px solid var(--line)}
/* Справка о доставке была залита мятным: на тёмном это был акцент, на
   бумаге — единственное зелёное пятно в тёплой странице. */
.pm-delivery{
  border:1px solid rgba(255,106,26,.22);background:var(--acc-soft);color:var(--acc-deep);
}
.pm-lens{border-color:rgba(255,106,26,.75);box-shadow:0 12px 36px -12px rgba(60,40,15,.55),inset 0 0 0 1px rgba(255,255,255,.5)}
.pm-deal{color:var(--acc-deep)}

/* ---------- 25. КОРЗИНА И ОКНА ---------- */
.cart-back{background:rgba(40,30,20,.42);backdrop-filter:blur(6px)}
.cart-box{
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,#fffdf8,#fbf6ed);
  box-shadow:-30px 0 90px -40px rgba(60,40,15,.5);
  color:var(--ink);
}
.cart-head{border-bottom:1px solid var(--line-2)}
.cart-title{color:var(--ink)}
.cart-x{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}
.cart-x:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.4)}
.cart-line{border-bottom:1px solid var(--line-2)}
.cart-shot{background:#efe9dd}
.cart-ln{color:var(--ink)}
.cart-lo,.cart-ls{color:var(--ink-2)}
.cart-ls{color:var(--acc-deep);font-weight:800}
.cart-del{color:var(--mute)}
.cart-del:hover{color:#b3341d}
.cart-sum-row{color:var(--ink-2)}
.cart-sum-all,.cart-sum-final{color:var(--ink)}
.cart-sum-final b{color:var(--acc-deep)}
.cart-go{
  color:#2c1300;
  background:linear-gradient(180deg,#ffa45c 0%,#ff7a28 44%,#f75c0b 100%);
  box-shadow:var(--sh-block);
}
.cart-go:hover{transform:translateY(-2px)}
.cart-note,.cart-hint{color:var(--mute)}
.cart-promo-field{background:#fffdf9;border:1px solid var(--line);color:var(--ink)}
.cart-promo-apply{
  background:var(--surface);border:1px solid var(--line);color:var(--acc-deep);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}
/* Вид «свечение» (data-apply-cart-fx="glow", он же у окна промокода).
   Это была заливка на 16 % цвета с БЕЛЫМИ буквами — приём для тёмного
   фона: на бумаге белое на светло-голубом не видно совсем. Сохраняем
   смысл вида (кнопка залита цветом владельца и «светится»), но заливку
   делаем плотной, а буквы — тёмными. */
html[data-apply-cart-fx="glow"] .cart-promo-apply,
html[data-apply-win-fx="glow"] .code-apply{
  background-color:var(--a-from);
  background-image:none;
  color:var(--a-ink);
  box-shadow:0 3px 0 rgba(27,23,19,.12);
}
/* Выключенная кнопка «Применить»: в style.css у неё `color:#fff` — на
   светлой заливке это невидимая надпись. */
.cart-promo-apply:disabled{color:var(--ink-3)}
.cart-bonus-box{border-color:rgba(255,106,26,.3)}
/* «Итого» в шторке. В style.css у суммы `color:#fff` — на бумаге это
   невидимая надпись (владелец обвёл её красным: «не видно текст он там
   белый стал»). Красим тем же акцентом, что и цены в строках товаров:
   сумма — это цена, и читаться она должна так же.
   Только ПРЯМОЙ ребёнок: у строк «Товары/Доставка» внутри `.cart-sum-row`
   свои `<b>` с цветом чернил, и общее правило перекрасило бы и их. */
.cart-sum > b,
.cart-sum-all b,
.cart-sum-final b{color:var(--acc-deep)}
/* ШАГ КОРЗИНЫ — ЭТО ВЕСЬ БЛОК, а не значок шага: `.cart-step` оборачивает
   список товаров, форму и «готово» (index.html, data-step). Заливка 6 %
   чернил растягивалась на всю шторку и читалась серой подложкой внутри
   списка — «надо убрать внутри почему то стало серо». Бумага сама себе фон. */
.cart-step{background:none}
.cart-step.on{background:var(--acc)}
/* «Светлое на тёмном» из style.css: #8fd8a0 (успех и скидка), #ff9aa8
   (минус), #ffc48a (предупреждение и «больше не предлагается»). На бумаге
   это 1,4–1,9 по WCAG: текст есть, прочитать нельзя. Тот же смысл — но
   тёмными чернилами. */
.cart-sum-row [data-cart-bonus-sumcut],
.cart-sum-row [data-cart-bonus-sumcut2],
.cart-sum-row [data-cart-promo-sumcut],
.cart-sum-row [data-cart-promo-sumcut2],
.cart-promo-note[data-kind="ok"],
.acc-bonus-row[data-sign="plus"] .acc-bonus-row-val{color:#2f6b3a}
.cart-promo-note[data-kind="bad"],
.acc-bonus-row[data-sign="minus"] .acc-bonus-row-val{color:#b3341d}
.cart-gone,.cart-warn,
.acc-bonus-next,
.pm-note[data-note-color="warn"],
.pm-opt-need .pm-opt-cap{color:#8a4200}
/* Второстепенные кнопки корзины были «стеклянными» (белое на 3%) — на
   бумаге это серые прямоугольники без границ. */
.cart-qty button{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 2px 0 rgba(27,23,19,.05);
}
.cart-qty button:hover{border-color:rgba(255,106,26,.45);color:var(--acc-deep);background:var(--acc-soft)}
.cart-qty button:disabled{background:var(--surface-2);color:var(--mute);border-color:var(--line-2)}
.cart-acc-link,.cart-back-link{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.05);
}
.cart-acc-link:hover,.cart-back-link:hover{border-color:rgba(255,106,26,.45);color:var(--acc-deep)}
.cart-acc-link span{color:var(--ink)}
.cart-clear{color:var(--mute)}
.cart-clear:hover{color:#b3341d;background:rgba(200,50,50,.07)}
.cart-pol{color:var(--acc-deep)}
.cart-pol:hover{color:var(--ink)}
.cart-done-sum,.cart-done-note{color:var(--ink-2)}
.cart-label{color:var(--mute)}
.cart-radio{border:1px solid var(--line);background:var(--surface)}
.cart-radio:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}

/* окно заявки (.cb) и просмотр кадра (.pv) */
.cb-back{background:rgba(40,30,20,.45);backdrop-filter:blur(7px)}
.cb{
  border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(168deg,#fffdf8,#fbf6ed);
  box-shadow:0 40px 110px -40px rgba(60,40,15,.55);
  color:var(--ink);
}
.cb-title{color:var(--ink)}
.cb-sub{color:var(--ink-2)}
.cb-close{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.cb-close:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.4)}
.cb-field input,.cb-field textarea{background:#fffdf9;border:1px solid var(--line);color:var(--ink);border-radius:12px}
.cb-field input:focus,.cb-field textarea:focus{border-color:rgba(255,106,26,.55);box-shadow:0 0 0 3px rgba(255,106,26,.14)}
.cb-send{
  color:#2c1300;
  background:linear-gradient(180deg,#ffa45c,#ff7a28 44%,#f75c0b);
  box-shadow:var(--sh-block);
}
.cb-note{color:var(--ink-2)}
.pv{border:1px solid var(--line);border-radius:22px;background:#fffdf8;color:var(--ink)}
.pv-body{background:#fbf6ed}

/* личный кабинет */
.acc-box,.acc-who,.acc-orders,.acc-bonus{
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
}

/* ---------- 26. ПЛАВАЮЩИЕ КНОПКИ ----------
   Значок связи и «наверх». На тёмном сайте это были светящиеся кружки;
   на бумаге — печатные бляшки: светлая поверхность, тёплая тень, цвет
   только у значка. Свечение владельца (c-orange, c-pink…) остаётся
   цветом значка, а не ореолом вокруг кнопки. */
.hub-toggle{
  background:var(--surface);border:1px solid var(--line);color:var(--acc-deep);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #fff,0 4px 0 rgba(27,23,19,.10),0 16px 30px -18px rgba(60,45,25,.6);
}
.hub-toggle:hover{
  border-color:rgba(255,106,26,.45);
  box-shadow:inset 0 1px 0 #fff,0 6px 0 rgba(255,106,26,.16),0 20px 34px -18px rgba(60,45,25,.6);
}
.hub-toggle-label{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 4px 0 rgba(27,23,19,.08),0 14px 26px -18px rgba(60,45,25,.55);
}
.hub-toggle-label::before,.hub-toggle-label::after{
  background:var(--surface);border:1px solid var(--line);
}
.hub-btn,.hub .fab{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(27,23,19,.09),0 12px 24px -16px rgba(60,45,25,.55);
}
.hub-btn:hover,.hub .fab:hover{
  background:#fff;color:var(--acc-deep);border-color:rgba(255,106,26,.45);
  box-shadow:inset 0 1px 0 #fff,0 5px 0 rgba(255,106,26,.16),0 16px 28px -16px rgba(60,45,25,.55);
}
/* цветные виды кнопок связи: цвет остаётся, неоновый ореол — нет.
   Цвета значка были подобраны под тёмную бляшку (#6bffb8, #7ec8ff): на
   светлой поверхности они почти сливались с ней, и кружок читался пустым.
   Восемь видов — закрытый список из style.css, поэтому перечислены все
   восемь: забытый вид вернулся бы пустым кружком. */
.hub-btn.c-orange,.hub-btn.c-pink,.hub-btn.c-red,.hub-btn.c-gray,
.hub-btn.c-green,.hub-btn.c-violet,.hub-btn.c-blue,
.hub-btn.c-brand,.hub-btn.c-{
  background:var(--surface);border-color:var(--line);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(27,23,19,.09),0 12px 24px -16px rgba(60,45,25,.55);
}
.hub-btn.c-gray{color:var(--ink-2)}
.hub-btn.c-brand,.hub-btn.c-{color:var(--acc-deep)}
.hub-btn.c-orange{color:#c25a00}
.hub-btn.c-pink{color:#b03a92}
.hub-btn.c-red{color:#b3341d}
.hub-btn.c-green{color:#0d6b4a}
.hub-btn.c-violet{color:#6b3fb5}
.hub-btn.c-blue{color:#1565a8}
.hub-btn:hover,.hub-item:hover .hub-btn,.hub-item:focus-visible .hub-btn{
  box-shadow:inset 0 1px 0 #fff,0 5px 0 rgba(27,23,19,.10),0 16px 28px -16px rgba(60,45,25,.55);
}
.hub-btn svg,.hub .fab svg{stroke:currentColor}
.hub-btn::before{display:none}
.hub-name{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 4px 0 rgba(27,23,19,.08),0 14px 26px -18px rgba(60,45,25,.55);
}

/* ---------- 27. ПОДВАЛ ---------- */
footer{
  border-top:1px solid var(--line);
  background:#efe9dd;
  box-shadow:none;
}
footer::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,106,26,.55),rgba(255,150,70,.7),transparent);
}
.foot-links{color:var(--ink-2)}
.foot-links a:hover{color:var(--acc-deep);text-shadow:none}
.copy{color:var(--mute);border-top:1px solid var(--line-2)}
.copy-link{color:var(--ink-2)}
.copy-link:hover{color:var(--acc-deep)}
footer .logo b{color:var(--ink)}

/* ---------- 28. СТРАНИЦЫ РАБОТЫ И СТРАНИЦЫ САЙТА ----------
   work.html и page.html берут тот же style.css, поэтому им достаточно
   этой части: обложка, текст, встроенные разделы. */
.wp-page{background:var(--bg);color:var(--ink)}
.wp-page .wp-body,.wp-page .wp-title,.wp-page .wp-lead{color:var(--ink)}
.wp-page .wp-body a{color:var(--acc-deep);border-bottom-color:rgba(255,106,26,.35)}
.wp-page .wp-quote{
  background:var(--surface);border-left:3px solid var(--acc);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.07);
}
.wp-page .wp-list li::before{color:var(--acc-deep)}
.wp-page .wp-hr{background:var(--line)}
.wp-img,.wp-video{background:#efe9dd}
/* `.wp-back` — это АБЗАЦ, а ссылка внутри него. Красим ССЫЛКУ: фон на
   абзаце растягивал белую плашку на всю ширину страницы, и «← Все работы»
   читалось не ссылкой, а пустой строкой таблицы. */
.wp-page .wp-back a{
  display:inline-block;padding:9px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}
.wp-page .wp-back a:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.4)}
.wp-page .wr-card,.wp-page .car-card{background:var(--surface)}
.wp-page .lb{background:var(--surface)}
/* ПРОСМОТР КАДРА ВО ВЕСЬ РАЗМЕР. Была почти чёрная заливка
   `rgba(3,6,13,.93)` — на бумажном сайте это единственное чёрное пятно
   («при просмотре фото там все еще остался темный цвет»). Теперь это
   бумажный мат: тёплая полупрозрачная подложка, светлые кнопки, снимок
   лежит на ней с мягкой тенью.
   Заодно починились стрелки: они рисуются `--ink` (тёмные чернила) и на
   чёрном фоне их просто не было — теперь видны. */
.wp-lb{background:rgba(244,241,234,.95);backdrop-filter:blur(6px)}
.wp-lb-media{box-shadow:0 24px 70px -28px rgba(60,40,15,.55)}
.wp-lb-x,.wp-lb-prev,.wp-lb-next{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 3px 0 rgba(27,23,19,.08);
}
.wp-lb-x:hover,.wp-lb-prev:hover,.wp-lb-next:hover{
  border-color:rgba(255,106,26,.45);background:var(--acc-soft);
}
.wp-lb-count{color:var(--ink-2)}

/* ---------- 28. БЛОКИ САЙТА: КАЛЬКУЛЯТОР И ЭКСПРЕСС-ОЦЕНКА ----------
   Эти блоки владелец ставит на главную и на страницы сайта. Поля в них
   были залиты почти чёрным (rgba(6,10,20,.6)) — на бумаге это читалось
   провалами. Краски — как у формы заявки: светлое поле, тонкая рамка,
   тёплое кольцо в фокусе. */
.pg-calc-box{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-card);
}
.calc-step-no{
  color:var(--acc-deep);border:0;background:var(--acc-soft);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.22);
}
/* Цвета названий шагов, шкалы и единицы НЕ перекрываются: их задаёт
   владелец (--calc-step-color, --calc-scale-color), а style.css уже падает
   на «чернильные» --ink-3/--ink-2. Своя краска стёрла бы настройку. */
.calc-chip,.calc-step-btn{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 2px 0 rgba(27,23,19,.05);
}
.calc-chip:hover,.calc-step-btn:hover{color:var(--ink);border-color:rgba(255,106,26,.35)}
.calc-chip[aria-pressed="true"]{
  color:#2c1300;border-color:transparent;
  background:linear-gradient(180deg,#ffb179,#ff7420);
  box-shadow:0 3px 0 rgba(160,55,0,.45);
}
.calc-num,.calc-step-body select{
  background:#fffdf9;color:var(--ink);border:1px solid var(--line);
  box-shadow:inset 0 2px 4px rgba(70,50,25,.05);
}
.calc-num:focus,.calc-step-body select:focus{
  border-color:rgba(255,106,26,.55);
  box-shadow:0 0 0 3px rgba(255,106,26,.14);
}
/* Бегунок объёма. Одного `accent-color` не хватило: цвет заливки он берёт
   из настройки, а КАНАВКУ рисует по цвету текста поля, а он у браузера
   почти чёрный (rgb(16,16,16)). На тёмном сайте это было незаметно, на
   бумаге канавка читалась вырезанной щелью. Поэтому рисуем бегунок сами:
   светлая канавка, оранжевый кружок с белой кромкой. Запасной путь на
   случай, если браузер не знает этих псевдоэлементов, — прежний
   `accent-color` ниже. */
.calc-range input[type="range"]{
  -webkit-appearance:none;appearance:none;
  height:22px;background:transparent;
}
.calc-range input[type="range"]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;background:rgba(27,23,19,.14);
  box-shadow:inset 0 1px 2px rgba(70,50,25,.10);
}
.calc-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-7px;border-radius:50%;
  background:var(--acc);border:2px solid #fff;
  box-shadow:0 2px 6px rgba(120,60,10,.35);
}
.calc-range input[type="range"]::-moz-range-track{
  height:6px;border-radius:999px;background:rgba(27,23,19,.14);
}
.calc-range input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--acc);border:2px solid #fff;
  box-shadow:0 2px 6px rgba(120,60,10,.35);
}
.calc-range input[type="range"]:focus-visible{
  outline:2px solid var(--acc);outline-offset:4px;border-radius:999px;
}
.pg-calc-out{
  border:1px solid rgba(255,106,26,.22);
  background:linear-gradient(150deg,var(--acc-soft),rgba(255,190,130,.14));
}
.pg-calc-out [data-calc-sum]{color:var(--acc-deep)}
.pg-calc-note{color:var(--mute)}

.pg-express .exp-card{
  border:1px solid var(--line);
  background:linear-gradient(168deg,var(--surface) 0%,#fbf6ed 100%);
  box-shadow:var(--sh-card);
}
.exp-eyebrow{
  border:0;background:var(--acc-soft);color:var(--acc-deep);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.22);
}
.exp-drop{
  border-color:rgba(27,23,19,.22);background:rgba(255,253,248,.6);
}
.exp-drop:hover,.exp-drop.over{border-color:var(--acc);background:var(--acc-soft)}
.exp-drop-ico{
  border:0;background:var(--acc-soft);color:var(--acc-deep);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.22);
}
.exp-drop-title{color:var(--ink)}
/* Цвета подписей и подсказок здесь НЕ задаются, и это нарочно: их выбирает
   владелец в панели, а style.css уже читает его значения с запасным
   «чернильным» (var(--exp-lab-color,var(--ink-3))). Своя краска поверх
   стёрла бы настройку — сторож `test-calc-express` ловит это проверкой
   «цвет названий полей взят из настроек». */
.exp-field input,.exp-field textarea{
  background:#fffdf9;border:1px solid var(--line);color:var(--exp-inp-color,var(--ink));
  box-shadow:inset 0 2px 4px rgba(70,50,25,.05);
}
/* Подсказка в пустом поле идёт за цветом текста (так её и задаёт style.css
   через --exp-inp-color): здесь только запасное значение для поля без
   настройки. */
.exp-field input::placeholder,.exp-field textarea::placeholder{
  color:var(--exp-inp-color,var(--ink-3));opacity:var(--exp-inp-op,1);
}
.exp-field input:focus,.exp-field textarea:focus{
  border-color:rgba(255,106,26,.55);
  box-shadow:0 0 0 3px rgba(255,106,26,.14);
}
.exp-chan{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
}
.exp-chan:hover{border-color:rgba(255,106,26,.35);color:var(--ink)}
.exp-chan[aria-pressed="true"]{
  border-color:var(--acc);background:var(--acc-soft);color:var(--ink);
  box-shadow:none;
}
.exp-chan[aria-pressed="true"] b{color:var(--acc-deep)}
.exp-files{color:var(--acc-deep)}
.exp-chan:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* плашки-предупреждения на страницах сайта */
.pg-notice{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.pg-notice[data-tone="info"] .pg-notice-ico{color:var(--acc-deep);border:0;background:var(--acc-soft)}
.pg-notice[data-tone="info"]{border-color:rgba(255,106,26,.24)}

/* ---------- 30. КАРУСЕЛЬ ПУБЛИКАЦИИ (.wp-car) ----------
   Сцена карусели на странице работы была залита почти чёрным
   (#080d17) — на бумаге это читалось прорубленным окном. Заменяем на
   тёплую подложку цеха: снимок лежит на ней, как оттиск на подложке.

   Подложка карточки (.wp-car-bg) — размытая копия самого кадра, и её
   запасной цвет ОБЯЗАН совпадать со сценой. Иначе у видео без постера
   (а его снимает скрипт, и это может не выйти) вокруг кадра проступала
   бы тёмная полоса — ровно то, что владелец однажды уже просил убрать. */
.wp-car{
  background:#efe9dd;
  border:1px solid rgba(27,23,19,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 22px 46px -30px rgba(70,50,25,.6);
}
.wp-car-slide .wp-car-card > .wp-car-bg{background-color:#efe9dd}

/* Счётчик кадров, полоса с точками и стрелки. Все три стояли на
   полупрозрачной темноте — на светлой сцене они превращались в три
   серых пятна, и стрелки переставали читаться как кнопки. */
.wp-car-count{
  color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(27,23,19,.05);
}
.wp-car-dots{background:var(--surface);border:1px solid var(--line)}
.wp-car-dots button::before{background:rgba(27,23,19,.22)}
.wp-car-nav{
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 rgba(27,23,19,.08),
    0 12px 22px -12px rgba(70,50,25,.55);
}
.wp-car-nav:hover{background:var(--acc-soft);color:var(--acc-deep);border-color:rgba(255,106,26,.45)}

/* Срок изготовления и аватар работы в шапке публикации. */
.wp-term{
  color:var(--acc-deep);background:var(--acc-soft);
  border:1px solid rgba(255,106,26,.28);
}
.wp-ava{
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.12);
}

/* ---------- 31. БЛОКИ САЙТА: КАРУСЕЛЬ В ТЕКСТЕ (.rc-*) ----------
   Карусель, которую владелец вставляет внутрь оформленного текста. Её
   стрелки и подпись кадра были рассчитаны на тёмный фон; на бумаге
   стрелка пропадала совсем (тёмный круг без границы читался дырой), а
   подпись кадра стояла на чёрном градиенте. */
.rc-arrow{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 3px 0 rgba(27,23,19,.08),0 12px 22px -14px rgba(70,50,25,.55);
}
.rc-arrow:hover{background:var(--acc-soft);border-color:rgba(255,106,26,.45);color:var(--acc-deep)}
.rc-arrow:disabled:hover{background:var(--surface);border-color:var(--line)}
.rc-slide{background:var(--bg-2)}
/* Полоса карточек объявлена ниже и своим правилом (.rich-carousel.rc-cards
   .rc-slide) — одной строки `.rc-slide` не хватило: точность ниже, и
   карточка оставалась тёмной. */
.rich-carousel.rc-cards .rc-slide{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 rgba(27,23,19,.05),
    0 18px 34px -22px rgba(70,50,25,.55);
}
.rich-carousel[data-rc-anim="lift"] .rc-slide:hover{
  box-shadow:0 6px 0 rgba(255,106,26,.16),0 28px 44px -24px rgba(70,50,25,.6);
  border-color:rgba(255,106,26,.45);
}
/* Подпись кадра: градиент из чёрного в прозрачный давал на светлом кадре
   грязное пятно. Теперь это бумажная плашка снизу — текст читается на
   любом снимке. */
.rc-slide figcaption{
  background:linear-gradient(to top,rgba(255,253,248,.97),rgba(255,253,248,0));
  color:var(--ink);
}
/* ПРОСМОТР КАДРА (.rc-lb) — то самое «чёрное пятно» из письма владельца
   «при просмотре фото там все еще остался темный цвет».
   В style.css это отдельная тёмная сцена: подложка `rgba(3,5,11,.9)`,
   рамка `rgba(7,11,20,.66)`, крестик и стрелки — `rgba(8,13,23,…)`.
   На бумаге она оставалась единственным чёрным прямоугольником во весь
   экран. Теперь это бумажный мат: тёплая подложка, светлая рамка, и снимок
   лежит на ней с мягкой тенью.
   Стрелки и крестик рисуются `--ink` (тёмные чернила) — на чёрном фоне их
   не было видно, на бумаге они читаются сами. */
.rc-lb-back{background:rgba(40,30,20,.44);backdrop-filter:blur(8px)}
.rc-lb-frame{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 30px 80px -34px rgba(60,40,15,.6),var(--sh-card);
}
.rc-lb-x{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}
.rc-lb-x:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.45)}
.rc-lb-nav{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 3px 0 rgba(27,23,19,.08);
}
.rc-lb-nav:hover{background:var(--acc-soft);border-color:rgba(255,106,26,.45);color:var(--acc-deep)}
.rc-lb-bar{border-top:1px solid var(--line)}
.rc-lb-count{color:var(--acc-deep)}
.rc-lb-cap{color:var(--ink-2)}
.wp-page .wp-quote cite{color:var(--acc-deep)}

/* Простая шапка (.wp-nav) — её видит страница, у которой владелец снял
   галочку «Шапка». Это отдельная разметка из server.js, а не вырезанная
   из index.html, поэтому красить её надо здесь. */
.wp-nav{
  background:rgba(244,241,234,.86);
  border-bottom:1px solid rgba(27,23,19,.10);
}
.wp-nav .logo b{color:var(--ink)}
.wp-nav .mark{
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(27,23,19,.12);
}
/* Кнопка «← Все работы» была обведена голубым `rgba(120,160,220,.22)` —
   краской прежней палитры. */
.wp-nav-back{border:1px solid var(--line);color:var(--ink-2)}
.wp-nav-back:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.45);background:var(--acc-soft)}

/* ---------- 32. ЗАКРЫТЫЕ СПИСКИ КРАСОК ИЗ ПАНЕЛИ ----------
   Владелец выбирает цвет из готового списка: пункт меню, кнопка
   «поделиться», строка остатка, артикул, таймер, стрелки. Списки живут в
   style.css и в server.js — здесь НЕ ВТОРОЙ СПИСОК, а перекраска тех же
   имён: значения были подобраны для тёмного фона и на бумаге дают
   контраст ниже 1,5:1 («в наличии» зелёным по кремовому не читается).

   Имена красок остаются прежними — cyan остаётся голубым, mint зелёным.
   Меняется только глубина: светлый оттенок, читаемый на чёрном, на
   бумаге обязан стать темнее. Владелец, выбравший «мятный», по-прежнему
   видит мятный — просто теперь его видно.

   Красим ровно те переменные, которыми ПИШУТ: --nv-c (пункт меню),
   --sh-c (поделиться), --stk-c (остаток), --zoom-c (стрелки просмотра).
   Заливки и свечения (--stk-bg, --stk-line, --stk-glow, --deal-bg,
   --zoom-fill) остаются заводскими: они полупрозрачные и на бумаге
   работают как есть. */
.nav-links [data-color="cyan"]   {--nv-c:#0b7285;--nv-g:rgba(11,114,133,.3)}
.nav-links [data-color="violet"] {--nv-c:#6b3fb5;--nv-g:rgba(107,63,181,.3)}
.nav-links [data-color="magenta"]{--nv-c:#a81f6f;--nv-g:rgba(168,31,111,.3)}
.nav-links [data-color="gold"]   {--nv-c:#8a6100;--nv-g:rgba(138,97,0,.3)}
.nav-links [data-color="emerald"]{--nv-c:#0d6b4a;--nv-g:rgba(13,107,74,.3)}
.nav-links [data-color="ice"]    {--nv-c:#2a6b8a;--nv-g:rgba(42,107,138,.3)}
.nav-links [data-color="sunset"] {--nv-c:#c24405;--nv-g:rgba(194,68,5,.3)}

.wr-share[data-color="cyan"]   {--sh-c:#0b7285}
.wr-share[data-color="violet"] {--sh-c:#6b3fb5}
.wr-share[data-color="magenta"]{--sh-c:#a81f6f}
.wr-share[data-color="gold"]   {--sh-c:#8a6100}
.wr-share[data-color="emerald"]{--sh-c:#0d6b4a}
.wr-share[data-color="ice"]    {--sh-c:#2a6b8a}
.wr-share[data-color="sunset"] {--sh-c:#c24405}

/* Восемь красок магазина. Список селекторов повторяет style.css
   дословно: у каждой краски там тринадцать имён атрибутов, и забыть одно
   значит оставить одну настройку нечитаемой. */
[data-deal-color="amber"],[data-full-color="amber"],
.pm-shot[data-zoom-color="amber"],[data-stock-color="amber"],
[data-sku-color="amber"],[data-promo-color="amber"],
[data-arrow-color="amber"],[data-dots-color="amber"],
[data-grid-color="amber"],[data-row-color="amber"],
[data-review-color="amber"],[data-ship-color="amber"],
[data-bonus-color="amber"]{--stk-c:#9a5b06;--zoom-c:#9a5b06}

[data-deal-color="gold"],[data-full-color="gold"],
.pm-shot[data-zoom-color="gold"],[data-stock-color="gold"],
[data-sku-color="gold"],[data-promo-color="gold"],
[data-arrow-color="gold"],[data-dots-color="gold"],
[data-grid-color="gold"],[data-row-color="gold"],
[data-review-color="gold"],[data-ship-color="gold"],
[data-bonus-color="gold"]{--stk-c:#8a6100;--zoom-c:#8a6100}

[data-deal-color="fire"],[data-full-color="fire"],
.pm-shot[data-zoom-color="fire"],[data-stock-color="fire"],
[data-sku-color="fire"],[data-promo-color="fire"],
[data-arrow-color="fire"],[data-dots-color="fire"],
[data-grid-color="fire"],[data-row-color="fire"],
[data-review-color="fire"],[data-ship-color="fire"],
[data-bonus-color="fire"]{--stk-c:#b5350f;--zoom-c:#b5350f}

[data-deal-color="berry"],[data-full-color="berry"],
.pm-shot[data-zoom-color="berry"],[data-stock-color="berry"],
[data-sku-color="berry"],[data-promo-color="berry"],
[data-arrow-color="berry"],[data-dots-color="berry"],
[data-grid-color="berry"],[data-row-color="berry"],
[data-review-color="berry"],[data-ship-color="berry"],
[data-bonus-color="berry"]{--stk-c:#a3186b;--zoom-c:#a3186b}

[data-deal-color="violet"],[data-full-color="violet"],
.pm-shot[data-zoom-color="violet"],[data-stock-color="violet"],
[data-sku-color="violet"],[data-promo-color="violet"],
[data-arrow-color="violet"],[data-dots-color="violet"],
[data-grid-color="violet"],[data-row-color="violet"],
[data-review-color="violet"],[data-ship-color="violet"],
[data-bonus-color="violet"]{--stk-c:#5b2bb0;--zoom-c:#5b2bb0}

[data-deal-color="sky"],[data-full-color="sky"],
.pm-shot[data-zoom-color="sky"],[data-stock-color="sky"],
[data-sku-color="sky"],[data-promo-color="sky"],
[data-arrow-color="sky"],[data-dots-color="sky"],
[data-grid-color="sky"],[data-row-color="sky"],
[data-review-color="sky"],[data-ship-color="sky"],
[data-bonus-color="sky"]{--stk-c:#1565a8;--zoom-c:#1565a8}

[data-deal-color="mint"],[data-full-color="mint"],
.pm-shot[data-zoom-color="mint"],[data-stock-color="mint"],
[data-sku-color="mint"],[data-promo-color="mint"],
[data-arrow-color="mint"],[data-dots-color="mint"],
[data-grid-color="mint"],[data-row-color="mint"],
[data-review-color="mint"],[data-ship-color="mint"],
[data-bonus-color="mint"]{--stk-c:#0b6b48;--zoom-c:#0b6b48}

[data-deal-color="graph"],[data-full-color="graph"],
.pm-shot[data-zoom-color="graph"],[data-stock-color="graph"],
[data-sku-color="graph"],[data-promo-color="graph"],
[data-arrow-color="graph"],[data-dots-color="graph"],
[data-grid-color="graph"],[data-row-color="graph"],
[data-review-color="graph"],[data-ship-color="graph"],
[data-bonus-color="graph"]{--stk-c:#3f4a5a;--zoom-c:#3f4a5a}

/* ---------- 28б. ОКНО «ВАМ ЕСТЬ 18 ЛЕТ?» ----------
   Владелец (снимок #12): «не видно кнопки и тоже слишком темно».
   Окно ворот осталось ЕДИНСТВЕННЫМ тёмным прямоугольником бумажного сайта:
   `.age-box` залит ночным градиентом `rgba(17,24,41,.99)`, а буквы в нём
   красятся `--ink` (#1b1713) и `--ink-3` (#7c7468) — то есть тёмным по
   тёмному. Заголовок не читался вовсе, а у кнопки «Нет» заливки нет:
   прозрачная на тёмном, она была просто невидима.
   Теперь окно — лист бумаги, как окно товара и окно работы, а кнопки — те же
   две, что у сайта: главная акцентом, вторая контуром. */
.age-back{background:rgba(40,30,20,.44);backdrop-filter:blur(7px)}
.age-box{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 30px 90px -34px rgba(60,40,15,.55),var(--sh-card);
  color:var(--ink);
}
/* Значок «18+» — красная пилюля. Это не «чужой цвет», а знак возраста: он
   красный и в панели, и на карточке товара, и на сайте. Оставляем как есть,
   только убираем свечение, которое на бумаге читалось грязным пятном. */
.age-mark{box-shadow:0 8px 20px -12px rgba(140,20,50,.55)}
.age-title{color:var(--ink)}
.age-text{color:var(--ink-2)}
.age-yes{
  color:#2c1300;
  background:linear-gradient(180deg,#ffa45c 0%,#ff7a28 44%,#f75c0b 100%);
  box-shadow:0 3px 0 rgba(160,55,0,.4),0 10px 22px -14px rgba(180,70,0,.6);
}
.age-yes:hover{box-shadow:0 5px 0 rgba(160,55,0,.35),0 16px 30px -16px rgba(180,70,0,.6)}
.age-no{
  color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 3px 0 rgba(27,23,19,.07);
}
.age-no:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.45);background:var(--acc-soft)}
.age-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* Окно само ставит фокус на «Да» (так надо для клавиатуры), и кольцо фокуса
   видно сразу. У акцентной кнопки кольцо того же цвета, что и заливка,
   читалось светлым ореолом вокруг оранжевого — берём тёмный акцент. */
.age-yes:focus-visible{outline-color:var(--acc-deep)}

/* ---------- 28в. СТРАНИЦА ТОВАРА ----------
   У товара появился свой адрес (/tovar/<слаг>). Оформление — то же, что у
   страницы сайта: бумага, тонкая линия, оранжевый акцент. Отдельного вида
   не заводим: страница товара — часть того же сайта, и посетитель не
   должен чувствовать, что попал в другой магазин. */
.pp-wrap{width:min(1180px,92vw);margin:0 auto;padding:28px 0 72px}

/* Крошки. Название товара в них обрезается многоточием: длинное название
   иначе переносится на три строки и отодвигает товар вниз на телефоне. */
.pp-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.82rem;color:var(--ink-3);margin-bottom:18px}
.pp-crumbs a{color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.pp-crumbs a:hover{color:var(--acc-deep);border-bottom-color:rgba(255,106,26,.45)}
.pp-crumbs i{font-style:normal;opacity:.45}
.pp-crumbs span{color:var(--ink-2);max-width:46ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.pp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:40px;align-items:start}
/* Снимок «прилипает» при прокрутке описания: у товара с длинным текстом
   фотография иначе уезжает вверх, и человек читает описание, не видя, о
   чём оно. На телефоне прилипание снимается — там колонки стоят друг под
   другом, и липкий снимок накрыл бы собой текст. */
.pp-media{position:sticky;top:96px}
.pp-shot{margin:0;border-radius:18px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-card);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.pp-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);display:block}

.pp-info{display:flex;flex-direction:column;gap:14px;min-width:0}
.pp-cat{align-self:flex-start;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-deep);text-decoration:none;
  background:var(--acc-soft);border:1px solid rgba(255,106,26,.3);
  border-radius:999px;padding:5px 11px}
.pp-title{margin:0;font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.15;
  letter-spacing:-.01em;color:var(--ink)}
.pp-sku{font-size:.82rem;color:var(--ink-3)}

.pp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pp-now{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;color:var(--ink);
  letter-spacing:-.02em}
.pp-old{font-size:1.05rem;color:var(--ink-3);text-decoration:line-through}
.pp-save{font-size:.8rem;font-weight:700;color:#2c1300;
  background:linear-gradient(180deg,#ffa45c,#f75c0b);border-radius:999px;padding:3px 9px}
.pp-ask{font-size:1.25rem;color:var(--ink-2)}

/* Наличие: точка цветом плюс слово. Одного цвета мало — при дальтонизме
   зелёная и красная точки неразличимы, а слово читается всегда. */
.pp-stock{font-size:.9rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.pp-stock::before{content:"";width:8px;height:8px;border-radius:50%;
  background:#4f8f4a;box-shadow:0 0 0 3px rgba(79,143,74,.16)}
.pp-stock.is-out{color:var(--ink-3)}
.pp-stock.is-out::before{background:#b4553a;box-shadow:0 0 0 3px rgba(180,85,58,.14)}

.pp-buyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.pp-buy{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;
  font-size:.98rem;padding:14px 26px;border-radius:12px;color:#2c1300;
  background:linear-gradient(180deg,#ffa45c 0%,#ff7a28 44%,#f75c0b 100%);
  box-shadow:0 3px 0 rgba(160,55,0,.4),0 10px 22px -14px rgba(180,70,0,.6);
  text-decoration:none;display:inline-flex;align-items:center}
.pp-buy:hover{filter:brightness(1.04)}
.pp-buy:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(160,55,0,.4)}
.pp-buy:focus-visible{outline:2px solid var(--acc-deep);outline-offset:3px}
.pp-all{font-size:.92rem;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.pp-all:hover{color:var(--acc-deep);border-bottom-color:rgba(255,106,26,.5)}

.pp-specs{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:10px 0 0;
  padding:16px 18px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px}
.pp-specs dt{font-size:.84rem;color:var(--ink-3)}
.pp-specs dd{margin:0;font-size:.9rem;color:var(--ink)}

.pp-text{margin-top:44px;max-width:78ch}
.pp-text h2,.pp-more h2{font-size:1.25rem;color:var(--ink);margin:0 0 12px}
.pp-rich{font-size:1rem;line-height:1.68;color:var(--ink-2)}
.pp-rich p{margin:0 0 12px}
.pp-rich b,.pp-rich strong{color:var(--ink)}
.pp-rich img{max-width:100%;height:auto;border-radius:12px}

/* Другие товары. Это внутренние ссылки каталога: по ним робот обходит
   товары, а человек не уходит с сайта на первом же. */
.pp-more{margin-top:44px}
.pp-more ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px}
.pp-more a{display:block;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;color:var(--ink);
  text-decoration:none;font-size:.92rem;line-height:1.35;
  transition:border-color .18s,color .18s}
.pp-more a:hover{border-color:rgba(255,106,26,.45);color:var(--acc-deep)}

/* Строка под витриной: переход ко всем товарам. Отдельная от карусели
   нарочно — витрина рисуется скриптом, а ссылка должна быть в разметке,
   чтобы её увидел робот, который скрипты не выполняет. */
.shop-all-row{display:flex;justify-content:center;margin-top:26px}
.shop-all-link{display:inline-flex;align-items:center;gap:9px;
  font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:none;
  padding:11px 20px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 3px 0 rgba(27,23,19,.07);
  transition:color .18s,border-color .18s,transform .18s}
.shop-all-link span{transition:transform .18s}
.shop-all-link:hover{color:var(--acc-deep);border-color:rgba(255,106,26,.45)}
.shop-all-link:hover span{transform:translateX(3px)}
.shop-all-link:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* Каталог (/tovar): сетка карточек-ссылок. Здесь товар — обычная ссылка,
   а не кнопка витрины, поэтому каталог и существует отдельно. */
.pp-cat-head{margin-bottom:26px}
.pp-lead{margin:10px 0 0;max-width:62ch;font-size:1.02rem;line-height:1.6;
  color:var(--ink-2)}
.pp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pp-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:10px;box-shadow:var(--sh-card);
  transition:border-color .18s,transform .18s}
.pp-card:hover{border-color:rgba(255,106,26,.45);transform:translateY(-2px)}
.pp-card-shot{display:block;aspect-ratio:1/1;border-radius:11px;
  overflow:hidden;background:var(--bg-2)}
.pp-card-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pp-card-name{font-size:.92rem;line-height:1.35;color:var(--ink)}
.pp-card-price{font-size:1rem;font-weight:700;color:var(--ink)}
.pp-card:hover .pp-card-name{color:var(--acc-deep)}
@media (max-width:1080px){.pp-cards{grid-template-columns:repeat(3,1fr)}}

@media (max-width:900px){
  .pp-grid{grid-template-columns:1fr;gap:24px}
  .pp-media{position:static}
  .pp-more ul{grid-template-columns:repeat(2,1fr)}
  .pp-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .pp-wrap{padding:18px 0 56px}
  .pp-thumbs{grid-template-columns:repeat(4,1fr)}
  .pp-more ul{grid-template-columns:1fr}
}

/* ---------- 29. АДАПТИВ ---------- */
@media (max-width:1080px){
  .hero{padding-top:120px}
  .hero-in{grid-template-columns:1fr;gap:48px}
  .hero-visual{order:-1}
  .coin-stage{width:min(380px,72vw)}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:20px 20px}
  #floatCards{max-width:420px}
}
@media (max-width:720px){
  .filament{display:none}
  .hero{padding-top:110px;padding-bottom:52px;min-height:0}
  .hero h1{font-size:clamp(28px,8.2vw,44px)}
  .hero .eyebrow{height:32px;padding:0 12px;font-size:9.5px;letter-spacing:.1em;margin-bottom:22px}
  .hero .lead{font-size:15px;margin-top:20px}
  .hero-cta .btn{flex:1 1 auto}
  .coin-stage{width:min(300px,78vw)}
  .coin-hint{font-size:9px;letter-spacing:.12em}
  .coin-bed{bottom:2%}
  .hero-stats{grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:36px}
  .hstat b{font-size:19px}
  .float-card .v{font-size:13px}
  /* Облако на телефоне: колонка узкая, и плашка в 156 px заняла бы
     половину кольца. Меньше карточка — больше воздуха между соседями.
     Размах кольца при этом считает js/main.js по ширине колонки.
     display:block обязателен: в style.css есть
     «.float-card:nth-child(n+4){display:none}» — старое правило сетки,
     где на телефон помещались только три плашки. В облаке кольцо
     растягивается на все, и прятать четвёртую незачем. */
  #floatCards.is-cloud .float-card{width:104px;padding:7px 9px;border-radius:9px;display:block}
  #floatCards.is-cloud .float-card .k{font-size:7px;letter-spacing:.1em}
  #floatCards.is-cloud .float-card .v{font-size:10.5px;margin-top:3px}
  .sec-head h2{font-size:clamp(26px,7.4vw,36px)}
  .sec-head .lead{font-size:14.5px}
  .marquee-track span{font-size:20px}
  .card{padding:28px 24px 24px}
  .btn{height:52px;padding:0 20px;font-size:14px}
  .btn-lg{height:56px}
}

@media (prefers-reduced-motion:reduce){
  .coin-stage{animation:none}
  .coin-halo,.coin-bed,.hint-dot,.hero .eyebrow::before{animation:none}
  .btn::before{display:none}
}