/* SMM Hero Form v1.1 — двухуровневый выбор (категория → тариф) + форма в отдельной секции под hero.
   Изолировано в .smmhf-section / .smmhf / .smmhf-teaser. */

/* Прячем старую сетку тарифных карточек (CSS в head → без вспышки) */
.seo-landing-pricing-v2 { display: none !important; }

/* ---- общие токены ---- */
.smmhf-section, .smmhf-teaser {
  --hf-primary:#7C3AED; --hf-primary-bright:#A78BFA; --hf-primary-10:rgba(124,58,237,.12);
  --hf-primary-20:rgba(124,58,237,.22);
  --hf-card:#1A1A2E; --hf-inset:#0F0F1A; --hf-hairline:#2D2D3A;
  --hf-fg1:#fff; --hf-fg2:rgba(255,255,255,.80); --hf-fg3:rgba(255,255,255,.58); --hf-fg4:rgba(255,255,255,.38);
  --hf-danger:#EF4444; --hf-success:#22C55E;
  --hf-rmd:10px; --hf-rlg:14px;
  --hf-ease:cubic-bezier(.34,1.56,.64,1); --hf-tf:140ms ease-out; --hf-tb:220ms ease-out;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--hf-fg1);
}
.smmhf-section *,.smmhf-section *::before,.smmhf-section *::after,
.smmhf-teaser *,.smmhf-teaser *::before,.smmhf-teaser *::after{ box-sizing:border-box; }

/* ---- секция «Закажите подписчиков» ---- */
.smmhf-section{ background:#0B0B16; padding:56px 20px 60px; position:relative; }
.smmhf-section .smmhf-inner{ max-width:720px; margin:0 auto; }
.smmhf-section .smmhf-head{ text-align:center; margin-bottom:26px; }
.smmhf-section .smmhf-h2{ font-family:'Inter',sans-serif; font-weight:800; font-size:30px; line-height:1.15; margin:0 0 10px; color:#fff; }
.smmhf-section .smmhf-sub{ font-size:15px; line-height:1.55; color:var(--hf-fg3); margin:0 auto; max-width:520px; }

.smmhf{ max-width:680px; margin:0 auto; width:100%; position:relative; z-index:3; }
.smmhf .hf-card{ background:var(--hf-card); border:1px solid var(--hf-hairline); border-radius:20px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.65),0 2px 8px -2px rgba(0,0,0,.4); overflow:hidden; }
.smmhf .hf-pad{ padding:26px 28px; }
@media(max-width:560px){ .smmhf-section{ padding:40px 14px 46px; } .smmhf-section .smmhf-h2{ font-size:24px; }
  .smmhf-section .smmhf-sub{ font-size:14px; } .smmhf .hf-pad{ padding:20px 18px; } }

/* step indicator */
.smmhf .hf-steps{ display:flex; align-items:center; gap:10px; padding:18px 26px 4px; }
.smmhf .hf-chip{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--hf-fg4); transition:color var(--hf-tb); }
.smmhf .hf-chip.is-active{ color:var(--hf-fg1); }
.smmhf .hf-chip.is-done{ color:var(--hf-primary-bright); }
.smmhf .hf-num{ width:23px; height:23px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; border:1.5px solid var(--hf-hairline); color:var(--hf-fg4); transition:all var(--hf-tb); }
.smmhf .hf-chip.is-active .hf-num{ background:var(--hf-primary); border-color:var(--hf-primary); color:#fff; }
.smmhf .hf-chip.is-done .hf-num{ background:var(--hf-primary-10); border-color:var(--hf-primary); color:var(--hf-primary-bright); }
.smmhf .hf-line{ flex:1; height:2px; background:var(--hf-hairline); border-radius:2px; overflow:hidden; }
.smmhf .hf-line span{ display:block; height:100%; width:0; background:var(--hf-primary); transition:width 320ms ease-out; }
.smmhf .hf-line.is-full span{ width:100%; }

.smmhf .hf-panel{ animation:hf-swap 320ms var(--hf-ease); }
.smmhf .hf-panel[hidden]{ display:none !important; }
@keyframes hf-swap{ from{ transform:translateX(10px) scale(.99); opacity:.6; } to{ transform:none; opacity:1; } }

.smmhf .hf-cathead{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.smmhf .hf-catico{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#5a8df7,#7c5cfc); color:#fff; font-size:19px; flex:0 0 auto; }
.smmhf .hf-cattitle{ font-family:'Inter',sans-serif; font-weight:800; font-size:18px; line-height:1.15; }
.smmhf .hf-catsub{ font-size:12.5px; color:var(--hf-fg3); }

.smmhf .hf-label{ display:block; font-size:13px; font-weight:500; color:var(--hf-fg2); margin-bottom:9px; }
.smmhf .hf-label .req{ color:var(--hf-danger); margin-left:2px; }
.smmhf .hf-cnt{ color:var(--hf-fg4); font-weight:500; }
.smmhf .hf-field{ width:100%; background:var(--hf-inset); border:1px solid var(--hf-hairline); border-radius:var(--hf-rmd);
  padding:13px 15px; color:#fff; font:inherit; font-size:15px; transition:border-color var(--hf-tf),box-shadow var(--hf-tf); }
.smmhf .hf-field::placeholder{ color:var(--hf-fg4); }
.smmhf .hf-field:focus{ outline:none; border-color:var(--hf-primary); box-shadow:0 0 0 3px var(--hf-primary-10); }
.smmhf .hf-field.is-invalid{ border-color:var(--hf-danger); }

/* ===== Уровень 1: КАТЕГОРИИ (чипы) ===== */
.smmhf .hf-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; }
.smmhf .hf-cat{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  background:var(--hf-inset); border:1.5px solid var(--hf-hairline); border-radius:var(--hf-rmd);
  padding:12px 13px; cursor:pointer; font:inherit; color:var(--hf-fg2); transition:all var(--hf-tf); }
.smmhf .hf-cat:hover{ border-color:rgba(124,58,237,.5); }
.smmhf .hf-cat.is-sel{ border-color:var(--hf-primary); background:var(--hf-primary-10); color:#fff; }
.smmhf .hf-cat-ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:var(--hf-primary-bright); font-size:16px; margin-bottom:5px; transition:all var(--hf-tf); }
.smmhf .hf-cat.is-sel .hf-cat-ico{ background:var(--hf-primary); color:#fff; }
.smmhf .hf-cat-t{ font-size:14px; font-weight:700; line-height:1.2; }
.smmhf .hf-cat-p{ font-size:11.5px; color:var(--hf-fg3); font-variant-numeric:tabular-nums; }
.smmhf .hf-cat.is-sel .hf-cat-p{ color:var(--hf-primary-bright); }

/* ===== Уровень 2: ТАРИФЫ (список) ===== */
.smmhf .hf-products{ display:flex; flex-direction:column; gap:6px; max-height:330px; overflow-y:auto; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:var(--hf-hairline) transparent; }
.smmhf .hf-products::-webkit-scrollbar{ width:6px; }
.smmhf .hf-products::-webkit-scrollbar-track{ background:transparent; }
.smmhf .hf-products::-webkit-scrollbar-thumb{ background:var(--hf-hairline); border-radius:99px; }
.smmhf .hf-products::-webkit-scrollbar-thumb:hover{ background:#3a3a4a; }
.smmhf .hf-prow{ display:flex; align-items:center; gap:11px; text-align:left; width:100%;
  background:var(--hf-inset); border:1.5px solid var(--hf-hairline); border-radius:var(--hf-rmd);
  padding:11px 13px; cursor:pointer; font:inherit; color:var(--hf-fg2); transition:border-color var(--hf-tf),background var(--hf-tf); }
.smmhf .hf-prow:hover{ border-color:rgba(124,58,237,.5); }
.smmhf .hf-prow.is-sel{ border-color:var(--hf-primary); background:var(--hf-primary-10); color:#fff; }
.smmhf .hf-pcheck{ flex:0 0 auto; width:19px; height:19px; border-radius:50%; border:1.5px solid var(--hf-hairline);
  display:grid; place-items:center; transition:all var(--hf-tf); }
.smmhf .hf-pcheck i{ font-size:12px; color:#fff; opacity:0; transform:scale(.4); transition:all var(--hf-tb); }
.smmhf .hf-prow.is-sel .hf-pcheck{ border-color:var(--hf-primary); background:var(--hf-primary); }
.smmhf .hf-prow.is-sel .hf-pcheck i{ opacity:1; transform:scale(1); }
.smmhf .hf-pname{ flex:1; min-width:0; font-size:13.5px; line-height:1.32; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.smmhf .hf-pmeta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.smmhf .hf-pbadge{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600;
  color:var(--hf-success); background:rgba(34,197,94,.12); border-radius:99px; padding:2px 8px; white-space:nowrap; }
.smmhf .hf-pbadge i{ font-size:11px; }
.smmhf .hf-pprice{ font-size:13px; font-weight:700; color:var(--hf-primary-bright); white-space:nowrap; font-variant-numeric:tabular-nums; }

.smmhf .hf-desc{ font-size:12.5px; color:var(--hf-fg3); line-height:1.5; margin:10px 0 0; padding:11px 13px;
  background:rgba(255,255,255,.03); border:1px solid var(--hf-hairline); border-radius:var(--hf-rmd); }

.smmhf .hf-qtyrow{ display:flex; align-items:center; gap:12px; }
.smmhf .hf-range{ -webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.12); outline:none; }
.smmhf .hf-range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 4px var(--hf-primary-20); cursor:pointer; }
.smmhf .hf-range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 4px var(--hf-primary-20); cursor:pointer; }
.smmhf .hf-qtyinput{ width:120px; text-align:center; font-family:'Inter',sans-serif; font-weight:700; font-size:16px; }
.smmhf .hf-hint{ font-size:11.5px; color:var(--hf-fg4); margin:7px 0 0; }

.smmhf .hf-pricerow{ display:flex; align-items:baseline; justify-content:space-between; margin-top:20px; }
.smmhf .hf-pl{ font-size:14px; color:var(--hf-fg2); }
.smmhf .hf-pv{ font-size:25px; font-weight:700; color:var(--hf-primary-bright); font-variant-numeric:tabular-nums; }

/* кнопки (общие для формы и teaser) */
.smmhf .hf-btn,.smmhf-teaser .hf-btn{ width:100%; border:0; cursor:pointer; font:inherit; font-weight:600; white-space:nowrap; border-radius:var(--hf-rmd);
  padding:14px 16px; font-size:15.5px; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:filter var(--hf-tb),transform var(--hf-tb); }
.smmhf .hf-btn-primary,.smmhf-teaser .hf-btn-primary{ background:linear-gradient(135deg,var(--hf-primary-bright),var(--hf-primary)); color:#fff; box-shadow:0 8px 22px -8px rgba(124,58,237,.7); }
.smmhf .hf-btn-primary:hover,.smmhf-teaser .hf-btn-primary:hover{ filter:brightness(1.06); }
.smmhf .hf-btn-primary:active,.smmhf-teaser .hf-btn-primary:active{ transform:translateY(1px); }
.smmhf .hf-btn-primary:disabled{ background:#15152A; color:var(--hf-fg4); box-shadow:none; cursor:not-allowed; filter:none; }
.smmhf .hf-back{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600; color:var(--hf-fg3); padding:0; transition:color var(--hf-tf); }
.smmhf .hf-back:hover{ color:#fff; }
.smmhf .hf-mutednote{ font-size:12px; color:var(--hf-fg4); line-height:1.5; text-align:center; margin-top:12px; }

.smmhf .hf-summary{ display:flex; align-items:center; gap:12px; background:var(--hf-inset); border:1px solid var(--hf-hairline); border-radius:var(--hf-rlg); padding:12px 14px; margin-top:14px; }
.smmhf .hf-sico{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; background:var(--hf-primary-10); color:var(--hf-primary-bright); font-size:20px; }
.smmhf .hf-smain{ flex:1; min-width:0; }
.smmhf .hf-stitle{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.smmhf .hf-ssub{ font-size:12.5px; color:var(--hf-fg3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.smmhf .hf-sprice{ font-size:16px; font-weight:700; color:var(--hf-primary-bright); white-space:nowrap; }

.smmhf .hf-h3{ font-size:16px; font-weight:700; margin:20px 0 12px; }
.smmhf .hf-paygrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.smmhf .hf-pay{ background:var(--hf-inset); border:1.5px solid var(--hf-hairline); border-radius:var(--hf-rmd); padding:13px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition:all var(--hf-tf); position:relative; }
.smmhf .hf-pay:hover{ border-color:rgba(124,58,237,.5); }
.smmhf .hf-pay i{ font-size:22px; color:var(--hf-fg2); }
.smmhf .hf-pay span{ font-size:12.5px; font-weight:500; color:var(--hf-fg2); }
.smmhf .hf-pay.is-sel{ border-color:var(--hf-primary); background:var(--hf-primary-10); }
.smmhf .hf-pay.is-sel i,.smmhf .hf-pay.is-sel span{ color:#fff; }
.smmhf .hf-tick{ position:absolute; top:6px; right:6px; width:16px; height:16px; border-radius:50%; background:var(--hf-primary); display:grid; place-items:center; opacity:0; transform:scale(.5); transition:all var(--hf-tb); }
.smmhf .hf-tick i{ font-size:11px; color:#fff; }
.smmhf .hf-pay.is-sel .hf-tick{ opacity:1; transform:scale(1); }

.smmhf .hf-err{ font-size:12px; color:var(--hf-danger); margin-top:6px; }
.smmhf .hf-note{ font-size:12.5px; color:var(--hf-fg3); margin-top:10px; min-height:16px; }
.smmhf .hf-legal{ font-size:11px; color:var(--hf-fg4); line-height:1.55; text-align:center; margin-top:9px; }
.smmhf .hf-legal a{ color:var(--hf-fg3); text-decoration:underline; }
.smmhf .hf-spin,.smmhf-teaser .hf-spin{ width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; display:inline-block; animation:hf-rot .7s linear infinite; }
@keyframes hf-rot{ to{ transform:rotate(360deg); } }

/* ---- teaser-карточка в hero (правая колонка) ---- */
.smmhf-teaser{ position:relative; z-index:3; max-width:380px; margin-left:auto; width:100%;
  background:var(--hf-card); border:1px solid var(--hf-hairline); border-radius:20px; padding:24px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.65),0 2px 8px -2px rgba(0,0,0,.4); }
/* нейтрализуем глянцевый бокс SEO-шаблона v2 на `#purchaseFormsWrapper > div > div` (высокая специфичность → !important) */
#purchaseFormsWrapper .smmhf-teaser-in{ background:transparent !important; border:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; padding:0 !important; border-radius:0 !important; }
.smmhf-teaser .hf-tease-ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,#5a8df7,#7c5cfc); color:#fff; font-size:22px; margin-bottom:14px; }
.smmhf-teaser .hf-tease-from{ font-size:15px; color:var(--hf-fg3); line-height:1; }
.smmhf-teaser .hf-tease-from b{ font-size:30px; font-weight:800; color:#fff; }
.smmhf-teaser .hf-tease-from span{ color:var(--hf-fg4); }
.smmhf-teaser .hf-tease-title{ font-size:17px; font-weight:700; color:#fff; margin:6px 0 14px; }
.smmhf-teaser .hf-tease-list{ list-style:none; margin:0 0 18px; padding:0; }
.smmhf-teaser .hf-tease-list li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--hf-fg2); padding:5px 0; }
.smmhf-teaser .hf-tease-list li i{ color:var(--hf-success); font-size:16px; flex:0 0 auto; }
@media(max-width:999px){ .smmhf-teaser{ max-width:none; margin:0 auto; } }

/* ============================================================
   v1.3 — обогащение карточек + ширина формы + компактный hero + текст-блоки
   (файл грузится ТОЛЬКО на SMM-seo_landing → scope естественный; Stars/Premium не затрагиваются)
   ============================================================ */

/* B1: компактный hero на SMM-страницах */
body.seo-landing-singular .hero-section{ padding-top:26px !important; padding-bottom:30px !important; min-height:0 !important; }
body.seo-landing-singular .hero-section h1{ font-size:clamp(28px,4.2vw,44px) !important; line-height:1.1 !important; margin-bottom:16px !important; }
@media(max-width:768px){ body.seo-landing-singular .hero-section h1{ font-size:30px !important; } }

/* B2: форма шире */
.smmhf-section .smmhf-inner{ max-width:960px; }
.smmhf{ max-width:920px; }
.smmhf .hf-pad{ padding:26px 34px; }
@media(max-width:560px){ .smmhf .hf-pad{ padding:20px 18px; } }

/* A4: чипы-атрибуты карточки тарифа (честные; %/время — только реальные) */
.smmhf .hf-prow{ align-items:flex-start; }
.smmhf .hf-pcheck{ margin-top:1px; }
.smmhf .hf-pbody{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.smmhf .hf-pbody .hf-pname{ flex:none; }
.smmhf .hf-attrs{ display:flex; flex-wrap:wrap; gap:5px; }
.smmhf .hf-attr{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; line-height:1;
  color:var(--hf-fg2); background:rgba(255,255,255,.06); border:1px solid var(--hf-hairline);
  border-radius:99px; padding:3px 8px; white-space:nowrap; }
.smmhf .hf-attr-green{ color:#86efac; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.28); }
.smmhf .hf-attr-prem{ color:#fde68a; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); }
.smmhf .hf-attr-gold{ color:#fcd34d; background:rgba(245,200,11,.14); border-color:rgba(245,200,11,.32); }
.smmhf .hf-attr-red{ color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); }
.smmhf .hf-attr-ind{ color:#c4b5fd; background:rgba(124,58,237,.14); border-color:rgba(124,58,237,.32); }
.smmhf .hf-attr-org{ color:#fdba74; background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.3); }

/* B3: текст-блоки под стиль каркаса */
.smmhf-textblock{ background:#0A0A14; padding:50px 20px; }
.smmhf-textblock .smmhf-tb-in{ max-width:760px; margin:0 auto; }
.smmhf-textblock .smmhf-tb-h2{ font-family:'Inter',sans-serif; font-weight:800; font-size:clamp(24px,3vw,32px);
  line-height:1.15; color:#fff; text-align:center; margin:0 0 22px; }
.smmhf-textblock .smmhf-tb-body{ color:rgba(255,255,255,.74); font-size:15.5px; line-height:1.72; }
.smmhf-textblock .smmhf-tb-body p{ margin:0 0 14px; }
.smmhf-textblock .smmhf-tb-body a{ color:#A78BFA; text-decoration:underline; }
/* «Как заказать» — нумерованные степ-карточки */
.smmhf-textblock .smmhf-tb-body ol{ counter-reset:smmstep; list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.smmhf-textblock .smmhf-tb-body ol li{ counter-increment:smmstep; position:relative; margin:0; padding:16px 18px 16px 62px;
  background:#13131f; border:1px solid #2D2D3A; border-radius:14px; color:rgba(255,255,255,.82); }
.smmhf-textblock .smmhf-tb-body ol li::before{ content:counter(smmstep); position:absolute; left:16px; top:14px;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px;
  color:#fff; background:linear-gradient(135deg,#A78BFA,#7C3AED); }

/* B4: CTA-кнопки в блоках. Спецификация ВЫШЕ, чем у `.smmhf-tb-body a` (иначе цвет/подчёркивание ссылки перебивают → кнопка тусклая). */
.smmhf-textblock .smmhf-tb-body a.hf-btn-primary{ display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  margin-top:20px; padding:13px 26px; width:auto; border:0; border-radius:12px; cursor:pointer; text-decoration:none !important;
  font-weight:700; font-size:15px; color:#fff !important; background:linear-gradient(135deg,#A78BFA,#7C3AED);
  box-shadow:0 8px 22px -8px rgba(124,58,237,.7); transition:filter .2s; }
.smmhf-textblock .smmhf-tb-body a.hf-btn-primary:hover{ filter:brightness(1.07); color:#fff !important; }

/* ============================================================
   v1.5 — переделанная форма: категории в 1 ряд, поиск, фильтры, сортировка
   ============================================================ */
/* категории — 1 ряд (горизонт. скролл), override прежней сетки */
.smmhf .hf-cats{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:6px; grid-template-columns:none;
  scrollbar-width:thin; scrollbar-color:var(--hf-hairline) transparent; }
.smmhf .hf-cats::-webkit-scrollbar{ height:6px; }
.smmhf .hf-cats::-webkit-scrollbar-thumb{ background:var(--hf-hairline); border-radius:99px; }
.smmhf .hf-cat{ flex:0 0 auto; min-width:112px; }

/* поиск + сортировка */
.smmhf .hf-toolbar{ display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.smmhf .hf-searchwrap{ flex:1 1 220px; position:relative; display:flex; align-items:center; }
.smmhf .hf-searchwrap i{ position:absolute; left:12px; color:var(--hf-fg4); font-size:16px; pointer-events:none; }
.smmhf .hf-search{ width:100%; background:var(--hf-inset); border:1px solid var(--hf-hairline); border-radius:var(--hf-rmd);
  padding:11px 13px 11px 36px; color:#fff; font:inherit; font-size:14px; }
.smmhf .hf-search::placeholder{ color:var(--hf-fg4); }
.smmhf .hf-search:focus{ outline:none; border-color:var(--hf-primary); box-shadow:0 0 0 3px var(--hf-primary-10); }
.smmhf .hf-sort{ display:inline-flex; background:var(--hf-inset); border:1px solid var(--hf-hairline); border-radius:var(--hf-rmd); padding:3px; gap:2px; }
.smmhf .hf-sortb{ border:0; background:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; color:var(--hf-fg3); padding:7px 12px; border-radius:8px; white-space:nowrap; transition:all var(--hf-tf); }
.smmhf .hf-sortb:hover{ color:#fff; }
.smmhf .hf-sortb.is-sel{ background:var(--hf-primary); color:#fff; }

/* фильтры (умные, только релевантные) */
.smmhf .hf-filters{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; align-items:center; }
.smmhf .hf-filters:empty{ display:none; }
.smmhf .hf-fgroup{ display:flex; align-items:center; gap:7px; }
.smmhf .hf-flabel{ font-size:12px; color:var(--hf-fg4); font-weight:500; white-space:nowrap; }
.smmhf .hf-fchips{ display:inline-flex; gap:5px; flex-wrap:wrap; }
.smmhf .hf-fchip{ border:1px solid var(--hf-hairline); background:var(--hf-inset); color:var(--hf-fg2); cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:6px 11px; border-radius:99px; transition:all var(--hf-tf); }
.smmhf .hf-fchip:hover{ border-color:rgba(124,58,237,.5); }
.smmhf .hf-fchip.is-sel{ border-color:var(--hf-primary); background:var(--hf-primary-10); color:#fff; }
.smmhf .hf-fselect{ background:var(--hf-inset); border:1px solid var(--hf-hairline); color:#fff; font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:99px; cursor:pointer; }
.smmhf .hf-fselect:focus{ outline:none; border-color:var(--hf-primary); }

/* список */
.smmhf .hf-listlabel{ margin-top:16px; }
.smmhf .hf-products{ max-height:400px; }
.smmhf .hf-empty{ text-align:center; color:var(--hf-fg3); font-size:13.5px; padding:30px 16px; background:rgba(255,255,255,.03); border:1px dashed var(--hf-hairline); border-radius:var(--hf-rmd); }
.smmhf .hf-empty i{ display:block; font-size:26px; color:var(--hf-fg4); margin-bottom:8px; }
.smmhf .hf-more{ width:100%; margin-top:6px; border:1px dashed var(--hf-hairline); background:transparent; color:var(--hf-primary-bright); cursor:pointer; font:inherit; font-size:13px; font-weight:600; padding:11px; border-radius:var(--hf-rmd); transition:all var(--hf-tf); }
.smmhf .hf-more:hover{ border-color:var(--hf-primary); background:var(--hf-primary-10); }

/* ============================================================
   v1.6 — форма на всю ширину контента + 2 колонки + раскладка
   (всё под .smmhf* — CSS грузится ТОЛЬКО на SMM-страницах, Stars/Premium не трогает)
   ============================================================ */
/* ширина = как у контентного контейнера каркаса (.container ~1200px) */
.smmhf-section .smmhf-inner{ max-width:1200px; }
.smmhf{ max-width:1200px; }
.smmhf .hf-pad{ padding:26px 30px; }

/* категории — заполняют всю строку (без обрезки/скролла), переносятся при нехватке */
.smmhf .hf-cats{ flex-wrap:wrap; overflow:visible; gap:8px; }
.smmhf .hf-cat{ flex:1 1 0; min-width:122px; }

/* фильтры — один ряд с воздухом (на узких переносятся) */
.smmhf .hf-filters{ gap:14px 26px; padding:6px 0 2px; }

/* 2 колонки: слева каталог (шире), справа панель заказа */
.smmhf .hf-cols{ display:grid; grid-template-columns:1.55fr 1fr; gap:28px; align-items:start; margin-top:16px; }
.smmhf .hf-col-list{ min-width:0; }
.smmhf .hf-col-order{ min-width:0; }
.smmhf .hf-col-list .hf-products{ max-height:540px; }
/* выбранный тариф — компактная плашка-шапка в колонке заказа */
.smmhf .hf-col-order .hf-desc{ font-size:12.5px; line-height:1.5; color:var(--hf-fg3);
  background:rgba(255,255,255,.03); border:1px solid var(--hf-hairline); border-radius:var(--hf-rmd); padding:10px 13px; min-height:1px; }
.smmhf .hf-col-order .hf-desc:empty{ display:none; }

/* STEP-2 (оплата) — держим комфортную центр-ширину в широкой карточке (логику оплаты НЕ трогаем) */
.smmhf .hf-panel[data-hf-step="2"]{ max-width:580px; margin-left:auto; margin-right:auto; }

/* узкие экраны — одна колонка, как было */
@media(max-width:899px){
  .smmhf .hf-cols{ grid-template-columns:1fr; gap:0; margin-top:0; }
  .smmhf .hf-col-list .hf-products{ max-height:400px; }
  .smmhf .hf-col-order .hf-desc{ background:none; border:0; padding:0; margin-top:6px; }
  .smmhf .hf-cat{ flex:1 1 auto; min-width:110px; }
}
@media(max-width:560px){ .smmhf .hf-pad{ padding:20px 16px; } }

/* ============================================================
   v1.7 — скелетон загрузки (убирает FOUC/вспышку, резерв высоты)
   ============================================================ */
.smmhf-skel .hf-card{ min-height:560px; }
.smmhf-skel .hf-steps{ align-items:center; }
.smmhf-skel .sk{ position:relative; overflow:hidden; background:#16161f; border-radius:8px; }
.smmhf-skel .sk::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation:sk-shimmer 1.25s infinite; }
@keyframes sk-shimmer{ 100%{ transform:translateX(100%); } }
.smmhf-skel .sk-chip{ width:84px; height:22px; }
.smmhf-skel .sk-line{ flex:1; height:2px; margin:0 10px; border-radius:2px; }
.smmhf-skel .sk-h{ width:54%; height:24px; margin-bottom:18px; }
.smmhf-skel .sk-cats{ display:flex; gap:8px; margin-bottom:16px; }
.smmhf-skel .sk-cat{ flex:1 1 0; height:64px; border-radius:10px; }
.smmhf-skel .sk-tool{ display:flex; gap:10px; margin-bottom:14px; }
.smmhf-skel .sk-search{ flex:1; height:46px; border-radius:10px; }
.smmhf-skel .sk-sort{ width:240px; height:46px; border-radius:10px; }
.smmhf-skel .sk-filters{ display:flex; gap:14px 18px; flex-wrap:wrap; margin-bottom:18px; }
.smmhf-skel .sk-fl{ width:118px; height:30px; border-radius:99px; }
.smmhf-skel .sk-cols{ display:grid; grid-template-columns:1.55fr 1fr; gap:28px; align-items:start; }
.smmhf-skel .sk-prow{ height:54px; margin-bottom:8px; border-radius:10px; }
.smmhf-skel .sk-block{ height:46px; margin-bottom:14px; border-radius:10px; }
.smmhf-skel .sk-h2{ height:66px; }
.smmhf-skel .sk-input{ height:46px; margin-bottom:12px; border-radius:10px; }
.smmhf-skel .sk-btn{ height:50px; border-radius:12px; }
@media(max-width:899px){
  .smmhf-skel .sk-cols{ grid-template-columns:1fr; }
  .smmhf-skel .sk-col-order{ display:none; }
  .smmhf-skel .sk-sort{ width:140px; }
}

/* плавная замена скелетон → форма */
.smmhf-fadein{ opacity:0; transition:opacity .22s ease-out; }
.smmhf-fadein.is-in{ opacity:1; }

/* ошибка загрузки каталога */
.smmhf .hf-skel-err{ text-align:center; padding:42px 16px; color:var(--hf-fg2); }
.smmhf .hf-skel-err i{ font-size:34px; color:var(--hf-fg4); display:block; margin-bottom:10px; }
.smmhf .hf-skel-err p{ margin:0 0 16px; font-size:14px; line-height:1.5; }
.smmhf .hf-skel-err .hf-btn-primary{ display:inline-flex; width:auto; padding:11px 22px; }

/* v1.7.1 — тизер в hero мгновенный; плейсхолдер цены, пока грузится каталог */
.smmhf-teaser .hf-tease-skp{ display:inline-block; width:34px; height:0.74em; vertical-align:-1px; border-radius:6px;
  background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
.smmhf-teaser .hf-tease-skp::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation:sk-shimmer 1.25s infinite; }

/* v1.8 — постоянная подсказка под полем ссылки (формат по типу услуги; для бустов — t.me/boost/…) */
.smmhf .hf-linkhint{ font-size:11.5px; line-height:1.45; color:var(--hf-fg4); margin:6px 0 0; transition:color var(--hf-tf); }
.smmhf .hf-linkhint.is-err{ color:var(--hf-danger); }

/* v2.0 — витрина категорий на хабе (5 карточек, тёмный каркас) */
.smmhf-showcase{ background:#0B0B16; padding:8px 20px 56px; }
.smmhf-showcase .smmhf-inner{ max-width:1200px; margin:0 auto; }
.smmhf-showcase .smmhf-head{ text-align:center; margin-bottom:24px; }
.smmhf-showcase .smmhf-h2{ font-family:'Inter',sans-serif; font-weight:800; font-size:26px; line-height:1.15; color:#fff; margin:0 0 8px; }
.smmhf-showcase .smmhf-sub{ font-size:14.5px; line-height:1.5; color:var(--hf-fg3); max-width:620px; margin:0 auto; }
.smmhf-showcase .hf-sc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr)); gap:16px; }
.smmhf-showcase .hf-sc-card{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-decoration:none;
  background:var(--hf-card); border:1px solid var(--hf-hairline); border-radius:16px; padding:20px 18px; transition:transform var(--hf-tf),border-color var(--hf-tf),box-shadow var(--hf-tf); }
.smmhf-showcase .hf-sc-card:hover{ border-color:var(--hf-primary); transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(124,58,237,.45); }
.smmhf-showcase .hf-sc-ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--hf-primary-10); color:var(--hf-primary-bright); font-size:22px; margin-bottom:6px; }
.smmhf-showcase .hf-sc-name{ font-size:17px; font-weight:700; color:#fff; line-height:1.2; }
.smmhf-showcase .hf-sc-desc{ font-size:12.5px; color:var(--hf-fg3); line-height:1.42; flex:1 0 auto; min-height:34px; }
.smmhf-showcase .hf-sc-price{ font-size:14px; font-weight:700; color:var(--hf-primary-bright); font-variant-numeric:tabular-nums; margin-top:2px; }
.smmhf-showcase .hf-sc-price span{ font-size:11px; font-weight:500; color:var(--hf-fg4); }
.smmhf-showcase .hf-sc-more{ font-size:12.5px; font-weight:600; color:#fff; display:inline-flex; align-items:center; gap:5px; margin-top:6px; transition:color var(--hf-tf); }
.smmhf-showcase .hf-sc-card:hover .hf-sc-more{ color:var(--hf-primary-bright); }
.smmhf-showcase .hf-sc-card:hover .hf-sc-more i{ transform:translateX(2px); }
.smmhf-showcase .hf-sc-more i{ transition:transform var(--hf-tf); }
@media(max-width:560px){ .smmhf-showcase{ padding:4px 14px 40px; } .smmhf-showcase .smmhf-h2{ font-size:22px; } }

/* v2.1 — хлебные крошки (Главная › Продвижение › Категория), над hero */
.smmhf-crumb{ background:#0B0B16; border-bottom:1px solid var(--hf-hairline); }
.smmhf-crumb .smmhf-crumb-in{ max-width:1200px; margin:0 auto; padding:9px 20px; font-size:12.5px; line-height:1.4; color:var(--hf-fg4);
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.smmhf-crumb a{ color:var(--hf-fg3); text-decoration:none; transition:color var(--hf-tf); }
.smmhf-crumb a:hover{ color:var(--hf-primary-bright); }
.smmhf-crumb .hf-cr-sep{ color:var(--hf-fg4); }
.smmhf-crumb .hf-cr-cur{ color:var(--hf-fg2); font-weight:500; }
@media(max-width:560px){ .smmhf-crumb .smmhf-crumb-in{ padding:8px 14px; font-size:12px; } }

/* v2.2 — «О тарифе» (описание услуги) + номер услуги (service_id) */
.smmhf .hf-about{ margin-top:2px; background:rgba(255,255,255,.03); border:1px solid var(--hf-hairline); border-radius:var(--hf-rmd); padding:12px 13px; }
.smmhf .hf-about-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.smmhf .hf-about-t{ font-size:12.5px; font-weight:700; color:var(--hf-fg2); }
.smmhf .hf-about-id{ font-size:11px; color:var(--hf-fg4); font-variant-numeric:tabular-nums; white-space:nowrap; }
.smmhf .hf-about-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.smmhf .hf-about-list li{ position:relative; padding-left:15px; font-size:12.5px; line-height:1.42; color:var(--hf-fg3); }
.smmhf .hf-about-list li::before{ content:''; position:absolute; left:3px; top:7px; width:4px; height:4px; border-radius:50%; background:var(--hf-primary-bright); }
.smmhf .hf-about-more{ margin-top:8px; border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:12px; font-weight:600; color:var(--hf-primary-bright); }
.smmhf .hf-about-more:hover{ text-decoration:underline; }
.smmhf .hf-pid{ display:block; font-size:10.5px; color:var(--hf-fg4); font-variant-numeric:tabular-nums; margin-top:2px; text-align:right; }

/* v2.3 — полный каталог: счётчик услуг в чипе категории + категория найденного при глобальном поиске */
.smmhf .hf-cat-t .hf-cat-n{ font-size:11px; font-weight:600; color:var(--hf-fg4); }
.smmhf .hf-cat.is-sel .hf-cat-t .hf-cat-n{ color:var(--hf-primary-bright); }
.smmhf .hf-pcat{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em;
  color:var(--hf-primary-bright); background:var(--hf-primary-10); border-radius:5px; padding:1px 6px; margin-right:6px; vertical-align:1px; }


/* P0.7.2: SSR-таблица тарифов */
.smmhf-ssr-table-wrap { overflow-x: auto; border: 1px solid #2D2D3A; border-radius: 16px; }
.smmhf-ssr-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.smmhf-ssr-table th, .smmhf-ssr-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #2D2D3A; }
.smmhf-ssr-table thead th { background: #171724; color: #fff; font-weight: 600; white-space: nowrap; }
.smmhf-ssr-table tbody tr:last-child td { border-bottom: none; }
.smmhf-ssr-table tbody tr:nth-child(odd) td { background: rgba(26,26,46,.45); }
.smmhf-ssr-table td { color: #cfd2dd; }
.smmhf-ssr-table a { color: var(--primary, #7B4DFF); text-decoration: none; }
.smmhf-ssr-table a:hover { text-decoration: underline; }
.smmhf-ssr-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(123,77,255,.18); color: #b9a1ff; font-size: 11px; white-space: nowrap; }
.smmhf-ssr-note { margin-top: 10px; color: #8b8e99; font-size: 13px; }

/* ============================================================
   v2.5.1 — компактный блок заказа (десктоп, 2 колонки): ужать
   вертикальные отступы блока оплаты, чтобы низ формы был ближе
   к списку тарифов. Мобайл (<=899) НЕ трогаем.
   ============================================================ */
@media(min-width:900px){
  .smmhf .hf-col-order .hf-about{ padding:9px 12px; }
  .smmhf .hf-col-order .hf-about-head{ margin-bottom:5px; }
  .smmhf .hf-col-order .hf-about-list{ gap:4px; }
  .smmhf .hf-col-order .hf-label{ margin-top:10px !important; margin-bottom:6px; }
  .smmhf .hf-col-order .hf-hint{ margin-top:3px; }
  .smmhf .hf-col-order .hf-linkhint{ margin-top:3px; }
  .smmhf .hf-col-order .hf-h3{ margin-top:10px !important; margin-bottom:7px; }
  .smmhf .hf-col-order .hf-paygrid .hf-pay{ padding:9px 8px; gap:4px; }
  .smmhf .hf-col-order .hf-paygrid .hf-pay i{ font-size:19px; }
  .smmhf .hf-col-order .hf-note{ margin-top:5px; min-height:0; }
  .smmhf .hf-col-order .hf-pricerow{ margin-top:10px; }
  .smmhf .hf-col-order [data-hf-pay-btn]{ margin-top:9px !important; }
  .smmhf .hf-col-order .hf-legal{ margin-top:6px; }
}