/* ===========================================================
   ТЕХНЕРУД — design system (red #CE001A, Woodmart-grade)
   Source: claude.ai/design project "Технеруд" (footer.html, forms.html).
   Adapted for the live WP theme: brand RED, theme fonts (bebasneuecyrillic
   display + Manrope/Raleway body — no external Google Fonts), all rules
   SCOPED under .footer-region / .tnr so generic class names
   (field, card, success, dropdown, panel, banner, popup__block …) never
   leak into the rest of the theme.
   Section 1: tokens + primitives (shared).  Section 2: footer surface.
   Forms/modal surface is appended in the forms phase.
   =========================================================== */

/* ============================================================
   GLOBAL BRAND SCROLLBARS (red #CE001A) — intentionally UN-scoped:
   this styles the document chrome, not a .tnr/.footer surface.
   The ::-webkit-scrollbar rules are UNPREFIXED because Safari has no
   scrollbar-color and maps the page scrollbar to body (not html), and
   older Chromium forks (Yandex) need the pseudo rules on the actual
   scroller. Chromium 121+ uses the inherited scrollbar-color instead.
   Containers that hide their bar keep display:none by specificity.
   Mirrored inline in head.php (#tnr-scrollbar) for cache-proof paint.
   ============================================================ */
html{ scrollbar-width:thin; scrollbar-color:#CE001A #F0EEEE; }            /* Firefox / Chromium 121+ */
::-webkit-scrollbar{ width:10px; height:10px; }                           /* Safari / older Blink */
::-webkit-scrollbar-track{ background:#F0EEEE; }
::-webkit-scrollbar-thumb{ background:#CE001A; border-radius:8px; border:2px solid #F0EEEE; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:#A80015; background-clip:padding-box; }
::-webkit-scrollbar-corner{ background:#F0EEEE; }

/* ---- tokens (scoped, do not leak to :root) ---- */
.footer-region, .tnr{
  /* brand */
  --main:#CE001A; --main-dk:#A80015; --red:#CE001A;
  /* state */
  --error:#F63123; --error-bg:#FDECEC; --error-bd:#F6C5C0;
  --suc-bg:#EAF8EC; --suc-tx:#1f9f27;
  /* neutrals (light) */
  --text:#1C1C1C; --muted:#6C6C6C; --ph:#999999;
  --bd:#E0E0E0; --bd-h:#CFCFCF; --hair-l:#ECECEC;
  --surface:#FFFFFF; --tint:#F7F8F7;
  /* radius (sharp, industrial) */
  --r-field:0; --r-modal:0; --r-card:0; --r-img:0; --r-file:0; --r-cb:0;
  /* shadow */
  --sh-card:0 16px 44px -22px rgba(18,26,36,.20);
  --sh-lift:0 4px 12px rgba(0,0,0,.15);
  --sh-modal:0 5px 30px rgba(0,0,0,.15);
  --sh-btn:0 2px 6px rgba(0,0,0,.12);
  --sh-drop:0 8px 24px rgba(0,0,0,.12);
  --ring:0 0 0 3px rgba(206,0,26,.18);
  --ring-strong:0 0 0 3px rgba(206,0,26,.35);
  /* type — mapped to the theme's own fonts */
  --disp:'bebasneuecyrillic','Oswald',system-ui,sans-serif;
  --body:'Manrope','Raleway','Inter',system-ui,sans-serif;
  /* ---- forms-phase aliases (bridge the claude-design names to the live tokens
     above so the ported field/modal CSS resolves without a second palette) ---- */
  --accent:var(--main); --accent-dk:var(--main-dk); --on-accent:#fff;
  --fg:var(--text); --fg-soft:#46413A; --muted-2:#A8A199;
  --line:var(--hair-l); --line-2:var(--bd);
  --surface-2:#F0EFEC; --surface-3:#E4E1DC;
  --ok:var(--suc-tx); --ok-bg:var(--suc-bg);
  --err:var(--error); --err-bg:var(--error-bg); --err-bd:var(--error-bd);
  /* messenger brand */
  --wa:#25D366; --tg:#229ED9; --vb:#7360F2;
  /* modal-specific shadows */
  --sh-modal-strong:0 30px 80px rgba(8,10,12,.40);
  --sh-drop2:0 18px 44px rgba(20,20,18,.12);
}

.footer-region *, .tnr *{box-sizing:border-box}

/* ---- icons ---- */
.footer-region svg.ic, .tnr svg.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.footer-region svg.ic-f, .tnr svg.ic-f{fill:currentColor;stroke:none}

/* ---- primary button (.md-btn) ---- */
.footer-region .md-btn, .tnr .md-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:60px;padding:0 30px;border:none;border-radius:var(--r-field);
  background:var(--main);color:#fff;font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:.01em;cursor:pointer;box-shadow:var(--sh-btn);
  transition:transform .15s,background .15s,box-shadow .2s;white-space:nowrap;text-decoration:none}
.footer-region .md-btn:hover, .tnr .md-btn:hover{background:var(--main-dk);transform:translateY(-1px);color:#fff}
.footer-region .md-btn:active, .tnr .md-btn:active{transform:translateY(0)}
.footer-region .md-btn::after, .tnr .md-btn::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.40),transparent);transform:skewX(-20deg)}
.footer-region .md-btn:hover::after, .tnr .md-btn:hover::after{animation:tnr-sheen .6s ease}
@keyframes tnr-sheen{from{left:-60%}to{left:130%}}
.footer-region .md-btn .ic, .tnr .md-btn .ic{width:20px;height:20px}
.tnr .md-btn--full{width:100%}
.tnr .md-btn--lg{height:64px;font-size:18px;padding:0 38px}
.tnr .md-btn.is-disabled{background:#E7AAB0;cursor:not-allowed;box-shadow:none}
.tnr .md-btn.is-disabled::after{display:none}
.tnr .md-btn.is-loading{pointer-events:none}
.tnr .md-btn.is-loading .lbl{visibility:hidden}
.tnr .md-btn .spin{position:absolute;width:22px;height:22px;animation:tnr-spin .8s linear infinite}
@keyframes tnr-spin{to{transform:rotate(360deg)}}

/* ===========================================================
   Section 2 - FOOTER surface
   The footer's own skin now lives inline in footer.php (2026-08 brand book, ported from
   docs/design/footer-2026-08/). WP Rocket keeps a stable name for the combined stylesheet
   for 7 days, so footer rules travel with the markup instead. Only the two structural
   rules that are not part of the skin stay here.
   =========================================================== */
.footer-region{overflow:hidden}
/* Desktop: header3 reserves a 60px fixed left sidebar via an inline `body{margin-left:60px}`
   (zeroed <=768px). That body margin ALREADY offsets the normal-flow footer to the right of the
   sidebar, so the footer only needs full body width (width:100%). It must NOT also subtract 60px:
   doing so left a 60px empty strip on the right, making the footer narrower than the header.
   Matches the inline rule's 769px breakpoint. */
@media (min-width:769px){ .footer-region{ width:100%; } }

@media (prefers-reduced-motion:reduce){
  .tnr .md-btn,.tnr .md-btn:hover{transition:none}
  .tnr .md-btn::after,.tnr .md-btn:hover::after{animation:none}
}

/* ===========================================================
   Floating video-widget (index.php) — mobile correctness.
   Pairs with the main.js touchend fix. Targets the widget's own (unique) classes,
   intentionally NOT scoped under .tnr.
   A — stop the "jump": the :hover{scale+translate} sticks on touch; the preview also
       overlapped the fixed bottom bar (.h3-bottom-bar, 56px, z-index:350 > widget z 25).
   B — make it reliably tappable: lift the widget above the bottom bar's stacking + clear of it.
   =========================================================== */
@media (max-width:768px){
  .video-widget{ z-index:360; }                 /* above .h3-bottom-bar (z-index:350) */
  .video-widget__container{
    left:15px;
    bottom:calc(56px + 16px + env(safe-area-inset-bottom, 0px)); /* sit above the 56px bottom bar */
  }
  /* never let the opened widget overflow short/landscape screens; keep the × reachable */
  .video-widget.video-widget[data-state=opened] .video-widget__container{
    height:min(500px, calc(100dvh - 96px));
  }
}
@media (hover:none){
  /* touch devices: kill ONLY the sticky hover transform that caused the jump on tap (keep border) */
  .video-widget__container:hover{ transform:none !important; }
}

/* ===========================================================
   Section 3 — FORMS + MODAL surface  (claude.ai/design forms.html)
   Industrial restyle: red accent, sharp corners, thin lines.
   ALL rules scoped under .tnr so generic names (field, pill, consent,
   popup__head …) never leak. Popups reuse the theme's existing
   .popup/.popup.open/.popup__blur engine (main.css) — here we only
   restyle the inner .popup__block and add head/body/foot + the field
   components. Fonts stay the theme's own (--disp/--body).
   =========================================================== */

/* ---- field component ---- */
.tnr .field{display:flex;flex-direction:column;gap:7px;text-align:left}
.tnr .field__label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.tnr .field__label .req{color:var(--accent);margin-left:2px}
.tnr .field__control{position:relative;display:flex;align-items:center;height:56px;padding:0 16px;gap:11px;background:#fff;border:1px solid var(--line-2);border-radius:0;transition:border-color .15s,box-shadow .15s}
.tnr .field__control .lead{color:var(--muted);display:flex}.tnr .field__control .lead .ic{width:19px;height:19px}
.tnr .field__control .trail{display:flex;color:var(--muted);align-items:center}.tnr .field__control .trail .ic{width:19px;height:19px}
.tnr .field__control input,.tnr .field__control .val{flex:1;border:none;outline:none;background:none;font-family:var(--body);font-size:16px;font-weight:500;color:var(--fg);min-width:0}
.tnr .field__control input::placeholder{color:var(--muted-2);font-weight:500}
.tnr .field__control .val.ph{color:var(--muted-2)}
.tnr .field:hover .field__control{border-color:var(--bd-h)}
.tnr .field.is-focus .field__control{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tnr .field.is-focus .field__label{color:var(--accent-dk)}
.tnr .field.is-invalid .field__control{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.tnr .field.is-invalid .trail{color:var(--err)}
.tnr .field.is-valid .trail{color:var(--ok)}
.tnr .field.is-disabled .field__control{background:var(--tint);border-color:var(--line);pointer-events:none}
.tnr .field.is-disabled input,.tnr .field.is-disabled .val{color:var(--muted-2)}
.tnr .field__msg{font-size:12px;color:var(--muted);line-height:1.35;display:flex;align-items:center;gap:6px;min-height:0}
.tnr .field__msg .ic{width:14px;height:14px;flex:none}
.tnr .field__msg.err{color:var(--err)}
.tnr .field--ta .field__control{height:auto;align-items:stretch;padding:14px 16px}
.tnr .field--ta textarea{flex:1;border:none;outline:none;resize:vertical;min-height:104px;font-family:var(--body);font-size:16px;font-weight:500;color:var(--fg);background:none;line-height:1.5}
.tnr .field--ta textarea::placeholder{color:var(--muted-2)}
.tnr .field__control .chev{transition:transform .2s}
.tnr .field.is-open .field__control .chev{transform:rotate(180deg)}
.tnr .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---- select + searchable dropdown ---- */
.tnr .field-select{position:relative}
.tnr .field-select .field__control{cursor:pointer}
.tnr .dropdown{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line-2);border-radius:0;box-shadow:var(--sh-drop2);overflow:auto;max-height:300px;display:none}
.tnr .field-select.is-open .dropdown{display:block}
.tnr .dropdown .opt,.tnr .dropdown .opt-rich{display:flex;align-items:center;gap:11px;padding:12px 16px;font-family:var(--body);font-size:14.5px;font-weight:500;cursor:pointer;transition:.12s;color:var(--fg)}
.tnr .dropdown .opt .ic,.tnr .dropdown .opt-rich .ic{width:20px;height:20px;color:var(--muted)}
.tnr .dropdown .opt:hover,.tnr .dropdown .opt-rich:hover{background:var(--tint);color:var(--accent)}
.tnr .dropdown .opt:hover .ic,.tnr .dropdown .opt-rich:hover .ic{color:var(--accent)}
.tnr .dropdown .opt.sel,.tnr .dropdown .opt-rich.sel{color:var(--accent);background:var(--surface-2)}
.tnr .dropdown .opt.kb,.tnr .dropdown .opt-rich.kb{background:var(--surface-2);color:var(--accent)}
.tnr .dropdown .opt.is-hidden,.tnr .dropdown .opt-rich.is-hidden{display:none}
.tnr .field-select .field__control:focus-visible{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tnr .dropdown .grp{font-family:var(--body);padding:11px 16px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);border-top:1px solid var(--line)}
.tnr .dropdown .grp:first-child{border-top:none}
.tnr .dropdown .grp.is-hidden{display:none}
.tnr .dropdown .search{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.tnr .dropdown .search input{flex:1;border:none;outline:none;font-family:var(--body);font-size:16px;color:var(--fg);background:none}
.tnr .dropdown .search .ic{width:18px;height:18px;color:var(--muted)}
.tnr .dropdown .empty{padding:14px 16px;font-size:13.5px;color:var(--muted)}

/* ---- pills (channel / time) ---- */
.tnr .pills{display:flex;gap:10px;flex-wrap:wrap}
.tnr .pill{height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-2);border-radius:0;background:#fff;font-family:var(--body);font-weight:600;font-size:14px;color:var(--fg);cursor:pointer;transition:.15s}
.tnr .pill .ic,.tnr .pill .ic-f{width:18px;height:18px}
.tnr .pill:hover{border-color:var(--bd-h)}
.tnr .pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tnr .pill.active.tg{background:var(--tg);border-color:var(--tg)}
.tnr .pill.active.wa{background:var(--wa);border-color:var(--wa)}
.tnr .pill.active.vb{background:var(--vb);border-color:var(--vb)}

/* ---- consent — PRE-CHECKED by default (owner request 2026-06-29; was 152-ФЗ unchecked) ---- */
.tnr .consent{display:flex;gap:12px;align-items:flex-start;font-family:var(--body);font-size:12.5px;line-height:1.45;color:var(--muted);cursor:pointer;text-align:left}
.tnr .consent .consent__cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tnr .consent .box{flex:none;width:22px;height:22px;border:1.5px solid var(--line-2);border-radius:0;display:flex;align-items:center;justify-content:center;background:#fff;transition:.15s;margin-top:1px}
.tnr .consent .box .ic{width:14px;height:14px;color:#fff;opacity:0}
.tnr .consent.checked .box{background:var(--accent);border-color:var(--accent)}
.tnr .consent.checked .box .ic{opacity:1}
.tnr .consent.invalid .box{border-color:var(--err)}
.tnr .consent.invalid{color:var(--err)}
.tnr .consent.shake{animation:tnr-shake .4s}
@keyframes tnr-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.tnr .consent a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--accent);font-weight:600}
.tnr .consent a:hover{color:var(--accent-dk)}
.tnr .consent .consent__cb:focus-visible + .box{box-shadow:var(--ring-strong);border-color:var(--accent)}

/* ---- stars (review) ---- */
.tnr .stars{display:flex;gap:6px}
.tnr .stars .star{width:30px;height:30px;color:var(--line-2);cursor:pointer;display:flex}
.tnr .stars .star .ic{width:30px;height:30px}
.tnr .stars .star.on{color:var(--accent)}
.tnr .stars .star.on .ic{fill:var(--accent);stroke:var(--accent)}

/* ---- file drop / chip ---- */
.tnr .filedrop{position:relative;border:1.5px dashed var(--line-2);background:var(--tint);border-radius:0;padding:22px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;transition:.15s;cursor:pointer}
.tnr .filedrop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.tnr .filedrop .ic{width:28px;height:28px;color:var(--muted)}
.tnr .filedrop b{font-family:var(--body);font-size:15px;font-weight:700;color:var(--fg)}
.tnr .filedrop span{font-size:11.5px;letter-spacing:.02em;color:var(--muted)}
.tnr .filedrop.drag{border-color:var(--accent);background:var(--err-bg)}
.tnr .filechip{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line-2);border-radius:0;background:#fff}
.tnr .filechip .ic{color:var(--accent)}
.tnr .filechip .nm{flex:1;font-size:14px;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnr .filechip .sz{font-size:11.5px;color:var(--muted)}
.tnr .filechip .x{color:var(--muted);cursor:pointer;display:flex}

/* ---- disclosure (reveal extra fields) ---- */
.tnr .disclosure{display:inline-flex;align-items:center;gap:8px;color:var(--accent-dk);font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer;background:none;border:none;padding:0}
.tnr .disclosure .ic{width:18px;height:18px;transition:transform .2s}
.tnr .disclosure.is-open .ic{transform:rotate(180deg)}
.tnr .disclosure-body{display:none;flex-direction:column;gap:14px}
.tnr .disclosure-body.is-open{display:flex}

/* ---- context strip (product 1-click) / what-you-get / countdown ---- */
.tnr .ctx-strip{display:flex;gap:14px;align-items:center;background:var(--tint);border:1px solid var(--line);border-radius:0;padding:12px 14px}
.tnr .ctx-strip .thumb{width:52px;height:52px;border-radius:0;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none;overflow:hidden}
.tnr .ctx-strip .thumb .ic{width:26px;height:26px}
.tnr .ctx-strip .thumb img{width:100%;height:100%;object-fit:cover}
.tnr .ctx-strip b{font-family:var(--body);font-size:15px;display:block;color:var(--fg);line-height:1.25}
.tnr .ctx-strip span{font-size:12px;color:var(--muted)}
.tnr .whatget{display:flex;gap:12px;align-items:center;font-family:var(--body);font-size:14px;color:var(--fg-soft)}
.tnr .whatget .ic{color:var(--accent);flex:none;width:20px;height:20px}
.tnr .countdown{display:inline-flex;gap:6px;align-items:center}
.tnr .countdown b{background:var(--fg);color:#fff;border-radius:0;padding:6px 9px;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:700;font-size:16px}
.tnr .countdown small{color:var(--muted);font-size:11px;display:block;text-align:center;margin-top:3px}

/* ---- success / network-error states ---- */
.tnr .success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 20px}
.tnr .success .circ{width:62px;height:62px;border-radius:0;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;color:var(--ok)}
.tnr .success .circ .ic{width:30px;height:30px;stroke-width:2.4}
.tnr .success h4{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:27px;letter-spacing:.02em;margin:0;color:var(--fg)}
.tnr .success p{font-family:var(--body);font-size:15px;color:var(--muted);margin:0;max-width:340px;line-height:1.5}
.tnr .success .dl{margin-top:4px}
.tnr .err-banner{display:flex;gap:11px;align-items:flex-start;background:var(--err-bg);border:1px solid var(--err-bd);border-radius:0;padding:13px 15px;font-family:var(--body);font-size:13.5px;color:#9a1b12;line-height:1.45}
.tnr .err-banner .ic{width:20px;height:20px;color:var(--err);flex:none}

/* ---- ghost button (success "скачать ещё раз", secondary CTAs) ---- */
.tnr .md-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 22px;border-radius:0;background:#fff;border:1px solid var(--line-2);color:var(--fg);font-family:var(--body);font-weight:600;font-size:15px;cursor:pointer;transition:.15s;text-decoration:none}
.tnr .md-btn-ghost:hover{border-color:var(--fg)}
.tnr .md-btn-ghost .ic{width:18px;height:18px}

/* ===========================================================
   MODAL — restyle the theme's .popup__block (engine = main.css)
   =========================================================== */
/* Container stays fully opaque; only visibility toggles (engine main.css handles the close delay).
   The OLD engine path let .popup fade opacity 0→1 over .3s on open — and an ANCESTOR with
   opacity<1 suppresses a descendant's backdrop-filter, so the scrim blur snapped in only AFTER
   the fade finished (felt delayed vs the instant burger-menu overlay, whose blur sits on the
   same element as its own opacity). Pinning opacity:1 here removes that suppression. */
.tnr.popup{color:var(--fg);opacity:1}
/* scrim: match the burger menu overlay (.h3-mob-menu-overlay) — rgba(0,0,0,.4) + blur(4px).
   Fade the darkening + blur on the scrim's OWN opacity, so the blur paints from frame 1 and
   eases in with it (exactly like the menu) instead of snapping in after a container fade. */
.tnr.popup .popup__blur{background:rgba(0,0,0,.4);opacity:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .3s ease}
.tnr.popup.open .popup__blur{opacity:1}
.tnr .popup__block{width:520px;max-width:calc(100vw - 32px);background:#fff;border-radius:0;box-shadow:var(--sh-modal-strong);overflow:visible;padding:0;font-family:var(--body)}
.tnr .popup__block.sm{width:430px}
.tnr .popup__block.wide{width:680px}
.tnr .popup__head{position:relative;padding:26px 58px 20px 32px;border-bottom:1px solid var(--line)}
.tnr .popup__title{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:27px;letter-spacing:.02em;line-height:1.06;color:var(--fg);margin:0}
.tnr .popup__sub{font-family:var(--body);font-size:14px;color:var(--muted);margin-top:7px;line-height:1.4}
/* override the theme's vw-sized .popup__close with the new 40px hit-target */
.tnr .popup__close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:0;border:none;background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;padding:0;z-index:5}
.tnr .popup__close:hover{background:var(--tint);color:var(--fg)}
.tnr .popup__close .ic{position:static;width:22px;height:22px}
.tnr .popup__body{padding:24px 32px;display:flex;flex-direction:column;gap:16px}
.tnr .popup__foot{padding:2px 32px 28px;display:flex;flex-direction:column;gap:16px}
.tnr .popup__foot.is-hidden{display:none}

/* desktop dialog entrance: the container no longer fades its opacity (see scrim note above), so
   the block fades + rises on its own instead of popping in. Mobile (≤767px) keeps its bottom-sheet
   translateY slide untouched (the two breakpoints, ≥768 / ≤767, never overlap). */
@media (min-width:768px){
  .tnr .popup__block{opacity:0;transform:translateY(10px);transition:opacity .26s ease, transform .26s ease}
  .tnr.popup.open .popup__block{opacity:1;transform:translateY(0)}
}
@media (min-width:768px) and (prefers-reduced-motion:reduce){
  .tnr .popup__block{transition:none;transform:none}
}

/* ---- tablet ---- */
@media (max-width:1024px){
  .tnr .popup__block.wide{width:560px}
}

/* ---- mobile bottom-sheet: the SHEET scrolls; head + footer are sticky ---- */
@media (max-width:767px){
  /* overlay never scrolls → sheet stays pinned to the bottom (can't be dragged off the edge) */
  .tnr.popup{align-items:flex-end;padding:0;overflow:hidden;overscroll-behavior:none}
  .tnr .popup__container{width:100%;margin:0}
  /* The SHEET itself is the scroll container — overflow:auto on a block with a definite max-height
     is the most reliable touch-scroll on iOS (flex:1 + min-height:0 bodies are flaky there). The
     header sticks to the top and the footer (submit button) sticks to the bottom, so the button is
     ALWAYS visible without scrolling to it; short popups need no scroll at all. */
  .tnr .popup__block,.tnr .popup__block.sm,.tnr .popup__block.wide{width:100%;max-width:100%;max-height:90vh;max-height:90svh;display:block;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:0 -16px 50px rgba(8,10,12,.45);
    transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);will-change:transform}
  .tnr.popup.open .popup__block{transform:translateY(0)}
  /* sticky header (title always visible) with a drag-handle bar on top */
  .tnr .popup__head{position:sticky;top:0;z-index:4;background:var(--tint);padding:14px 56px 14px 22px;border-bottom:1px solid var(--line)}
  .tnr .popup__head::before{content:"";display:block;width:42px;height:4px;border-radius:3px;background:var(--line-2);margin:0 auto 12px}
  .tnr .popup__title{font-size:25px;line-height:1.05}
  .tnr .popup__sub{font-size:13.5px;margin-top:5px}
  .tnr .popup__close{top:22px;right:12px}
  .tnr .popup__body{padding:16px 22px;display:flex;flex-direction:column;gap:14px}
  .tnr .field--ta textarea{min-height:84px}
  /* sticky footer: submit button pinned to the bottom of the sheet, always reachable */
  .tnr .popup__foot{position:sticky;bottom:0;z-index:4;background:#fff;padding:14px 22px max(14px,env(safe-area-inset-bottom)) 22px;border-top:1px solid var(--line)}
  .tnr .field__control{height:52px}
  .tnr .field--ta .field__control{height:auto}
  .tnr .grid2{grid-template-columns:1fr}
  /* equipment select dropdown: shorter so it doesn't run to the phone's bottom edge; JS scrolls the
     field toward the top on open (scroll-margin keeps it clear of the sticky header) so the list
     opens with room and its end stays visible */
  .tnr .field-select{scroll-margin-top:88px}
  .tnr .popup__body .field-select.is-open .dropdown{max-height:min(38vh,300px);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--sh-drop2)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .tnr .popup__block,.tnr .popup__block.sm,.tnr .popup__block.wide{transition:none;transform:none}
  .tnr.popup:not(.open) .popup__block{transform:translateY(100%)}
}

@media (prefers-reduced-motion:reduce){
  .tnr .field__control,.tnr .pill,.tnr .consent.shake{transition:none;animation:none}
}

/* ===========================================================
   Section 4 — ON-PAGE form contexts (hero, banner, sidebanner,
   contact panel, quiz step). Scoped .tnr; reuses the field/pill/
   consent/md-btn primitives from Section 3.
   =========================================================== */
.tnr .panel{background:#fff;border:1px solid var(--line-2);border-radius:0;padding:32px}
.tnr .form-card{background:#fff;border:1px solid var(--line-2);border-radius:0;padding:30px}
.tnr .form-card h3,.tnr .hero-card h3,.tnr .panel > h3{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:26px;letter-spacing:.02em;margin:0 0 18px;color:var(--fg)}

/* hero lead — white card on a dark hero ground */
.tnr .hero-bg{background:var(--fg);border-radius:0;padding:46px;position:relative;overflow:hidden}
.tnr .hero-card{position:relative;background:#fff;border-radius:0;box-shadow:var(--sh-modal-strong);padding:30px;max-width:600px}
.tnr .inline-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.tnr .inline-row.one{grid-template-columns:1fr auto}

/* consultation banner — value left, form right on a dark ground */
.tnr .banner{background:var(--fg);border-radius:0;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:34px;color:#fff;position:relative;overflow:hidden}
.tnr .banner h3{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:30px;letter-spacing:.02em;margin:0 0 8px;color:#fff}
.tnr .banner p{margin:0;color:rgba(255,255,255,.66);font-size:15px;line-height:1.5}
.tnr .banner .bform{display:flex;gap:12px;align-items:end;background:rgba(255,255,255,.06);padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:0}
.tnr .banner .bform .field__control{background:#fff}
.tnr .banner .consent{color:rgba(255,255,255,.7)}
.tnr .banner .consent a{color:#fff}
.tnr .banner .field__label{color:rgba(255,255,255,.72)}

/* slim sidebar price/catalog banner */
.tnr .sidebanner{width:288px;max-width:100%;background:#fff;border:1px solid var(--line-2);border-radius:0;padding:22px}
.tnr .sidebanner h4{font-family:var(--disp);text-transform:uppercase;font-weight:400;font-size:20px;letter-spacing:.02em;margin:0 0 14px;display:flex;align-items:center;gap:10px;color:var(--fg)}
.tnr .sidebanner h4 .ic{color:var(--accent);width:22px;height:22px}

/* quiz final step accents */
.tnr .progress{height:8px;background:var(--surface-2);border-radius:0;overflow:hidden}
.tnr .progress i{display:block;height:100%;background:var(--accent)}
.tnr .stepnum{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

@media (max-width:767px){
  .tnr .hero-bg{padding:18px}
  .tnr .hero-card{padding:20px}
  .tnr .banner{flex-direction:column;align-items:stretch;padding:22px}
  .tnr .banner .bform{flex-direction:column;align-items:stretch}
  .tnr .inline-row,.tnr .inline-row.one{grid-template-columns:1fr}
  .tnr .sidebanner{width:100%}
  .tnr .panel,.tnr .form-card{padding:20px}
}

/* ===========================================================
   Section 5 — SITE-WIDE FEEDBACK CTA (above the footer)
   Red band (value prop + phone + messengers) on the left,
   white request-form card on the right. Included by footer.php
   on every page except the Контакты / О компании / Спасибо
   templates. Scoped .tnr; reuses the field / field-select /
   consent / md-btn primitives from Section 3.
   Markup: template-parts/feedback-cta.php
   =========================================================== */
.tnr.tnr-cta{
  background-color:var(--main);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
  color:#fff;font-family:var(--body);padding:72px 56px
}
.tnr-cta__inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}

/* left — value prop on the red ground */
.tnr-cta__lead{min-width:0}
.tnr-cta__kicker{display:flex;align-items:center;gap:14px;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.tnr-cta__kicker::before{content:"";width:34px;height:2px;background:#fff;flex:none}
.tnr-cta__title{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(40px,5vw,66px);line-height:.98;color:#fff;margin:18px 0 0}
.tnr-cta__sub{font-size:18px;line-height:1.55;color:rgba(255,255,255,.9);max-width:33em;margin:18px 0 0}
.tnr-cta__sub b{color:#fff;font-weight:700}
.tnr-cta__phone{display:inline-block;font-family:var(--disp);font-weight:400;font-size:clamp(34px,3.4vw,46px);letter-spacing:.01em;color:#fff;text-decoration:none;line-height:1;margin:30px 0 0}
.tnr-cta__phone:hover{color:#fff;opacity:.9}
.tnr-cta__phone-note{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px}
.tnr-cta__msgs{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.tnr-cta__msg{display:inline-flex;align-items:center;justify-content:center;gap:11px;height:56px;padding:0 26px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:16px;text-decoration:none;transition:background .15s,border-color .15s}
.tnr-cta__msg:hover{background:rgba(255,255,255,.2);color:#fff}
.tnr-cta__msg .ic{width:21px;height:21px}
.tnr-cta__hours{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:13.5px;letter-spacing:.02em;color:rgba(255,255,255,.72)}
.tnr-cta__hours .ic{width:18px;height:18px;color:rgba(255,255,255,.72)}

/* right — white request card */
.tnr-cta__card{background:#fff;padding:40px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5)}
.tnr-cta__card-title{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:30px;line-height:1.04;color:var(--fg);margin:0 0 22px}
.tnr-cta__card .tnr-form{display:flex;flex-direction:column;gap:16px}
.tnr-cta__card .md-btn{margin-top:4px}

/* tablet / mobile */
@media (max-width:980px){
  .tnr.tnr-cta{padding:48px 24px}
  .tnr-cta__inner{grid-template-columns:1fr;gap:34px}
}
@media (max-width:560px){
  .tnr.tnr-cta{padding:36px 16px}
  .tnr-cta__card{padding:24px 20px}
  .tnr-cta__msg{flex:1}
}