/*
Theme Name: TapLike Ru
Theme URI: https://taplike.help/
Description: Тема сайта TapLike Ru. Язык дизайна «Пульт заказа».
Author: TapLike Ru
Version: 1.0.0
*/

/* =====================================================================
   КОНТРАКТ НАПРАВЛЕНИЯ — выбран владельцем 21.09.2026 из пяти вариантов
   (страница сравнения design-variants\taplike\, рулетка impeccable,
   ключ броска 3b63e7ce, выпали индексы 5/3/2; владелец взял собственный
   выбор агента — «Пульт заказа», индекс 1).

   THESIS
   Сайт не рассказывает про услугу, а даёт её собрать. Отказывается
   от лендинга, который уговаривает раньше, чем покажет цену.

   OWN-WORLD
   Тёплая панель пульта на холодной бумаге. Клавиши площадок,
   сегментные переключатели тарифа, синий итог. Узнаётся с убранным
   текстом по ряду клавиш и утопленным сегментам.

   STORY
   Посетитель пришёл с нишевого запроса и не знает бренда. За четыре
   касания он получает цену своего случая и уходит по кнопке.

   FIRST VIEWPORT
   Строка шапки со знаком слева и реф-кнопкой справа, заголовок в две
   строки, лид, пульт целиком. Кнопка вне бургера на любой ширине.

   FORM
   Клавиша и сегментный переключатель. Один масштаб скруглений — 3px,
   кроме клавиш пульта (0). Один акцент действия — оранжевый.
   ===================================================================== */

/* ---------- токены ---------- */
:root{
  /* палитра снята из собственных CSS-переменных taplike.ru,
     а не пипеткой: --color-bg-btn-cta, --color-blue-700, --color-blue-gray-900 */
  --act:#FF912A;
  /* #D9700C давал 3,3:1 на белом и не проходил порог 4,5 — затемнён до 5,0:1.
     Токен работает и подписью на белом, и заливкой кнопки под белым текстом. */
  --act-deep:#A65B00;
  --act-pale:#FFF1E0;
  --blue:#1565B0;
  --blue-mid:#1C7ED6;
  --blue-pale:#E7F2FC;
  --ink:#1E2A30;
  --ink-2:#3E5058;
  --mute:#5F7480;
  --line:#D3E2EE;
  --line-soft:#E6EFF6;
  --paper:#F3FAFF;
  --warm:#FFFAF3;
  --warm-2:#FDF2E2;
  --white:#fff;
  --ok:#1F7A4C;
  --warn:#B23C1E;

  --f-text:'Finlandica',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-disp:'Alice','Finlandica',Georgia,serif;

  --hull:1460px;
  --gutter:28px;
  /* Подобрано замером отданной страницы, а не переносом «75ch» из рекомендации:
     у Finlandica нуль узкий относительно кириллической строчной, и 58ch давали
     92 знака в строке. 48ch дают около 76. */
  --col:48ch;
  --r:3px;
  --head-h:74px;
}

/* ---------- фоновый слой ----------
   Лежит под содержимым, ввод не перехватывает: ни клик по клавише пульта,
   ни фокус, ни протяжка ползунка количества до него не доходят.
   Непрозрачные секции (.band--warm, .band--ink, .pad, .rack, .plate, .foot)
   закрывают слой собой — фон дышит там, где видна бумага, и не лезет под
   плотные таблицы цен. Формы слоя светлее бумаги, поэтому контраст
   наборного текста от него не падает (пояснение и числа — в bg.js). */
.tplbg{position:fixed;inset:0;z-index:0;pointer-events:none}
.tplbg canvas{display:block;width:100%;height:100%}
#main,.foot{position:relative;z-index:1}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:2px}
a:hover{color:var(--act-deep)}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:400;line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.25rem + 2.3vw,3.05rem);letter-spacing:-.005em}
h2{font-size:clamp(1.45rem,1.1rem + 1.35vw,2.15rem);margin-top:0}
h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin-bottom:.35em}
::selection{background:var(--act);color:#2B1600}
:focus-visible{outline:2px solid var(--blue-mid);outline-offset:2px}
html{scrollbar-color:var(--line) var(--paper)}

.wrap{width:min(100% - (var(--gutter) * 2),var(--hull));margin-inline:auto}
.wrap--text{max-width:var(--col)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- шапка ---------- */
.mast{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:40}
.mast__in{display:flex;align-items:center;gap:22px;min-height:var(--head-h);padding:10px 0}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.mark__sign{width:30px;height:30px;flex:0 0 auto}
.mark__tx{font-family:var(--f-disp);font-size:21px;letter-spacing:-.01em;white-space:nowrap}
.mark__tx i{font-style:normal;color:var(--act-deep)}
.mark__ru{color:var(--mute);font-size:15px}
.nav{display:flex;flex-wrap:wrap;gap:2px 16px;margin-left:4px;min-width:0}
.nav a{font-size:15px;color:var(--ink-2);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav a.on{color:var(--ink);border-bottom-color:var(--act)}
.mast__cta{margin-left:auto;flex:0 0 auto}
.burger{display:none;margin-left:8px;flex:0 0 auto;width:42px;height:38px;border:1px solid var(--line);background:var(--white);border-radius:var(--r);padding:0;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);margin:3px auto}
.drawer{display:none}
.drawer[data-open="1"]{display:block;border-bottom:1px solid var(--line);background:var(--white);max-height:calc(100dvh - var(--head-h));overflow-y:auto;overscroll-behavior:contain}
.drawer ul{list-style:none;margin:0;padding:10px 0 18px;display:grid;grid-template-columns:minmax(0,1fr)}
.drawer li{margin:0}
.drawer a{display:block;padding:10px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2);text-decoration:none}
.drawer a.on{color:var(--ink)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-text);font-size:16px;font-weight:700;
  padding:12px 22px;border-radius:var(--r);border:1px solid transparent;
  background:var(--act);color:#2B1600;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--act-deep);color:#fff;transform:translateY(-1px)}
.btn--sm{font-size:14.5px;padding:9px 15px}
.btn--xs{font-size:13.5px;padding:7px 12px;white-space:nowrap}
.btn--ghost{background:transparent;color:var(--blue);border-color:var(--line);font-weight:400}
.btn--ghost:hover{background:var(--blue-pale);color:var(--blue);border-color:var(--blue-mid)}
.btn__short{display:none}

/* ---------- секции ---------- */
.band{padding:clamp(40px,3.2vw,64px) 0}
.band--warm{background:var(--warm)}
.band--ink{background:var(--ink);color:#DCE8EE}
.band--ink h2,.band--ink h3{color:#fff}
/* :not(.btn) обязательно: без него правило перекрашивает подпись реф-кнопки
   по специфичности (0,2,0 против 0,1,0) и даёт 1,5:1 светлым по оранжевому.
   Это типовой дефект сетки, он же ловится в подвале ниже. */
.band--ink a:not(.btn){color:#FFC98A}
.band__lead{max-width:var(--col);color:var(--ink-2);font-size:18px}
.band--ink .band__lead{color:#B6C8D1}

/* Длина строки. Кириллическая строчная уже нуля, поэтому «75ch» дало бы около
   90 знаков: порог подобран замером, а не переносом числа из рекомендации.
   Ограничитель вешается на прозу, но не на сетки, таблицы и стойку прайса —
   им ширина контейнера нужна целиком. */
.band > .wrap > p,
.band > .wrap > ul,
.band > .wrap > ol,
.hero > .wrap > p,
.score p,
.plate p,
.qa__a,
.qa__a p{max-width:var(--col)}
.foot__note p{max-width:80ch}

/* ---------- ПУЛЬТ: несущая форма темы ---------- */
.hero{padding:clamp(34px,2.6vw,54px) 0 clamp(40px,3vw,60px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
@media(min-width:1024px){.hero__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:44px}}
.hero__lead{font-size:19px;color:var(--ink-2);max-width:44ch}
.hero__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
@media(min-width:600px){.hero__facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact__n{font-family:var(--f-disp);font-size:26px;color:var(--blue);display:block;line-height:1.1}
.fact__t{font-size:13.5px;color:var(--mute);display:block;margin-top:2px}

.pad{background:var(--warm);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,1.4vw,24px)}
.pad__ttl{font-family:var(--f-text);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--mute);margin:0 0 12px;text-transform:none}
.pad__keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:16px}
@media(min-width:480px){.pad__keys{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:720px){.pad__keys{grid-template-columns:repeat(5,minmax(0,1fr))}}
.key{
  border:1px solid var(--line);background:var(--white);border-radius:0;
  font:inherit;font-size:14px;padding:11px 6px;text-align:center;color:var(--ink-2);
  cursor:pointer;min-width:0;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease;
}
.key:hover{border-color:var(--blue-mid);color:var(--ink)}
.key[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(1px)}
.pad__row{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin-bottom:14px}
@media(min-width:600px){.pad__row{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px}}
.pad__lbl{font-size:13.5px;color:var(--mute)}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.seg button{font:inherit;font-size:14px;padding:9px 14px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;flex:1 1 auto;min-width:0;transition:background-color .16s ease}
.seg button:hover{background:var(--blue-pale)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pad__qty{display:flex;align-items:center;gap:12px}
.pad__qty input[type="range"]{flex:1 1 auto;min-width:0;accent-color:var(--blue)}
.pad__qtyv{font-family:var(--f-disp);font-size:20px;min-width:5.5ch;text-align:right;color:var(--ink)}
.pad__out{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;border-top:1px dashed var(--line);padding-top:15px;margin-top:4px}
.pad__sum{font-family:var(--f-disp);font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem);color:var(--blue);line-height:1}
.pad__note{font-size:13.5px;color:var(--mute);flex:1 1 14ch;min-width:0}
.pad__go{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pad__hint{font-size:13px;color:var(--mute);margin:10px 0 0;max-width:var(--col)}

/* ---------- стойка прайса ---------- */
.rack{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.rack__h{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem 8.5rem;gap:10px;padding:10px 16px;background:var(--blue-pale);font-size:13px;color:var(--ink-2);font-weight:700}
.rack__r{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem 8.5rem;gap:10px;padding:11px 16px;border-top:1px solid var(--line-soft);font-size:15.5px;align-items:baseline}
.rack__r:hover{background:var(--warm)}
.rack__nm{min-width:0}
.rack__pr{font-family:var(--f-disp);font-size:17px;color:var(--ink);white-space:nowrap}
.rack__lim{font-size:13.5px;color:var(--mute);white-space:nowrap}
.rack__grp{padding:13px 16px 6px;font-family:var(--f-disp);font-size:18px;color:var(--blue);border-top:1px solid var(--line)}
.rack__grp:first-child{border-top:0}
@media(max-width:600px){
  .rack__h{display:none}
  .rack__r{grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 14px}
  .rack__pr::before{content:"цена за 1 шт: ";font-family:var(--f-text);font-size:13px;color:var(--mute)}
  .rack__lim::before{content:"объём: ";color:var(--mute)}
}

/* ---------- плиты ---------- */
.plates{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:720px){.plates--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:880px){.plates--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.plates--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plate{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0;transition:transform .18s ease,border-color .18s ease}
.plate:hover{transform:translateY(-2px);border-color:var(--blue-mid)}
.plate h3{margin-top:0}
.plate p:last-child{margin-bottom:0}
.plate__n{font-family:var(--f-disp);font-size:30px;color:var(--blue);line-height:1;display:block;margin-bottom:6px}
.plate--warm{background:var(--warm)}

/* тарифная карточка — у каждой своя кнопка */
.tier{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.tier--pick{border-color:var(--act);box-shadow:inset 0 0 0 1px var(--act)}
.tier__nm{font-family:var(--f-disp);font-size:22px;margin:0 0 4px}
.tier__pr{font-family:var(--f-disp);font-size:29px;color:var(--blue);margin:8px 0 2px}
.tier__u{font-size:13.5px;color:var(--mute);margin-bottom:12px}
.tier ul{list-style:none;padding:0;margin:0 0 18px;font-size:15.5px}
.tier li{padding-left:18px;position:relative;margin-bottom:6px}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--act);border-radius:50%}
.tier .btn{margin-top:auto;width:100%}

/* ---------- врезка ----------
   Цветной полосы слева намеренно нет: это признак шаблонной вёрстки, и той же
   формой (border-left) уже занят hidemyname.help в сетке. Врезка опознаётся
   квадратным маркером пульта и тёплой подложкой. */
.note{background:var(--warm);border:1px solid var(--line);padding:15px 18px 15px 40px;margin:22px 0;border-radius:var(--r);position:relative}
.note::before{content:"";position:absolute;left:18px;top:23px;width:8px;height:8px;background:var(--act)}
.note p{max-width:var(--col)}
.note p:last-child{margin-bottom:0}
.note--blue{background:var(--blue-pale);border-color:#BEDCF5}
.note--blue::before{background:var(--blue)}

/* ---------- таблицы ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15.5px}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{background:var(--blue-pale);font-weight:700;font-size:13.5px}
td b{font-family:var(--f-disp);font-weight:400;font-size:16.5px}
@media(max-width:640px){
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;background:var(--white);padding:4px 0}
  td{border:0;padding:7px 14px}
  td::before{content:attr(data-label) ": ";color:var(--mute);font-size:13.5px}
}

/* ---------- аккордеон ---------- */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;padding:15px 0;font-family:var(--f-disp);font-size:18px;list-style:none;display:flex;gap:12px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+";color:var(--act-deep);flex:0 0 auto;font-family:var(--f-text)}
.qa details[open] summary::before{content:"–"}
.qa__a{padding:0 0 16px 24px;color:var(--ink-2)}
.qa__a p:last-child{margin-bottom:0}

/* ---------- отзывы и оценка ---------- */
.voices{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:720px){.voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.voices{grid-template-columns:repeat(4,minmax(0,1fr))}}
.voice{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;display:flex;flex-direction:column}
.voice__tx{font-size:15.5px;margin:0 0 12px;flex:1 1 auto;max-width:var(--col)}
.voice__by{font-size:14px;color:var(--mute);font-style:normal}
.voice__by b{color:var(--ink);font-weight:700;display:block;font-size:15px}
.stars{display:inline-block;position:relative;font-size:15px;line-height:1;color:var(--line);margin-bottom:10px}
.stars i{display:block;position:absolute;left:0;top:0;overflow:hidden;color:var(--act);white-space:nowrap}
.stars svg{width:15px;height:15px;fill:currentColor;display:inline-block;vertical-align:top}

.score{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
@media(min-width:880px){.score{grid-template-columns:200px minmax(0,1fr);gap:34px}}
.score__big{font-family:var(--f-disp);font-size:58px;color:var(--blue);line-height:1}
.crit{display:grid;gap:9px}
.crit__r{display:grid;grid-template-columns:minmax(0,1fr) 3.2rem;gap:12px;align-items:center;font-size:15.5px}
.crit__bar{grid-column:1 / -1;height:5px;background:var(--line-soft);border-radius:99px;overflow:hidden}
.crit__bar i{display:block;height:100%;background:var(--blue-mid)}
.crit__v{font-family:var(--f-disp);font-size:17px;text-align:right}

/* ---------- перелинковка ---------- */
.onward{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:720px){.onward{grid-template-columns:repeat(3,minmax(0,1fr))}}
.onward a{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;text-decoration:none;color:var(--ink);transition:transform .18s ease,border-color .18s ease}
.onward a:hover{transform:translateY(-2px);border-color:var(--blue-mid)}
.onward b{display:block;font-family:var(--f-disp);font-weight:400;font-size:17px;margin-bottom:3px}
.onward span{font-size:14px;color:var(--mute)}

/* ---------- подвал ---------- */
.foot{background:var(--ink);color:#B6C8D1;padding:44px 0 30px;margin-top:10px}
.foot__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media(min-width:880px){.foot__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}}
.foot h3{color:#fff;font-size:17px;margin-bottom:10px}
.foot p{max-width:var(--col)}
.foot ul{list-style:none;padding:0;margin:0;font-size:15px}
.foot li{margin-bottom:7px}
/* Та же оговорка, что и у .band--ink: без :not(.btn) подпись кнопки в подвале
   красится цветом текста подвала прямо по фирменному фону. */
.foot a:not(.btn){color:#CBDCE4;text-decoration:none}
.foot a:not(.btn):hover{color:#fff;text-decoration:underline}
.foot .btn{margin-top:22px}
.foot__note{margin-top:30px;padding-top:18px;border-top:1px solid #33454E;font-size:14px;color:#8CA3AE}
.foot__note p{margin:0 0 6px}
.meta-note{font-size:13.5px;color:#7E96A2}

/* ---------- 404 ---------- */
.lost{padding:clamp(48px,5vw,90px) 0}
.lost__n{font-family:var(--f-disp);font-size:clamp(3.4rem,2rem + 6vw,6rem);color:var(--act);line-height:1}

/* ---------- лесенка жертв на узких экранах ---------- */
@media(max-width:1024px){
  .nav{display:none}
  .burger{display:block}
  .mast__in{gap:12px}
}
@media(max-width:600px){
  :root{--gutter:18px}
  body{font-size:16.5px}
}
@media(max-width:480px){
  .btn__full{display:none}
  .btn__short{display:inline}
  .btn{padding:11px 16px;font-size:15px}
}
@media(max-width:400px){
  :root{--gutter:14px;--head-h:66px}
  .mast__in{gap:8px}
  .mark__sign{width:26px;height:26px}
  .mark__tx{font-size:19px}
}
@media(max-width:345px){
  .mark__ru{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}