/* ===== MK: общие шрифты описаний (Manrope). Блок .tgg удалён 20260817 — его не использовал ни один товар ===== */
/* fonts (self-hosted, subset by unicode-range → грузятся только на этой карточке) */
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/wa-data/public/site/themes/tvoy_put/tgg-fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/wa-data/public/site/themes/tvoy_put/tgg-fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/wa-data/public/site/themes/tvoy_put/tgg-fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/wa-data/public/site/themes/tvoy_put/tgg-fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Блок .tgm удалён 20260817: ТВОИ ДЕНЬГИ переведены на систему .hio, товаров с .tgm не осталось. */




/* ===== MK: описание «ТВОЯ ГАРМОНИЯ И ОПОРА» (.hio) 20260811 ===== */
/* self-hosted Playfair Display 700 (subset), уникальное имя чтобы не конфликтовать с темой */
@font-face{ font-family:'PlayfairHio'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/wa-data/public/site/themes/tvoy_put/tgg-fonts/playfair700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'PlayfairHio'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/wa-data/public/site/themes/tvoy_put/tgg-fonts/playfair700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'PlayfairHio'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/wa-data/public/site/themes/tvoy_put/tgg-fonts/playfair700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* hard reset so the shop theme can't inflate anything */
.hio, .hio *{ margin:0; padding:0; border:0; box-sizing:border-box; background:none; float:none; text-align:inherit; font-family:inherit; }
.hio{
  --cream:#efe4d5; --cream-2:#f4eee1; --cream-dp:#e8dcc4;
  --navy:#0a2236; --navy-2:#0e2f49; --emerald:#123a2c;
  --gold:#c8a24a; --gold-br:#e0bd66; --gold-lt:#f1dda2; --gold-dp:#a9822f;
  --ink:#3c4a41; --head:#123528; --creamtxt:#e9dfc6; --mutednavy:#9fb0b2;
  /* акцент описания = тон медальонов инфографики; переключается модификатором на .hio */
  --head-deep:#0f3d2e; --num-a:#1a4a37; --num-b:#123a2c;
  --serif:'PlayfairHio',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:block; position:relative; overflow:hidden; border-radius:16px;
  font-family:var(--sans) !important; color:var(--ink); text-align:left;
  font-size:16px !important; line-height:1.6 !important; -webkit-font-smoothing:antialiased;
}
.hio *{ font-family:inherit; }
.hio svg{ display:block; }
.hio img{ max-width:100%; display:block; }

/* panels */
.hio__panel{ position:relative; padding:44px 20px; overflow:hidden; }
.hio__panel--cream{ background:linear-gradient(158deg,#f4e6c0 0%,#e3c9a0 34%,#d0b184 64%,#c2a077 100%); color:#3f3524; }
.hio__panel--navy{ background:radial-gradient(120% 85% at 50% -12%, #16203a, transparent 62%), linear-gradient(174deg,#0f1523 0%,#070e1d 46%,#030a15 100%); }
.hio__in{ position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; }

/* ornamental frame */
.hio__frame{ position:absolute; inset:16px; border:1.5px solid rgba(168,133,83,.9); border-radius:9px; z-index:1; pointer-events:none; opacity:.9; }
.hio__frame::before{ content:""; position:absolute; inset:4px; border:1px solid rgba(168,133,83,.42); border-radius:5px; }
.hio__panel--navy .hio__frame{ border-color:rgba(224,189,102,.7); }
.hio__panel--navy .hio__frame::before{ border-color:rgba(224,189,102,.3); }
.hio__corner{ position:absolute; width:13px; height:13px; transform:rotate(45deg); background:#a88553; z-index:2; }
.hio__corner--tl{ top:9.5px; left:9.5px; } .hio__corner--tr{ top:9.5px; right:9.5px; }
.hio__corner--bl{ bottom:9.5px; left:9.5px; } .hio__corner--br{ bottom:9.5px; right:9.5px; }
.hio__panel--navy .hio__corner{ background:var(--gold-br); }

/* top star + medallion */
.hio__topstar{ color:#a07d3f; margin:0 auto 22px; }
.hio__medal{ width:150px; height:150px; margin:0 auto 26px; border-radius:50%; filter:drop-shadow(0 14px 26px rgba(0,0,0,.28)); }
.hio__medal--sm{ width:112px; height:112px; margin-bottom:20px; }

/* kicker */
.hio__kicker{ display:inline-block; font-size:13px !important; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#7d5f28 !important; line-height:1.4 !important; }
.hio__panel--navy .hio__kicker{ color:var(--gold-br); }

/* titles */
.hio__title,.hio__h{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; -webkit-text-fill-color:currentColor !important; text-shadow:none !important; opacity:1 !important; -webkit-text-stroke:0 !important; }
.hio__title{ font-family:var(--serif) !important; font-weight:700 !important; color:var(--head) !important; font-size:clamp(34px,5.4vw,58px) !important; line-height:1.08 !important; letter-spacing:.005em; text-transform:uppercase; margin:14px 0 0 !important; }
.hio__h{ font-family:var(--serif) !important; font-weight:700 !important; color:var(--head) !important; font-size:clamp(28px,4vw,44px) !important; line-height:1.12 !important; margin:12px 0 0 !important; }
.hio__panel--navy .hio__h{ color:#f3ead7 !important; }

/* star rule */
.hio__rule{ display:flex; align-items:center; justify-content:center; gap:16px; margin:22px auto 0; max-width:340px; }
.hio__rule span{ height:1px; flex:1; background:linear-gradient(90deg,transparent,#a88553); }
.hio__rule span:last-child{ background:linear-gradient(90deg,#a88553,transparent); }
.hio__rule svg{ color:#a07d3f; flex:none; }
.hio__panel--navy .hio__rule svg{ color:var(--gold-br); }
.hio__panel--navy .hio__rule span{ background:linear-gradient(90deg,transparent,var(--gold-br)); }
.hio__panel--navy .hio__rule span:last-child{ background:linear-gradient(90deg,var(--gold-br),transparent); }

/* lead */
.hio .hio__lead{ font-size:clamp(17px,2vw,20px) !important; line-height:1.6 !important; color:#4a3f2c; max-width:600px; margin:24px auto 0; font-weight:500; }
/* КАПКАН: .tab-contents p:last-child{margin:0} темы (спец. 0,2,1) бьёт .hio__lead (0,2,0), когда лид — последний в панели. Добить специфичностью. */
.hio .hio__lead:last-child{ margin:24px auto 0; }
.hio__panel--navy .hio__lead{ color:#cdd8d3; }

/* ribbon */
.hio__ribbon{ display:inline-flex; align-items:center; gap:14px; margin:30px auto 0; padding:13px 30px; border-radius:8px; background:var(--emerald); border:1.5px solid var(--gold-br); position:relative; box-shadow:0 10px 26px -12px rgba(18,58,44,.6),inset 0 0 0 3px rgba(200,162,74,.14); }
.hio__ribbon b, .hio__ribbon strong{ font-weight:700; font-size:clamp(12px,1.5vw,14.5px) !important; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); line-height:1.4 !important; }
.hio__ribbon svg{ color:var(--gold-br); flex:none; }

/* content list */
.hio li{ list-style:none !important; }
.hio li::before,.hio li::marker{ content:none !important; display:none !important; }
.hio__list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 46px; max-width:820px; margin:28px auto 0; text-align:left; }
.hio__list li{ display:block; position:relative; margin:0 !important; padding:10px 4px 10px 32px; border-bottom:1px solid rgba(224,189,102,.16); font-size:16px; }
.hio__list li svg{ position:absolute; left:4px; top:10px; color:var(--gold-br); width:14px; height:1.5em; margin:0; }
.hio__list li span{ font-size:1em !important; line-height:1.5 !important; color:#dfe7e1; font-weight:500; }
.hio__panel--navy .hio__list li{ color:#dfe7e1; } /* MK 20260813: список на навы был тёмным — в разметке <li> без <span> */

/* steps — timeline with emerald number-medallions */
.hio__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px; margin:34px auto 0; max-width:820px; position:relative; }
.hio__steps::before{ content:""; position:absolute; top:18px; left:17%; right:17%; height:1px; background:linear-gradient(90deg,transparent,var(--gold) 16%,var(--gold) 84%,transparent); z-index:0; }
.hio__step{ position:relative; z-index:1; text-align:center; padding:0 6px; }
.hio__num{ width:36px; height:36px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 50% 30%, var(--num-a), var(--num-b) 72%); border:1.5px solid var(--gold-br); color:var(--gold-lt) !important; font-family:var(--serif) !important; font-weight:700 !important; font-size:18px !important; line-height:1 !important; box-shadow:inset 0 0 0 2px rgba(200,162,74,.14), 0 6px 14px -8px rgba(18,58,44,.5); }
.hio__num span{ display:block; line-height:1 !important; transform:translateY(-0.143em); }
.hio__step p{ font-size:15.5px !important; line-height:1.55 !important; color:#4a3f2c !important; margin:0 !important; }

/* example: переписка с ассистентом и страницы PDF.
   Размечены per-SKU (data-sku-content) и ПЕРЕНОСЯТСЯ скриптом в блок покупки
   под галереей — к первому выбору формата (владелец, 2026-09-15). Там же
   сворачиваются в <details>, чтобы не растягивать блок покупки простынёй.
   Механика аккордеона — нативная, как у .hio__faq ниже: никакого своего JS.
   Базовые цвета — СВЕТЛЫЕ: блок покупки живёт вне .hio, на фоне страницы.
   Ниже — тёмная тема сайта и случай, когда пример остался внутри тёмной панели
   (товар без вариантов: блок покупки не строится, перенос не случается). */
.hio__tiers__ex{ max-width:680px; margin:14px auto 0; padding:0 2px; }
.hio__exdet{ max-width:680px; margin:16px auto 0; }
.hio__tiers__ex .hio__exdet{ margin-top:0; }
.hio__exdet>summary{ display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; list-style:none; padding:11px 18px; border-radius:12px; border:1px solid rgba(150,112,40,.38); background:rgba(255,250,236,.62); color:#7d5f28 !important; font-size:14.5px !important; line-height:1.3 !important; font-weight:700; letter-spacing:.02em; text-align:center; -webkit-tap-highlight-color:transparent; transition:border-color .2s, background .2s; }
.hio__exdet>summary::marker{ content:""; }
.hio__exdet>summary::-webkit-details-marker{ display:none; }
.hio__exdet>summary::after{ content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
.hio__exdet[open]>summary::after{ transform:rotate(-135deg) translateY(-2px); }
.hio__exdet>summary:hover{ border-color:rgba(150,112,40,.7); background:rgba(255,250,236,.9); }
.hio__ex{ margin:14px 0 0; text-align:left; }
.hio__ex__note{ margin:12px 0 0 !important; font-size:13.5px !important; line-height:1.5 !important; color:#6b5a3e !important; text-align:center; }

/* чат */
.hio__chat{ display:grid; gap:8px; }
.hio__chat__topic{ justify-self:center; padding:7px 16px; border-radius:11px; border:1px solid rgba(150,112,40,.35); background:rgba(200,162,74,.14); color:#7d5f28 !important; font-size:13.5px !important; line-height:1.35 !important; font-weight:600; letter-spacing:.02em; }
.hio__chat p{ margin:0 !important; }
.hio__chat p + p{ margin-top:8px !important; }
.hio__chat__b,.hio__chat__m{ max-width:82%; padding:11px 15px; border-radius:15px; font-size:15px !important; line-height:1.55 !important; }
.hio__chat__b{ justify-self:start; border-bottom-left-radius:5px; background:rgba(255,252,244,.86); border:1px solid rgba(150,112,40,.26); color:#3f3524 !important; }
.hio__chat__m{ justify-self:end; border-bottom-right-radius:5px; background:linear-gradient(135deg,#e6c87e,#cfa94f); border:1px solid rgba(150,112,40,.4); color:#1a1206 !important; }
.hio__chat__b b,.hio__chat__b strong{ color:#6d5320 !important; font-weight:700; }
.hio__chat__more{ justify-self:start; max-width:82%; padding:9px 15px; border-radius:15px; border:1px dashed rgba(150,112,40,.34); color:#6b5a3e !important; font-size:13.5px !important; line-height:1.45 !important; font-style:italic; }

/* страницы PDF, а с модификатором --ph — кадры переписки с телефона.
   Соотношение 34/68 — вертикальный экран; клик по кадру открывает его целиком
   (обычная ссылка на полноразмерный файл: на старом WebView это единственное,
   что работает без осечек). */
.hio__pages{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.hio__pages--ph{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
/* ⚠️ height:auto обязателен. У картинок проставлены атрибуты width/height (чтобы
   страница не прыгала при загрузке), и без height:auto браузер берёт высоту из
   атрибута — aspect-ratio молча игнорируется, кадр растягивается в столбик. */
.hio__pages--ph .hio__pages__i img{ aspect-ratio:34/68; height:auto; border-radius:10px; }
.hio__pages--ph .hio__pages__i span{ font-size:11.5px !important; }
.hio__pages__i{ display:block; margin:0; }
.hio__pages__i img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:top center; border-radius:8px; border:1px solid rgba(150,112,40,.34); background:#f4eee1; box-shadow:0 10px 22px -14px rgba(60,45,15,.6); }
.hio__pages__i span{ display:block; margin-top:7px; font-size:12px !important; line-height:1.35 !important; text-align:center; color:#6b5a3e !important; }
@media (max-width:560px){
  .hio__pages{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .hio__pages--ph{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .hio__chat__b,.hio__chat__m,.hio__chat__more{ max-width:92%; }
}
/* просмотр кадров во весь экран: свайп/стрелки, без ухода на другую страницу.
   ⚠️ Ленты из кадров тут НЕТ намеренно: показываем ОДНУ картинку и меняем её —
   движущиеся ленты (transform / scroll-snap) на старом WebView не рисуются,
   это уже ловили на галерее категорий (ptg-swipe.js). */
.hio__lb{ position:fixed; inset:0; z-index:99999; display:none; flex-direction:column; background:rgba(5,9,16,.95); -webkit-tap-highlight-color:transparent; }
.hio__lb.is-on{ display:flex; }
.hio__lb__stage{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:44px 12px 8px; }
.hio__lb__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 20px 50px -20px rgba(0,0,0,.9); }
.hio__lb__cap{ flex:none; padding:10px 16px 18px; text-align:center; color:#e9dfc6 !important; font-size:14px !important; line-height:1.4 !important; }
.hio__lb__cap b{ display:block; color:#f1dda2 !important; font-weight:700; margin-bottom:3px; }
.hio__lb button{ position:absolute; border:1px solid rgba(224,189,102,.4); background:rgba(10,20,36,.72); color:#f1dda2 !important; border-radius:50%; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; line-height:1 !important; font-family:var(--sans,sans-serif) !important; transition:background .2s,border-color .2s; }
.hio__lb button:hover{ background:rgba(20,36,60,.95); border-color:rgba(224,189,102,.8); }
.hio__lb__x{ top:10px; right:12px; width:42px; height:42px; font-size:26px !important; }
.hio__lb__p,.hio__lb__n{ top:50%; margin-top:-26px; width:52px; height:52px; font-size:30px !important; }
.hio__lb__p{ left:10px; } .hio__lb__n{ right:10px; }
.hio__lb button[disabled]{ opacity:.25; cursor:default; }
@media (max-width:560px){
  .hio__lb__stage{ padding:40px 6px 6px; }
  .hio__lb__p,.hio__lb__n{ width:42px; height:42px; margin-top:-21px; font-size:24px !important; }
  .hio__lb__cap{ font-size:12.5px !important; padding:8px 12px 14px; }
}
.hio__pages__i a{ display:block; text-decoration:none !important; border-bottom:0 !important; }
.hio__pages__i a:hover img{ border-color:rgba(150,112,40,.75); transform:translateY(-2px); }
.hio__pages__i img{ transition:transform .2s, border-color .2s; }

/* тёмная тема сайта — и тот же вид внутри тёмной панели описания */
html[data-tp-mode="dark"] .hio__exdet>summary,
.hio__panel--navy .hio__exdet>summary{ border-color:rgba(224,189,102,.38) !important; background:rgba(224,189,102,.08) !important; color:#f1dda2 !important; }
html[data-tp-mode="dark"] .hio__exdet>summary:hover,
.hio__panel--navy .hio__exdet>summary:hover{ border-color:rgba(224,189,102,.7) !important; background:rgba(224,189,102,.14) !important; }
html[data-tp-mode="dark"] .hio__chat__topic,
.hio__panel--navy .hio__chat__topic{ border-color:rgba(224,189,102,.45) !important; background:rgba(224,189,102,.1) !important; color:#f1dda2 !important; }
html[data-tp-mode="dark"] .hio__chat__b,
.hio__panel--navy .hio__chat__b{ background:rgba(233,223,198,.09) !important; border-color:rgba(224,189,102,.22) !important; color:#e9dfc6 !important; }
html[data-tp-mode="dark"] .hio__chat__b b, html[data-tp-mode="dark"] .hio__chat__b strong,
.hio__panel--navy .hio__chat__b b,.hio__panel--navy .hio__chat__b strong{ color:#f1dda2 !important; }
html[data-tp-mode="dark"] .hio__chat__more,
.hio__panel--navy .hio__chat__more{ border-color:rgba(224,189,102,.34) !important; color:#9fb0b2 !important; }
html[data-tp-mode="dark"] .hio__ex__note, html[data-tp-mode="dark"] .hio__pages__i span,
.hio__panel--navy .hio__ex__note,.hio__panel--navy .hio__pages__i span{ color:#9fb0b2 !important; }
html[data-tp-mode="dark"] .hio__pages__i img,
.hio__panel--navy .hio__pages__i img{ border-color:rgba(224,189,102,.34) !important; background:#0a1424 !important; }

/* note */
.hio__note{ max-width:680px; margin:32px auto 0; display:flex; gap:13px; align-items:flex-start; text-align:left; padding:18px 22px; border-radius:12px; border:1px solid rgba(120,90,40,.42); background:rgba(255,250,236,.42); }
.hio__note svg{ color:var(--gold-dp); flex:none; margin-top:2px; }
.hio__note p{ font-size:13.5px !important; line-height:1.65 !important; color:#54472f !important; margin:0 !important; }
.hio__note b, .hio__note strong{ color:var(--head); font-weight:700; }

/* trust strip */
.hio__assure{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px 46px; padding:36px 20px 4px; background:linear-gradient(180deg,#070e1d,#040b19); }
.hio__assure div{ display:inline-flex; align-items:center; gap:13px; font-size:18px !important; line-height:1.4 !important; font-weight:600; color:#dde7e0; }
.hio__assure svg{ width:26px !important; height:26px !important; color:var(--gold-br); flex:none; }

/* CTA */
.hio__herocta{ margin:30px auto 0; text-align:center; }
.hio__cta{ text-align:center; padding:22px 20px 44px; background:linear-gradient(180deg,#040b19,#030a15); }
.hio__order{ display:inline-flex !important; align-items:center; justify-content:center; gap:12px; width:auto !important; min-width:300px; max-width:100%; height:auto !important; min-height:0 !important; padding:19px 48px !important; margin:0 !important; border:1px solid rgba(150,112,40,.42) !important; border-radius:13px !important; cursor:pointer; -webkit-appearance:none; appearance:none; font-family:var(--sans) !important; font-size:clamp(13px,3.6vw,16px) !important; line-height:1.25 !important; font-weight:700 !important; letter-spacing:.09em; text-transform:uppercase; white-space:normal; text-align:center; color:#1a1206 !important; background:linear-gradient(135deg,#f0d488,#d4af52 47%,#bd923c) !important; box-shadow:0 14px 30px -14px rgba(150,112,40,.5),inset 0 1px 0 rgba(255,250,225,.55) !important; transition:transform .2s,box-shadow .2s,filter .2s; }
.hio__order:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.hio__order:active{ transform:translateY(0); }

/* hide theme description tab/border only for this product */
.wm-tabs:has(.hio) .product-nav{ display:none !important; }
#product-tabs:has(.hio){ border:0 !important; padding:0 !important; box-shadow:none !important; }
#product-accordion:has(.hio) .uk-accordion-title{ display:none !important; }
#product-accordion:has(.hio) .uk-accordion-content{ border:0 !important; padding:0 !important; }

/* responsive */
@media (max-width:760px){
  .hio__frame{ inset:10px; }
  .hio__corner--tl,.hio__corner--tr{ top:5.5px; } .hio__corner--bl,.hio__corner--br{ bottom:5.5px; }
  .hio__corner--tl,.hio__corner--bl{ left:5.5px; } .hio__corner--tr,.hio__corner--br{ right:5.5px; }
  .hio__medal{ width:118px; height:118px; } .hio__medal--sm{ width:96px; height:96px; }
  .hio__title{ font-size:clamp(26px,7.4vw,38px) !important; }
  .hio__h{ font-size:clamp(24px,6.4vw,34px) !important; }
  .hio .hio__lead{ font-size:16px !important; }
  .hio__list{ grid-template-columns:1fr; gap:2px; margin-top:26px; }
  .hio__list li{ padding:9px 2px 9px 30px; font-size:15.5px; }
  .hio__list li svg{ left:2px; top:9px; }
  .hio__ribbon{ padding:11px 18px; gap:9px; max-width:100%; }
  .hio__ribbon b, .hio__ribbon strong{ white-space:normal; letter-spacing:.13em; line-height:1.4 !important; }
  .hio__steps{ grid-template-columns:1fr; gap:16px; max-width:440px; }
  .hio__steps::before{ display:none; }
  .hio__step{ display:flex; align-items:center; gap:16px; text-align:left; padding:0; }
  .hio__num{ margin:0; width:30px; height:30px; font-size:15px !important; flex:none; }
  .hio__step p{ text-align:left; }
  .hio__assure{ gap:15px 28px; }
  .hio__assure div{ font-size:16px !important; gap:11px; }
  .hio__assure svg{ width:23px !important; height:23px !important; }
  .hio__order{ width:100% !important; min-width:0; padding:17px 14px !important; }
}
/* ===== MK: .hio выбор тарифа (варианты покупки / SKU) ===== */
.hio__tiers{ max-width:880px; margin:32px auto 0; }
.hio__tiers .hio__kicker{ display:block; text-align:center; margin-bottom:16px; color:#a9822f !important; }
/* вариант «под галереей» — вставляется JS вне блока .hio, поэтому самодостаточный */
.hio__tiers--top{ order:2; flex:0 0 100%; width:100%; box-sizing:border-box; margin:18px auto 24px; padding:0 clamp(12px,3vw,20px); }
.hio__tiers--top .hio__tierlist{ max-width:880px; margin:0 auto; }
.hio__tierlist{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hio__tier{ position:relative; cursor:pointer; text-align:left; padding:20px 18px 18px; border-radius:14px;
  background:linear-gradient(180deg,#f7f0e2,#efe4d2); border:1.6px solid rgba(150,112,40,.32);
  box-shadow:0 7px 18px -12px rgba(60,45,15,.4); transition:transform .2s, border-color .2s, box-shadow .2s; -webkit-tap-highlight-color:transparent; }
.hio__tier:hover{ transform:translateY(-2px); border-color:rgba(150,112,40,.6); }
.hio__tier.is-active{ border-color:#c9a24a; box-shadow:0 12px 26px -12px rgba(201,162,74,.6), inset 0 0 0 2px rgba(201,162,74,.4); }
.hio__tier__radio{ position:absolute; top:16px; right:16px; width:20px; height:20px; border-radius:50%; border:2px solid #b08a3e; transition:.2s; }
.hio__tier.is-active .hio__tier__radio{ border-color:#c9a24a; background:radial-gradient(circle,#c9a24a 42%,transparent 48%); }
.hio__tier__name{ font-family:'PlayfairHio',Georgia,'Times New Roman',serif !important; font-weight:700 !important; font-size:18px !important; color:var(--head,#123528) !important; line-height:1.18 !important; padding-right:28px; }
.hio__tier__desc{ font-size:13px !important; line-height:1.42 !important; color:#5b5340; margin-top:7px; min-height:36px; }
.hio__tier__price{ margin-top:12px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.hio__tier__price b, .hio__tier__price strong{ font-family:'PlayfairHio',Georgia,'Times New Roman',serif !important; font-weight:700 !important; font-size:23px !important; color:var(--head-deep,#0f3d2e) !important; }
.hio__tier__price s{ font-size:14px !important; color:#a58f66; }
@media (max-width:760px){ .hio__tiers{ margin-top:24px; } /* minmax(0,1fr), а не 1fr: у 1fr минимум = min-content, и длинное слово в описании тарифа распирало колонку шире контейнера — карточки вылезали за панель (поймано 2026-09-03 на 305px) */ .hio__tierlist{ grid-template-columns:minmax(0,1fr); gap:10px; } .hio__tier{ padding:15px 16px; min-width:0; } .hio__tier__desc{ min-height:0; } }

/* ТЁМНАЯ ТЕМА: селекторы тарифов .hio__tier под навы-язык (2026-08-13) — в светлой без изменений */
html[data-tp-mode="dark"] .hio__tiers .hio__kicker{ color:#e0bd66 !important; }
html[data-tp-mode="dark"] .hio__tier{ background:linear-gradient(180deg,#0e2f49,#0a2135); border-color:rgba(224,189,102,.30); box-shadow:0 8px 20px -12px rgba(0,0,0,.6); }
html[data-tp-mode="dark"] .hio__tier:hover{ border-color:rgba(224,189,102,.6); }
html[data-tp-mode="dark"] .hio__tier.is-active{ border-color:#e0bd66; box-shadow:0 12px 26px -12px rgba(224,189,102,.5), inset 0 0 0 2px rgba(224,189,102,.4); }
html[data-tp-mode="dark"] .hio__tier__name{ color:#f3ead7 !important; }
html[data-tp-mode="dark"] .hio__tier__desc{ color:#b9c6c0 !important; }
html[data-tp-mode="dark"] .hio__tier__price b, html[data-tp-mode="dark"] .hio__tier__price strong{ color:#f1dda2 !important; }
html[data-tp-mode="dark"] .hio__tier__price s{ color:#8a9a90 !important; }
html[data-tp-mode="dark"] .hio__tier__radio{ border-color:#c9a24a; }
html[data-tp-mode="dark"] .hio__tier.is-active .hio__tier__radio{ border-color:#e0bd66; background:radial-gradient(circle,#e0bd66 42%,transparent 48%); }
/* ===== /MK .hio тарифы ===== */

/* ===== MK: .hio motion (жизнь/дыхание) 20260811 ===== */
@keyframes hio-breathe{ 0%,100%{ filter:drop-shadow(0 14px 26px rgba(0,0,0,.28)); } 50%{ filter:drop-shadow(0 14px 26px rgba(0,0,0,.28)) drop-shadow(0 0 16px rgba(224,189,102,.42)); } }
@keyframes hio-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes hio-twinkle{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes hio-sheen{ 0%{ transform:translateX(-280%) skewX(-18deg); } 62%,100%{ transform:translateX(620%) skewX(-18deg); } }

.hio__medal{ animation:hio-float 7s ease-in-out infinite, hio-breathe 6s ease-in-out infinite; }
.hio__topstar{ animation:hio-twinkle 3.6s ease-in-out infinite; }
.hio__rule svg{ animation:hio-twinkle 3.6s ease-in-out infinite; animation-delay:.6s; }
.hio__ribbon svg{ animation:hio-twinkle 3.8s ease-in-out infinite; }
.hio__ribbon svg:last-of-type{ animation-delay:1.1s; }

.hio__order{ position:relative; overflow:hidden; }
.hio__order::after{ content:""; position:absolute; top:0; left:0; width:34%; height:100%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,246,214,.5),transparent); transform:translateX(-280%) skewX(-18deg); animation:hio-sheen 6.5s ease-in-out infinite; }

/* scroll-reveal (включается JS через .hio--rv; без JS всё видно сразу) */
.hio--rv .hio-rv{ opacity:0; transform:translateY(24px); transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); }
.hio--rv .hio-rv.is-in{ opacity:1; transform:none; }
.hio--rv .hio-rv-fade{ opacity:0; transition:opacity .9s ease; }
.hio--rv .hio-rv-fade.is-in{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .hio__medal,.hio__topstar,.hio__rule svg,.hio__ribbon svg,.hio__order::after{ animation:none !important; }
  .hio--rv .hio-rv,.hio--rv .hio-rv-fade{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* ===== /MK .hio motion ===== */

/* ===== MK: правки страницы товара (галерея / подвал / полоска) 20260811 ===== */
/* миниатюры фото — по центру */
.image-preview-list{ justify-content:center !important; }
/* убрать белую полоску/рамку контейнера описания под карточкой .hio */
#product-description:has(.hio){ padding:0 !important; border:0 !important; }
.content:has(.hio){ margin-bottom:0 !important; }
/* нижняя фикс-панель не должна перекрывать подвал.
   ВАЖНО: body — это скролл-контейнер (height:100vh; overflow:auto), а Chromium
   игнорирует его собственный padding-bottom в конце прокрутки. Поэтому просвет
   даём ПОДВАЛУ (его padding честно увеличивает scrollHeight). Замер: +padding−36
   идёт в maxScroll; текущее перекрытие ~48px, 124px перекрывает с запасом,
   env(safe-area) в подвале и в панели взаимно компенсируются. */
@media (max-width:767px){
  html.tp-product body#themeOverride{ padding-bottom:0 !important; }
  html.tp-product .tp-footer{ padding-bottom:calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* ===== /MK правки страницы товара ===== */

/* ===== /MK .hio ===== */

/* ===== MK: .hio v2 — под НОВУЮ инфографику (шампань-золото + почти чёрный навы) 20260817 ===== */
/* Дописано в конец: перекрывает палитру панелей .hio из блока 20260811 (та же спецификация, ниже по файлу). */

.hio{
  --champ-lt:#f3e3ba; --champ:#ddbf95; --champ-dp:#c6a476; --champ-edge:#a88553;
  --ink-1:#0f1523; --ink-2:#040b19; --ink-3:#030a15;
}

/* --- ПОЛЯ ПАНЕЛЕЙ: 7vw считался от ОКНА, а .hio живёт в колонке ~620-640px ---
   → на десктопе съедало ~90px с каждой стороны и колонка текста схлопывалась. Считаем от блока. */
@media (min-width:761px){
  .hio__panel{ padding:44px 36px; }
  .hio__assure{ padding:40px 36px 8px; }
  .hio__cta{ padding:26px 36px 52px; }
}

/* --- ПАНЕЛИ: шампань-золото вместо крема --- */
/* лучи из верхнего-левого угла (как на инфографике) */
.hio__panel--cream::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:conic-gradient(from 72deg at 4% -6%,
    transparent 0deg, rgba(255,252,232,.62) 5deg, transparent 11deg,
    transparent 14deg, rgba(255,252,232,.45) 19deg, transparent 25deg,
    transparent 29deg, rgba(255,252,232,.5) 34deg, transparent 41deg,
    transparent 46deg, rgba(255,252,232,.32) 51deg, transparent 58deg);
  -webkit-mask-image:radial-gradient(135% 125% at 0% 0%, #000 8%, rgba(0,0,0,.55) 42%, transparent 78%);
          mask-image:radial-gradient(135% 125% at 0% 0%, #000 8%, rgba(0,0,0,.55) 42%, transparent 78%);
}
.hio__panel--navy::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:conic-gradient(from 72deg at 4% -6%,
    transparent 0deg, rgba(236,206,146,.20) 5deg, transparent 11deg,
    transparent 14deg, rgba(236,206,146,.14) 19deg, transparent 25deg,
    transparent 29deg, rgba(236,206,146,.17) 34deg, transparent 41deg,
    transparent 46deg, rgba(236,206,146,.10) 51deg, transparent 58deg);
  -webkit-mask-image:radial-gradient(135% 125% at 0% 0%, #000 8%, rgba(0,0,0,.5) 42%, transparent 76%);
          mask-image:radial-gradient(135% 125% at 0% 0%, #000 8%, rgba(0,0,0,.5) 42%, transparent 76%);
}
/* рамка/уголки — тёплое золото инфографики */

/* текст на шампани — темнее, чтобы держать контраст */
.hio__panel--cream .hio__lead b, .hio__panel--cream .hio__lead strong{ color:var(--head); font-weight:700; }
.hio__panel--navy .hio__lead b, .hio__panel--navy .hio__lead strong{ color:#f1dda2; font-weight:700; }

/* --- ХУДОЖЕСТВЕННОЕ ПАННО (дерево/тропа/лотос) --- */
.hio__art{ display:block; width:100%; max-width:430px; margin:0 auto; height:auto; border-radius:10px; }
/* края растворяются в фоне панели — картинка и панель одного тона */
.hio__art{
  -webkit-mask-image:radial-gradient(78% 76% at 50% 48%, #000 40%, transparent 84%);
          mask-image:radial-gradient(78% 76% at 50% 48%, #000 40%, transparent 84%);
}

/* --- ЛОТОС-РАЗДЕЛИТЕЛЬ (низ панели, как на инфографике) --- */
.hio__lotus{ display:flex; align-items:center; justify-content:center; gap:14px; margin:30px auto 0; color:#96742f; }
.hio__panel--navy .hio__lotus{ color:var(--gold-br); }
.hio__lotus svg{ flex:none; }
.hio__lotus i{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.75; font-style:normal; }

/* --- ПЛОТНЫЙ СПИСОК .hio__list НА ШАМПАНИ ---
   базовые правила писались под навы-панель (светлый текст, бледное золото) → на золоте
   текст уходил в холодный серо-зелёный, звёзды и разделители почти пропадали. */
.hio__panel--cream .hio__list li{ color:#4a3f2c; border-bottom-color:rgba(168,133,83,.22); }
.hio__panel--cream .hio__list li svg{ color:#a07d3f; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__list li{ color:#dfe7e1; border-bottom-color:rgba(224,189,102,.16); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__list li svg{ color:var(--gold-br); }

/* --- ПОДЗАГОЛОВОК ВНУТРИ ПАНЕЛИ (для длинных описаний с подразделами) --- */
.hio__sub{
  font-family:var(--serif) !important; font-weight:700 !important;
  font-size:clamp(19px,2.5vw,24px) !important; line-height:1.25 !important;
  color:var(--head) !important; margin:34px 0 0 !important; text-align:center;
}
.hio__sub:first-child{ margin-top:0 !important; }
.hio__panel--navy .hio__sub{ color:#f1dda2 !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__sub{ color:#f1dda2 !important; }
@media (max-width:760px){ .hio__sub{ margin-top:30px !important; } }

/* --- БЛОК ВОПРОСОВ («Чего я действительно хочу?» …) --- */
.hio__qs{ max-width:620px; margin:26px auto 0; display:grid; gap:10px; text-align:center; }
/* на десктопе вопросы в 2 колонки — иначе длинный список плашек растягивает страницу */
@media (min-width:761px){
  .hio__qs{ grid-template-columns:1fr 1fr; align-items:stretch; }
  .hio__qs p:only-child{ grid-column:1 / -1; }
}
.hio__qs p{
  font-family:var(--serif) !important; font-weight:700 !important;
  font-size:clamp(17px,2.2vw,21px) !important; line-height:1.35 !important;
  color:var(--head) !important; margin:0 !important;
  padding:11px 16px; border-radius:10px;
  background:rgba(255,250,235,.42); border:1px solid rgba(168,133,83,.28);
}
.hio__panel--navy .hio__qs p{ color:#f3ead7 !important; background:rgba(255,244,214,.05); border-color:rgba(224,189,102,.24); }

/* --- ПУНКТЫ С МЕДАЛЬОНОМ/ЗВЕЗДОЙ (что даёт / для кого / как делаем) --- */
.hio__pts{ list-style:none; display:grid; gap:12px; max-width:760px; margin:28px auto 0; text-align:left; }
/* ⚠️ НЕ flex: при flex КАЖДЫЙ потомок <li> становится колонкой, и вводное <b>…</b>
   отрывалось в отдельный узкий столбец. Звезда — абсолютом, текст течёт сплошняком. */
.hio__pts li{
  display:block; position:relative; margin:0 !important; padding:13px 16px 13px 51px;
  border-radius:12px; font-size:16.5px !important; line-height:1.5 !important;
  background:rgba(255,250,235,.36); border:1px solid rgba(168,133,83,.26); color:#403524;
}
.hio__panel--navy .hio__pts li{ background:rgba(255,244,214,.045); border-color:rgba(224,189,102,.22); color:#e2dac6; }
.hio__pts li svg{ position:absolute; left:16px; top:14.5px; width:20px; height:20px; margin:0; color:#a07d3f; }
.hio__panel--navy .hio__pts li svg{ color:var(--gold-br); }
.hio__pts li b, .hio__pts li strong{ font-weight:700; color:var(--head); }
.hio__panel--navy .hio__pts li b, .hio__panel--navy .hio__pts li strong{ color:#f1dda2; }
/* компактный вариант в 2 колонки на широких */
@media (min-width:900px){ .hio__pts--2{ grid-template-columns:1fr 1fr; } }

/* --- МЕДАЛЬОН ФОРМАТА ВНУТРИ КАРТОЧКИ-ТАРИФА --- */
/* карточки тарифов становятся «форматами»: медальон сверху, текст по центру.
   Селектор под галереей клонирует эту же разметку (JS) → медальоны там тоже, но мельче. */
.hio__tier{ text-align:center; padding-top:22px; }
.hio__tier__ico{ width:84px; height:84px; margin:0 auto 13px; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,.26)); }
.hio__tier__name{ padding-right:0 !important; }
.hio__tier__desc{ margin-top:8px; }
.hio__tier__price{ justify-content:center; }
.hio__tier__radio{ top:12px; right:12px; }
.hio__tiers--top .hio__tier__ico{ width:56px; height:56px; margin-bottom:10px; }
@media (max-width:760px){
  /* на телефоне — горизонтально: медальон слева, текст справа */
  .hio__tier{ display:grid; grid-template-columns:60px 1fr; grid-template-areas:"ico name" "ico desc" "ico price"; gap:0 14px; text-align:left; align-items:center; padding-top:15px; }
  .hio__tier__ico{ grid-area:ico; width:60px; height:60px; margin:0; }
  .hio__tier__name{ grid-area:name; padding-right:26px !important; }
  .hio__tier__desc{ grid-area:desc; margin-top:4px; }
  .hio__tier__price{ grid-area:price; justify-content:flex-start; margin-top:7px; }
  .hio__tiers--top .hio__tier__ico{ width:60px; height:60px; }
}

/* панель форматов теперь НАВЫ → шаги и дисклеймер под тёмный фон */
.hio__panel--navy .hio__step p{ color:#c3ccc6 !important; }
.hio__panel--navy .hio__note{ border-color:rgba(224,189,102,.34); background:rgba(255,244,214,.05); }
.hio__panel--navy .hio__note p{ color:#b9c2bb !important; }
.hio__panel--navy .hio__note b, .hio__panel--navy .hio__note strong{ color:#f1dda2; }
.hio__panel--navy .hio__note svg{ color:var(--gold-br); }

/* кнопка заказа прямо под выбором варианта (блок у галереи) */
.hio__tiers__cta{ text-align:center; margin-top:18px; }
@media (max-width:760px){ .hio__tiers__cta{ margin-top:14px; } .hio__tiers__cta .hio__order{ width:100% !important; min-width:0; padding:17px 14px !important; } }

/* цена под галереей у товара без вариантов (блок строит JS) */
.hio__buyprice{ margin:0 0 2px; }
.hio__buyprice b{ font-size:27px !important; }

/* полный текст формата (показывается по выбранному тарифу) */
.hio .hio__fmtlead{
  max-width:640px; margin:28px auto 4px; text-align:center;
  font-size:16.5px !important; line-height:1.55 !important; color:#4a3f2c !important;
}
.hio__panel--navy .hio__fmtlead{ color:#c8d0cb !important; }

/* --- ЗАКРЫВАЮЩАЯ СТРОКА --- */
.hio .hio__close{
  max-width:700px; margin:32px auto 0; text-align:center;
  font-family:var(--serif) !important; font-weight:700 !important;
  font-size:clamp(18px,2.3vw,23px) !important; line-height:1.42 !important;
  color:var(--head) !important;
}
.hio .hio__close:last-child{ margin:32px auto 0; }
.hio__panel--navy .hio__close,
.hio__cta .hio__close{ color:#f1dda2 !important; }   /* .hio__cta — тёмная панель, но НЕ .hio__panel--navy */

/* --- CTA-панель и полоса доверия под новую палитру --- */

/* --- адаптив --- */
@media (max-width:760px){
  .hio__art{ max-width:300px; }
  .hio__qs{ margin-top:24px; gap:8px; }
  .hio__qs p{ font-size:16.5px !important; padding:9px 13px; }
  .hio__pts{ margin-top:26px; gap:10px; }
  .hio__pts li{ padding:11px 13px 11px 43px; font-size:15.5px !important; }
  .hio__pts li svg{ left:13px; top:13px; width:18px; height:18px; }
  .hio .hio__fmtlead{ font-size:15.5px !important; }
  .hio .hio__close{ margin-top:24px; font-size:17.5px !important; }
  .hio__lotus{ margin-top:22px; }
}
/* ===== ТЁМНАЯ ТЕМА САЙТА: описание идёт за темой (владелец, 2026-08-17) =====
   Светлая: шампань-золото ↔ почти чёрный (как инфографика).
   Тёмная: светлый навы ↔ почти чёрный — чередование сохраняется, но всё тёмное, в тон сайту (--tp-bg #041326).
   Панно вверху меняется на ТЁМНУЮ версию (обе картинки в разметке, лишняя прячется). */

/* --- панно светлое/тёмное ---
   ⚠️ base `.hio img{display:block}` (0,1,1) перебивает голый класс (0,1,0) → скрываем через `.hio .hio__art--*`. */
.hio .hio__art--dark{ display:none; }
html[data-tp-mode="dark"] .hio .hio__art--light{ display:none; }
html[data-tp-mode="dark"] .hio .hio__art--dark{ display:block; }

/* --- бывшая «шампань» панель в тёмной теме --- */
html[data-tp-mode="dark"] .hio__panel--cream{
  background:
    radial-gradient(120% 85% at 50% -12%, #1a2b45, transparent 62%),
    linear-gradient(158deg,#142943 0%,#0e1f36 46%,#0a1728 100%);
  color:#cdd8d3;
}
html[data-tp-mode="dark"] .hio__panel--cream::before{
  background:conic-gradient(from 72deg at 4% -6%,
    transparent 0deg, rgba(236,206,146,.20) 5deg, transparent 11deg,
    transparent 14deg, rgba(236,206,146,.14) 19deg, transparent 25deg,
    transparent 29deg, rgba(236,206,146,.17) 34deg, transparent 41deg,
    transparent 46deg, rgba(236,206,146,.10) 51deg, transparent 58deg);
}
html[data-tp-mode="dark"] .hio__panel--cream .hio__frame{ border-color:rgba(224,189,102,.7); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__frame::before{ border-color:rgba(224,189,102,.3); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__corner{ background:var(--gold-br); }

html[data-tp-mode="dark"] .hio__panel--cream .hio__title,
html[data-tp-mode="dark"] .hio__panel--cream .hio__h{ color:#f3ead7 !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__kicker{ color:var(--gold-br) !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__lead{ color:#cdd8d3; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__lead b, html[data-tp-mode="dark"] .hio__panel--cream .hio__lead strong{ color:#f1dda2; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__rule svg,
html[data-tp-mode="dark"] .hio__panel--cream .hio__topstar,
html[data-tp-mode="dark"] .hio__panel--cream .hio__lotus{ color:var(--gold-br); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__rule span{ background:linear-gradient(90deg,transparent,var(--gold-br)); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__rule span:last-child{ background:linear-gradient(90deg,var(--gold-br),transparent); }

html[data-tp-mode="dark"] .hio__panel--cream .hio__qs p{ color:#f3ead7 !important; background:rgba(255,244,214,.05); border-color:rgba(224,189,102,.24); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__pts li{ background:rgba(255,244,214,.045); border-color:rgba(224,189,102,.22); color:#e2dac6; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__pts li svg{ color:var(--gold-br); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__pts li b, html[data-tp-mode="dark"] .hio__panel--cream .hio__pts li strong{ color:#f1dda2; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__step p{ color:#c3ccc6 !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__fmtlead{ color:#c8d0cb !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__close{ color:#f1dda2 !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__note{ border-color:rgba(224,189,102,.34); background:rgba(255,244,214,.05); }
html[data-tp-mode="dark"] .hio__panel--cream .hio__note p{ color:#b9c2bb !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__note b, html[data-tp-mode="dark"] .hio__panel--cream .hio__note strong{ color:#f1dda2; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__note svg{ color:var(--gold-br); }
/* --- ПАЛИТРА АКЦЕНТА ПОД ИНФОГРАФИКУ ТОВАРА ---
   По умолчанию изумруд (ГиО, ТВОИ ДЕНЬГИ — зелёные медальоны).
   Цвета сняты с дисков медальонов: синий #001232, фиолетовый #27023c. */
.hio--blue{   --head:#152c56; --head-deep:#14315c; --num-a:#1b3a66; --num-b:#142c50; }
.hio--violet{ --head:#3d1a5c; --head-deep:#3a1a56; --num-a:#43205f; --num-b:#33184a; }
.hio--wine{   --head:#5a1c30; --head-deep:#4b1728; --num-a:#6a2338; --num-b:#4b1728; }
.hio--olive{  --head:#414718; --head-deep:#363c12; --num-a:#4b5320; --num-b:#363c12; }
.hio--bronze{ --head:#5e3510; --head-deep:#4e2b0c; --num-a:#6d4014; --num-b:#4e2b0c; }
.hio--crimson{ --head:#5e080d; --head-deep:#4e060a; --num-a:#6e0c11; --num-b:#4e060a; }
/* --- ИНФОСТРАНИЦЫ (.hio--info): текст по левому краю ---
   Владелец: «весь текст по центру, мне это не нравится. На инфостраницах так быть не должно».
   Центрирование остаётся у карточек товара; на текстовых страницах — обычная левая выключка,
   по центру только декор (картинки, лотос). */
.hio--info .hio__in{ text-align:left; }
.hio--info .hio__h{ text-align:center; }   /* по центру — ТОЛЬКО заголовки (и черта под ними) */
.hio--info .hio__lead{ max-width:none; margin-left:0; margin-right:0; text-indent:1.6em; }
/* выключка по ширине — только на широких экранах: в узкой колонке (305px) браузер
   растягивает пробелы, а переносы в русском Chromium/Яндекс не делает → «дыры». */
@media (min-width:761px){
  .hio--info .hio__lead{ text-align:justify; text-align-last:left; }
}
.hio--info .hio__list{ margin-left:0; margin-right:0; }
.hio--info .hio__art{ margin-left:auto; margin-right:auto; }
/* На телефоне текст левой выключкой начинался в 4px от декоративной рамки
   (padding 20px − frame inset 16px) — визуально «прилипал». Больше поля. */
@media (max-width:760px){
  .hio--info .hio__panel{ padding-left:28px; padding-right:28px; }
}
/* .hio__medal на инфостраницах теперь тоже ПЕРВЫЙ элемент панели (перед заголовком,
   как в остальной системе .hio) — базового margin:0 auto 26px хватает, свой не нужен. */

/* --- ИНФОСТРАНИЦЫ: замыкающий CTA (кнопка перехода, тот же золотой стиль, что
   и «Заказать» (.hio__order) на карточках товара — владелец попросила единообразия.
   НЕ переиспользуем сам класс .hio__order: его клик глобально ловится JS
   (delegated click → preventDefault → ищет #cart-form), а на инфостранице формы
   заказа нет — кнопка была бы мёртвой. Поэтому — свой класс с ТЕМИ ЖЕ стилями. */
.hio--info .hio__navcta{ margin-top:8px; text-align:center; }
.hio--info .hio__navcta .hio__lead{ text-align:center; text-indent:0; margin-top:24px; }
.hio__navbtn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:12px;
  width:auto !important; min-width:300px; max-width:100%; height:auto !important; min-height:0 !important;
  margin:20px 0 0 !important; padding:19px 48px !important;
  border:1px solid rgba(150,112,40,.42) !important; border-radius:13px !important;
  cursor:pointer; font-family:var(--sans) !important; font-size:clamp(13px,3.6vw,16px) !important;
  line-height:1.25 !important; font-weight:700 !important; letter-spacing:.09em; text-transform:uppercase;
  white-space:normal; text-align:center; text-decoration:none;
  color:#1a1206 !important; background:linear-gradient(135deg,#f0d488,#d4af52 47%,#bd923c) !important;
  box-shadow:0 14px 30px -14px rgba(150,112,40,.5),inset 0 1px 0 rgba(255,250,225,.55) !important;
  transition:transform .2s,box-shadow .2s,filter .2s; position:relative; overflow:hidden;
}
.hio__navbtn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.hio__navbtn:active{ transform:translateY(0); }
.hio__navbtn::after{ content:""; position:absolute; top:0; left:0; width:34%; height:100%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,246,214,.5),transparent);
  transform:translateX(-280%) skewX(-18deg); animation:hio-sheen 6.5s ease-in-out infinite; }
@media (max-width:760px){ .hio__navbtn{ width:100% !important; min-width:0; padding:17px 14px !important; } }
@media (prefers-reduced-motion:reduce){ .hio__navbtn::after{ animation:none !important; } }

/* ===== /MK .hio v2 ===== */

/* ===== MK: «Как это работает» в блоке покупки — МОБИЛЬНАЯ ветка (2026-08-29) =====
   Все стили .hio__tiers__steps* лежали ТОЛЬКО в @media(min-width:980px) ниже, поэтому
   на телефоне: (1) заголовок «Как это работает» прилипал к кнопке — не было ни
   margin-top, ни разделителя; (2) текст шагов оставался #4a3f2c (общее .hio__step p)
   и в тёмной теме давал контраст 1.2 на фоне #041326 — читать невозможно.
   ⚠️ Блок покупки живёт ВНЕ .hio, поэтому тёмные правила описания на него не действуют —
   тёмный вариант нужен свой. Секция стоит ПЕРЕД десктопным блоком v3: на ≥980
   его значения идут позже и перебивают эти. */
.hio__tiers__steps{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(168,133,83,.30); }
.hio__tiers__steps__h{
  font-family:'PlayfairHio',Georgia,'Times New Roman',serif; font-weight:700; font-size:16px;
  color:var(--head,#123528); margin-bottom:12px;
}
.hio__tiers__steps .hio__step p{ color:#5b5340 !important; }  /* .hio__step p красит с !important */
html[data-tp-mode="dark"] .hio__tiers__steps{ border-top-color:rgba(224,189,102,.22); }
html[data-tp-mode="dark"] .hio__tiers__steps__h{ color:#f1dda2; }
html[data-tp-mode="dark"] .hio__tiers__steps .hio__step p{ color:#c9d5cf !important; }

/* ===== MK: .hio ДЕСКТОП v3 — экран покупки + широкие панели описания (2026-08-24) =====
   Только @media(min-width:980px) — мобильная запись (v1/v2 выше) не трогается ни строкой.
   Сопутствующая правка сетки (.product-page_main → grid 520px+1fr) — в tvoy-put.css. */

/* --- колонка покупки (.hio__tiers--top): имя + питч над тарифами, гарантии под кнопкой.
   Сама колонка/сетка/sticky — в tvoy-put.css; здесь только контент внутри неё. */
.hio__tiers__buyhead,.hio__tiers__pitch,.hio__tiers__assure{ display:none; }
@media (min-width:980px){
  .hio__tiers__buyhead{ display:block; margin-bottom:17px; }
  .hio__tiers__buyhead h1.product_name{
    display:block !important; font-family:'PlayfairHio',Georgia,'Times New Roman',serif !important;
    font-weight:700 !important; font-size:clamp(23px,1.85vw,30px) !important; line-height:1.12 !important;
    letter-spacing:.01em; text-transform:uppercase; color:var(--head,#123528) !important; margin:0 0 8px !important;
  }
  .hio__tiers__pitch{ display:block; font-size:14.5px !important; line-height:1.5 !important; color:#5b5340; max-width:50ch; margin:0 !important; font-weight:500; }
  html[data-tp-mode="dark"] .hio__tiers__buyhead h1.product_name{ color:#f1dda2 !important; }
  html[data-tp-mode="dark"] .hio__tiers__pitch{ color:#cdd8d3; }

  /* кикер «вариант получения услуги» и сама кнопка — тоже компактнее */
  .hio__tiers--top .hio__kicker{ font-size:10.5px !important; }
  .hio__tiers--top .hio__order{
    padding:13px 26px !important; font-size:13.5px !important; border-radius:10px !important; letter-spacing:.07em;
  }

  /* гарантии — клон .hio__assure (низа описания), здесь без тёмной плашки — просто строка иконка+текст */
  .hio__tiers__assure{ display:block; margin-top:15px; }
  /* страховка от каскадных задержек анимации появления: в блоке покупки её нет,
     а унаследованный transition-delay давал разнобой цвета при смене темы */
  .hio__tiers__assure *, .hio__tiers__steps *{ transition-delay:0s !important; }
  .hio__tiers__assure .hio__assure{ background:none !important; padding:0 !important; justify-content:flex-start !important; gap:9px 22px !important; }
  .hio__tiers__assure .hio__assure div{ font-size:13.5px !important; color:#5b4c36; gap:8px !important; font-weight:600; }
  .hio__tiers__assure .hio__assure svg{ width:18px !important; height:18px !important; }
  html[data-tp-mode="dark"] .hio__tiers__assure .hio__assure div{ color:#c9d5cf; }

  /* --- «Как это работает» в колонке покупки: только у товаров с ОДНИМ вариантом
     (клон .hio__steps из описания, см. buildBuySteps в tgm-desc.js). Компактно:
     номер + строка, в столбик, без соединительной линии. --- */
  .hio__tiers__steps{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(168,133,83,.30); }
  .hio__tiers__steps__h{
    font-family:'PlayfairHio',Georgia,serif; font-weight:700; font-size:16px;
    color:var(--head,#123528); margin-bottom:12px;
  }
  html[data-tp-mode="dark"] .hio__tiers__steps{ border-top-color:rgba(224,189,102,.22); }
  html[data-tp-mode="dark"] .hio__tiers__steps__h{ color:#f1dda2; }
  .hio__tiers__steps .hio__steps{
    display:grid !important; grid-template-columns:1fr !important;
    gap:11px !important; margin:0 !important; max-width:none !important;
  }
  .hio__tiers__steps .hio__steps::before{ display:none !important; }
  .hio__tiers__steps .hio__step{
    display:grid !important; grid-template-columns:auto minmax(0,1fr) !important;
    gap:11px !important; align-items:start !important; text-align:left !important; padding:0 !important;
  }
  .hio__tiers__steps .hio__num{ margin:0 !important; width:26px !important; height:26px !important; font-size:13px !important; }
  .hio__tiers__steps .hio__step p{ font-size:13.5px !important; line-height:1.45 !important; padding-top:3px !important; color:#5b5340 !important; }
  html[data-tp-mode="dark"] .hio__tiers__steps .hio__step p{ color:#c9d5cf !important; }
}

/* ===== ПРИМЕНЁН МАКЕТ v10 (исходник: проект-сайт/desctop/макет-описания-v10.css) =====
   Отличия применённой версии от исходника — по указанию владельца
   «галерею и выбор вариантов НЕ ТРОГАЙ»:
   • раздел 6 «оффер: кремовые карточки на навы» НЕ применён — перекраска
     .hio__tier задевала бы и карточки тарифов в БЛОКЕ ПОКУПКИ (.hio__tiers--top):
     селекторы там были вида `html.tp-product .hio__tier…` (0,2,1) и перебивали бы
     только часть моих (0,3,1), а `.hio__tier__radio{display:none}` и
     `.hio__tier::before` не перебивались ничем и applied бы к кассе.
     Из раздела оставлено только поле самой панели — это раскладка описания.
   • `.hio__kicker`, `.hio__steps/…__step/…__num` привязаны к `.hio` — кикер
     «ВАРИАНТ ПОЛУЧЕНИЯ УСЛУГИ» живёт и в блоке покупки.
   • Слои v3(панели описания)–v9 УДАЛЕНЫ, а не перекрыты: v10 не отменял
     чередование медальонов из v6, и на нечётных разделах медальон уезжал бы
     вправо от корешка, который всегда слева.
   Часть v3 про БЛОК ПОКУПКИ (.hio__tiers__buyhead/__pitch/__assure) сохранена выше. */
/* ===== MK: .hio ДЕСКТОП v10 — ЕДИНЫЙ РАЗВОРОТ (2026-08-24) =====
   Заменяет собой блоки v3(часть «панели описания»)–v9 целиком. Причина замены:
   семь слоёв правок переписывали друг друга через !important, и предсказать итог
   по коду стало нельзя — на 1440px описание отдавало текст 15,5px по центру
   на карточке 1085px при заголовках 25px.

   ПРИНЦИПЫ, которые здесь держатся (нарушать — значит начать восьмой слой):
   1. ОДИН ДОКУМЕНТ. .hio несёт скругление, тень и обрезку; панели идут встык
      без собственных рамок. Декоративная рамка с уголками — только у обложки.
   2. КОРЕШОК. Золотая линия на x=144px сшивает разделы; медальоны сидят на ней.
      Линия рисуется каждой панелью от края до края, поэтому на стыках она
      продолжается и читается как одна.
   3. АКЦЕНТ — ТОЛЬКО ТОКЕН. Ни одного цвета товара в коде: всё через --head,
      --head-deep, --num-a, --num-b (см. модификаторы .hio--* выше).
      Тёмные смысловые панели тонируются акцентом, панель с тарифами остаётся
      навы у ВСЕХ товаров — касса везде выглядит одинаково.
   4. ШИРИНУ ОГРАНИЧИВАЕТ ТЕКСТ, НЕ КОНТЕЙНЕР. Колонка чтения задана на самих
      абзацах (max-width на .hio__lead), контейнеры заполняют карточку.
      Обратное давало мёртвые кремовые поля по 180px (ошибка v5→v7).
   5. Мобильная запись (<980px) не трогается ни строкой.                        */

@media (min-width:980px){

  /* ── 1. ДОКУМЕНТ ─────────────────────────────────────────────────────────
     Ширина = ширине ряда покупки (1085px), чтобы левые края совпадали.       */
  html.tp-product .hio{
    max-width:1085px !important; margin:40px auto 0 !important;
    border-radius:20px !important; overflow:hidden !important;
    box-shadow:0 32px 66px -36px rgba(60,45,15,.55) !important;
  }
  html.tp-product .hio__panel{
    max-width:none !important; width:100% !important;
    margin:0 !important; border-radius:0 !important; box-shadow:none !important;
    padding:34px 56px 38px !important; overflow:visible !important;
  }
  /* рамка-паспарту и уголки — подпись стиля, только на обложке.
     Шесть раз подряд они читались как декоративный шум (диагноз v8). */
  /* В исходнике v10 рамка оставалась на обложке «как подпись стиля». Но обложка
     теперь идёт БЕЗ полей (padding:0) с картинкой от края, и рамка inset:16px
     ложилась ПОВЕРХ фотографии — в самом макете её там нет. Гасим на всех панелях. */
  html.tp-product .hio__panel:not(:first-of-type) .hio__frame,
  html.tp-product .hio__panel:not(:first-of-type) .hio__corner{ display:none !important; }
  html.tp-product .hio__lotus{ display:none !important; }
  /* контейнер больше не сужает содержимое — см. принцип 4 */
  html.tp-product .hio__panel .hio__in{ max-width:none !important; }

  /* ── 2. ОБЛОЖКА: панно ОБТЕКАЕТСЯ ТЕКСТОМ ────────────────────────────────
     История вопроса (чтобы больше не ходить по кругу): панно у товаров широкое
     (16:9, медальон по центру + символы по сторонам + рамка), а текста рядом много.
     Пока панно было ОТДЕЛЬНОЙ КОЛОНКОЙ, задача не имела решения:
       • object-fit:cover     → колонка высокая, картинка широкая → зверский зум;
       • contain + center     → картинка «тонет» к середине;
       • contain + start      → под ней пустота во всю высоту текста;
       • баннер во всю ширину → «слишком крупно».
     Все четыре — следствия одного: колонка навязывает картинке чужую высоту.
     ОБТЕКАНИЕ снимает причину: панно не колонка, а плавающий объект, текст идёт
     вокруг него. Пустоты нет при любой длине текста, кадрирования нет вообще,
     размер задаём мы. */
  html.tp-product .hio__panel:first-of-type{ padding:34px 56px 36px !important; }
  html.tp-product .hio__panel:first-of-type .hio__in{
    display:block !important; max-width:none !important; text-align:left !important;
  }
  html.tp-product .hio__panel:first-of-type .hio__in::after{
    content:"" !important; display:block !important; clear:both !important;
  }
  /* ⚠️ display НЕ трогаем: панно в разметке два (--light/--dark), нужное показывает
     тема; форсированный display показывал ОБА разом. */
  html.tp-product .hio__panel:first-of-type .hio__art{
    float:left !important; width:300px !important; max-width:42% !important;
    height:auto !important; object-fit:contain !important;
    margin:4px 30px 14px 0 !important; padding:0 !important; border-radius:12px !important;
    shape-outside:margin-box !important;
  }
  html.tp-product .hio__panel:first-of-type .hio__kicker{ margin-top:0 !important; }
  html.tp-product .hio__title{
    font-size:32px !important; line-height:1.14 !important; margin:8px 0 0 !important;
  }
  html.tp-product .hio__panel:first-of-type .hio__rule{
    margin:12px 0 0 !important; max-width:190px !important; justify-content:flex-start !important;
  }
  html.tp-product .hio__panel:first-of-type .hio__lead{
    margin-left:0 !important; margin-right:0 !important; max-width:none !important; text-align:left !important;
  }
  /* сетки (чипы) — блочный контекст, рядом с флоатом они сжимаются в узкую колонку,
     поэтому пускаем их ПОД картинку целиком */
  html.tp-product .hio__panel:first-of-type .hio__qs{
    clear:both !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  }

  /* ── 3. КОРЕШОК + РАЗДЕЛЫ ────────────────────────────────────────────────
     Боковую сетку получают только панели, где медальон реально есть, иначе
     у текстовых панелей осталась бы пустая колонка и текст уехал бы вбок.    */
  html.tp-product .hio__panel:not(:first-of-type)::after{
    content:"" !important; position:absolute !important; left:144px !important;
    top:0 !important; bottom:0 !important; width:1px !important; z-index:1 !important;
    background:rgba(168,133,83,.42) !important; pointer-events:none !important;
  }
  html.tp-product .hio__panel--navy:not(:first-of-type)::after{ background:rgba(224,189,102,.26) !important; }
  html.tp-product .hio__panel:has(.hio__tiers)::after{ display:none !important; }

  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in{
    display:grid !important; grid-template-columns:168px minmax(0,1fr) !important;
    column-gap:44px !important; align-items:start !important; text-align:left !important;
  }
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in > .hio__medal{
    grid-column:1 !important; grid-row:1 / span 99 !important; align-self:start !important;
    width:132px !important; height:132px !important; margin:4px auto 0 !important;
    border-radius:50% !important;
    box-shadow:0 0 0 5px #f4e6c0, 0 0 0 6px rgba(168,133,83,.42), 0 16px 34px -18px rgba(70,50,15,.7) !important;
  }
  html.tp-product .hio__panel--navy:not(:has(.hio__tiers)) .hio__in > .hio__medal{
    box-shadow:0 0 0 5px rgba(255,255,255,.05), 0 0 0 6px rgba(224,189,102,.3), 0 16px 34px -18px rgba(0,0,0,.7) !important;
  }
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in > *:not(.hio__medal){ grid-column:2 !important; }

  /* выключка влево: рядом с медальоном центрованный текст читается плохо */
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__h,
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__kicker,
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__sub{ text-align:left !important; }
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__h{ margin-top:0 !important; }
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__rule{
    margin:11px 0 0 !important; max-width:118px !important; justify-content:flex-start !important;
  }
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__lead,
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__list,
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__steps,
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__qs,
  html.tp-product .hio__panel:not(:first-of-type):not(:has(.hio__tiers)) .hio__in .hio__note{ margin-left:0 !important; margin-right:0 !important; }

  /* ⚠️ Раньше панели БЕЗ медальона я центрировал («пауза в ритме»). На деле это
     ломало выравнивание: абзацы шли по центру, а .hio__list оставался сеткой во всю
     ширину и начинался ЛЕВЕЕ колонки текста, заезжая на корешок — «текст уплыл».
     В эталоне таких центрованных разделов нет: у КАЖДОГО раздела одна и та же сетка
     (колонка под медальон — пустая, если его нет), поэтому всё стоит по одной линии. */

  /* ── 4. ТИПОГРАФИКА ──────────────────────────────────────────────────────
     Шкала: название товара (блок покупки) → обложка 38 → раздел 26 → лид 17.
     Все размеры фиксированные: базовые clamp(...vw) на широком экране упирались
     в верхний предел и давали гигантизм (заголовок 58px).                    */
  html.tp-product .hio__h{ font-size:26px !important; line-height:1.2 !important; }
  html.tp-product .hio__sub{ font-size:19px !important; margin-top:22px !important; }
  html.tp-product .hio .hio__kicker{ font-size:11px !important; letter-spacing:.21em !important; }
  html.tp-product .hio .hio__lead{
    font-size:17px !important; line-height:1.62 !important;
    max-width:64ch !important; margin-top:13px !important; font-weight:400 !important;
  }
  html.tp-product .hio .hio__lead:last-child{ margin-top:13px !important; }
  html.tp-product .hio .hio__close{ font-size:20px !important; margin-top:18px !important; max-width:58ch !important; }
  html.tp-product .hio__fmtlead{ font-size:16px !important; }

  /* перечни и чипы */
  html.tp-product .hio__list{ max-width:none !important; margin-top:16px !important; gap:2px 40px !important; }
  html.tp-product .hio__list li{ font-size:16px !important; padding-top:7px !important; padding-bottom:7px !important; }
  html.tp-product .hio__qs{ margin-top:16px !important; gap:8px !important; }
  html.tp-product .hio__qs p{ font-size:15.5px !important; padding:10px 13px !important; }
  html.tp-product .hio__note{ max-width:78ch !important; margin-top:20px !important; padding:13px 17px !important; }
  html.tp-product .hio__ribbon{ margin-top:18px !important; }

  /* ── 5. ТЁМНЫЕ ПАНЕЛИ: смысловые тонируются акцентом, касса — навы ───────
     color-mix берёт глубокий тон товара из --num-a/--num-b и уводит его
     в почти-чёрный. Контраст кремового текста на итоговом фоне 9–13:1
     для всех семи модификаторов .hio--*.                                     */
  html.tp-product .hio__panel--navy:not(:has(.hio__tiers)){
    background:
      radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--num-a) 72%, #0b0d14), transparent 64%),
      linear-gradient(174deg, color-mix(in srgb, var(--num-a) 58%, #05070c), color-mix(in srgb, var(--num-b) 48%, #04050a)) !important;
  }

  /* поля панели оффера (сами карточки тарифов НЕ трогаем — п. «выбор вариантов») */
  html.tp-product .hio__panel:has(.hio__tiers){ padding:38px 56px 42px !important; }

  /* шаги: соединительная линия рисовалась под медальоны 36px по центру —
     после перехода на левую выключку она бы висела криво, поэтому гасим. */
  html.tp-product .hio .hio__steps{ max-width:none !important; margin-top:24px !important; gap:0 30px !important; }
  html.tp-product .hio .hio__steps::before{ display:none !important; }
  html.tp-product .hio .hio__step{ text-align:left !important; display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important; gap:13px !important; align-items:start !important; }
  html.tp-product .hio .hio__num{ margin:0 !important; width:34px !important; height:34px !important; }
  html.tp-product .hio .hio__step p{ font-size:14.5px !important; padding-top:6px !important; }

  /* ── 7. ЗАКРЫВАЮЩИЙ БЛОК — часть того же документа ───────────────────────*/
  html.tp-product #product-description .hio__assure,
  html.tp-product .hio .hio__assure{
    max-width:none !important; width:100% !important; margin:0 !important;
    border-radius:0 !important; padding:26px 56px 6px !important; justify-content:center !important;
    gap:12px 30px !important;
  }
  html.tp-product .hio__cta{
    max-width:none !important; width:100% !important; margin:0 !important;
    border-radius:0 !important; box-shadow:none !important; padding:14px 56px 38px !important;
  }
  html.tp-product .hio__cta .hio__art{ max-width:250px !important; margin:0 auto !important; }
}
/* ===== /MK .hio ДЕСКТОП v10 ===== */

/* ===== MK: ЦИФРЫ В КРУЖКАХ — ВСЕГДА ПО ЦЕНТРУ (2026-08-24) =====
   ⚠️⚠️⚠️ ПОСТОЯННОЕ ПРАВИЛО, НЕ УДАЛЯТЬ. Владелец ловила это уже не первый раз.
   Причина последнего сбоя (замерена, не угадана): `.hio__num{font-family:var(--serif)}`,
   а `--serif` объявлена на `.hio`. Блок покупки (.hio__tiers--top) живёт ВНЕ `.hio`,
   переменная там не определена → правило невалидно → цифра рисовалась НАСЛЕДУЕМЫМ
   Manrope вместо Playfair. А поправка `translateY(-0.143em)` считалась под метрики
   Playfair: для Manrope нужный сдвиг РОВНО 0, поэтому цифра уезжала на 1.86px вверх.
   Лечение из двух частей — обе обязательны:
     1) шрифт задаётся ЛИТЕРАЛОМ, а не переменной (в блоке покупки var(--serif) пуста);
     2) поправка — по метрикам ЭТОГО шрифта: (fontDesc−fontAsc+inkAsc−inkDesc)/2 / fontSize.
        Замер canvas.measureText для PlayfairHio дал −0.111em (прежние −0.143em были
        сняты по ЛИНЕЙНОМУ боксу, а не по чернилам глифа — отсюда и расхождение).
   ⚠️ Проверять только по ЧЕРНИЛАМ глифа (actualBoundingBoxAscent/Descent), а НЕ по
   range.getClientRects() — тот отдаёт line-box, и «центр» получается ложный. */
.hio__num{ font-family:'Manrope',-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-variant-numeric:lining-nums tabular-nums;
  /* ⚠️ ЦВЕТ ТОЖЕ ЛИТЕРАЛОМ. Базовое `color:var(--gold-lt)` не работало в блоке покупки:
     переменная объявлена на `.hio`, а блок живёт ВНЕ него → правило невалидно → цифра
     наследовала цвет текста. В ТЁМНОЙ теме он светлый и цифры были видны, а в СВЕТЛОЙ —
     тёмный, и цифра пропадала на тёмном кружке. Тот же корень, что у шрифта. */
  color:#f1dda2 !important;
  /* страховка на случай, если переменные всё же не доехали: фон кружка с запасным
     значением (изумруд по умолчанию), иначе кружок остаётся без фона и цифра пропадает */
  background:radial-gradient(120% 120% at 50% 30%, var(--num-a,#1a4a37), var(--num-b,#123a2c) 72%) !important; }
.hio__num span{ display:block; line-height:1 !important; transform:translateY(-0.025em) !important; }
/* ⚠️ ПОЧЕМУ ЦИФРЫ НЕ СЕРИФНЫЕ (важно, не «чинить» обратно):
   у PlayfairHio СТАРОСТИЛЬНЫЕ цифры — замер ink на 40px: «1» вынос вниз 0, «2» — 1,
   «3»/«4»/«5» — 6, «6» — верхний вынос (ascent 29 против 22). У каждой цифры СВОЙ
   чернильный бокс, поэтому ОДНА общая поправка не центрует их все физически: какую-то
   всегда уводит (на боевом «3» стояла на 1.5px ниже «1» и «2»).
   У Manrope цифры одной высоты (ink ascent 29-30, descent 0-1) — разброс нужной
   поправки 0.0125..0.0375em, то есть меньше полпикселя на любом кегле. Поэтому цифры
   в кружках набираются Manrope с поправкой −0.025em: центр держится для ЛЮБОЙ цифры
   и ЛЮБОГО размера. Серифность здесь проигрывает правильности — владелец ловила
   съехавшие цифры несколько раз. */


/* цена у товаров с ОДНИМ вариантом — единственная цифра на карточке, её видно плохо */
@media (min-width:980px){
  html.tp-product .hio__tiers--top .hio__tier__price.hio__buyprice{ margin-top:14px !important; }
  html.tp-product .hio__tiers--top .hio__tier__price.hio__buyprice b,
  html.tp-product .hio__tiers--top .hio__tier__price.hio__buyprice strong{ font-size:32px !important; }
}
/* ===== /MK цифры по центру ===== */

/* ===== MK: ИНФОСТРАНИЦЫ — ДЕСКТОП v1 (2026-08-24) ==========================
   Скоуп: .hio--info + @media(min-width:980px). Мобильная запись не трогается.

   ЧТО ЛЕЧИМ (замерено на боевой /info/o-proekte/ при 1440px):
     • 8 одинаковых панелей во всю ширину (1405px), у каждой своя двойная рамка
       и 4 уголка — декор повторяется 8 раз и перестаёт читаться;
     • колонка текста 900px, кегль 20px, выключка по формату → 95+ знаков в строке
       и «дыры» между словами (переносов в русском Chromium нет);
     • медальоны 150px по центру — мобильный масштаб, каждый добавляет ~180px
       высоты, страница 6118px;
     • нет входа: h1 живёт внутри первой панели наравне с остальными разделами;
     • по шести метрам текста нельзя перемещаться и не видно его формы.

   ЧТО ДЕЛАЕМ (язык десктопа берём тот же, что у карточки товара, v10):
     1. ТИТУЛ — первая панель становится широкой карточкой-входом над остальным.
     2. ДОКУМЕНТ — панели 2..N сшиваются в ОДИН документ 940px: встык, без
        собственных рамок, с золотым корешком и медальонами 96px на нём.
     3. ОГЛАВЛЕНИЕ — липкий рельс слева (≥1280px), активный раздел подсвечен.
     4. КОЛОНКА ЧТЕНИЯ — 66ch, 17px/1.68, левая выключка (justify в такой колонке
        всё ещё даёт дыры), красная строка сохранена, но не у первого абзаца.
     5. ЧИТАЙТЕ ТАКЖЕ — три ссылки на соседние инфостраницы под документом.
   Структуру строит tgm-desc.js (блок «ИНФОСТРАНИЦЫ: раскладка»); без JS
   страница остаётся ровно такой, какой была. Все панели по-прежнему --cream:
   чередование тёмных сломало бы пары медальонов свет/тень.                   */

/* ===== ЦВЕТ АКЦЕНТА НА ИНФОСТРАНИЦАХ (2026-08-24) =========================
   Владелец: «в светлой теме не нравится тёмно-зелёный выделенный текст, у нас
   для светлой темы цвет другой — посмотри как на главной».
   Причина: `.hio` наследует палитру карточки «Гармония и опора» (--head #123528,
   тёмный изумруд) — она уместна на товаре, но не на страницах о проекте.
   Главная в светлой теме держит заголовки на `--tp-text #0b2340` (глубокая синь),
   акценты — золото. Переопределяем ТОЛЬКО токены и ТОЛЬКО на .hio--info:
   разметка, карточки товаров и тёмная тема не трогаются.
   В тёмной теме заголовки и так перекрашены в кремовый (#f3ead7) — там менять
   нечего, поэтому правило висит на светлой. Действует на всех ширинах:
   цвет — не раскладка, на телефоне он был неправильным ровно так же.        */
html[data-tp-mode="light"] .hio--info{
  --head:#0b2340; --head-deep:#0e2a4a; --num-a:#1b3a66; --num-b:#122b4d;
}

/* ⚠️ Оглавление и «Читайте также» строятся на ЛЮБОЙ ширине (DOM один — иначе
   после ресайза дерево пришлось бы перестраивать), но оформлены только для
   десктопа. Без этого скрытия на телефоне они вываливались голым текстом:
   «На этой странице» + все заголовки подряд одной простынёй + кнопка.
   Мобильную вёрстку инфостраниц не трогаем, поэтому здесь их просто нет. */
.hio--info .hioi__toc,
.hio--info .hioi__also{ display:none !important; }

@media (min-width:980px){

  /* ── 1. СЕТКА СТРАНИЦЫ ─────────────────────────────────────────────────
     .hio перестаёт быть карточкой (рамка/тень/обрезка уезжают на титул и
     документ) и работает только сеткой. До 1280px — одна колонка.          */
  .hio--info.hioi{
    display:grid !important; grid-template-columns:minmax(0,940px) !important;
    justify-content:center !important; align-items:start !important;
    column-gap:44px !important;
    /* поля-подстраховка: на 980–1010px документ 940px иначе встаёт впритык к краю */
    padding:0 12px !important;
    overflow:visible !important; border-radius:0 !important; box-shadow:none !important;
  }
  .hio--info .hioi__toc{ display:none !important; }

  /* ── 2. ТИТУЛ СТРАНИЦЫ ────────────────────────────────────────────────
     Единственное место, где текст остаётся по центру: это вход, а не чтение. */
  /* ⚠️ ВОЗДУХ. Первая редакция титула была 698px («очень много воздуха, прям
     дофига» — владелец, 2026-08-24). Источников было три, и главный — НЕ отступы:
       • карточка шла во всю ширину с рельсом (1208px), а текст в ней — 640px:
         по 280px пустых полей с каждой стороны. Теперь титул ровно над документом
         (940px) и читается как его шапка, а не как отдельный баннер;
       • зазоры 18–34px между всеми элементами → 10–16px;
       • абзацы по центру рвались на короткие строки → выключка влево. */
  .hio--info .hioi__title{
    grid-column:1 !important;
    margin:0 0 14px !important; padding:24px 56px 28px !important;
    border-radius:20px !important; overflow:hidden !important;
    box-shadow:0 26px 56px -34px rgba(60,45,15,.5) !important;
  }
  /* ⚠️ ВЫСОТА ТИТУЛА — история вопроса, чтобы не ходить по кругу.
     Было 698px («очень много воздуха, прям дофига» — владелец).
     Что реально давало высоту, по замерам:
       • карточка шла во всю ширину С РЕЛЬСОМ (1208px), текст в ней 640px —
         по 280px пустых полей по бокам. Титул сужен до ширины документа → 496px;
       • колонки НЕ помогают: вдвое уже колонка — вдвое больше строк,
         `column-count:2` даёт ровно ту же высоту (236px и так, и так).
         Колонки — про длину строки, не про высоту. Владелец вернула одну;
       • медальон отдельной строкой сверху — ~90px. Пробовал увести его в строку
         с заголовком, но владелец вернула центр: «самый главный медальон и
         заголовок сделай по центру» — эти 90px куплены сознательно.
     Остальное ужато: медальон 72px, зазоры 8–14px, кегли 36/19/16. */
  .hio--info .hioi__title .hio__in{
    display:block !important; max-width:none !important; margin:0 !important; text-align:center !important;
  }
  .hio--info .hioi__title .hio__medal{
    width:72px !important; height:72px !important; margin:0 auto 8px !important;
  }
  .hio--info .hioi__title .hio__h{
    font-size:36px !important; line-height:1.12 !important; margin:0 !important; text-align:center !important;
  }
  .hio--info .hioi__title .hio__rule{
    margin:9px auto 0 !important; max-width:200px !important; justify-content:center !important;
  }
  /* подзаголовок и вводный текст остаются левыми: по центру — только медальон
     и сам заголовок страницы (правило владельца «по центру только заголовки»). */
  .hio--info .hioi__title .hio__sub{ font-size:19px !important; margin:14px 0 0 !important; text-align:left !important; }
  /* вводный текст титула — ОДНА колонка во всю ширину карточки (владелец
     забраковала две: «верни одну колонку, не две»). Высоту это не меняет —
     две колонки её и не уменьшали, см. заметку про заход второй выше. */
  .hio--info .hioi__title .hioi__intro{ margin:12px 0 0 !important; text-align:left !important; }
  .hio--info .hioi__title .hio__lead{
    font-size:16px !important; line-height:1.58 !important; max-width:none !important;
    margin:0 0 9px !important; text-align:left !important; text-indent:1.6em !important; font-weight:400 !important;
  }
  .hio--info .hioi__title .hioi__intro .hio__lead:first-child{ text-indent:0 !important; }
  .hio--info .hioi__title .hioi__intro .hio__lead:last-child{ margin-bottom:0 !important; }
  /* первый абзац под чертой/подзаголовком — без красной строки */
  .hio--info .hioi__title .hio__rule + .hio__lead,
  .hio--info .hioi__title .hio__sub + .hio__lead{ text-indent:0 !important; }

  /* ── 3. ДОКУМЕНТ ──────────────────────────────────────────────────────
     Один лист: скругление, тень и обрезка — на нём, панели идут встык.      */
  .hio--info .hioi__doc{
    grid-column:1 !important; min-width:0 !important; position:relative !important;
    border-radius:20px !important; overflow:hidden !important;
    box-shadow:0 32px 66px -36px rgba(60,45,15,.55) !important;
    /* ⚠️ ФОН — ОДИН НА ВЕСЬ ДОКУМЕНТ, а не по панели.
       Панельный градиент 158deg начинается заново в КАЖДОЙ панели: семь кремовых
       разделов подряд давали пилу по тону на каждом стыке — документ читался
       стопкой плиток. Здесь одна заливка на весь лист, панели прозрачны,
       разделы отбиваются волосяной линией. */
    background:linear-gradient(158deg,#f4e6c0 0%,#e9d3ac 38%,#ddc296 70%,#d2b184 100%) !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__doc{
    background:linear-gradient(158deg,#152b46 0%,#112339 42%,#0c1c2f 74%,#0a1728 100%) !important;
  }
  .hio--info .hioi__doc .hio__panel{
    padding:34px 56px 38px !important; border-radius:0 !important; box-shadow:none !important;
    background:none !important; scroll-margin-top:124px !important;
  }
  /* фактура-лучи и рамка с уголками остаются подписью ТИТУЛА; внутри документа
     они повторялись бы семь раз и читались как шум */
  .hio--info .hioi__doc .hio__panel::before,
  .hio--info .hioi__doc .hio__frame,
  .hio--info .hioi__doc .hio__corner{ display:none !important; }
  .hio--info .hioi__doc .hio__panel + .hio__panel{ border-top:1px solid rgba(168,133,83,.26) !important; }
  html[data-tp-mode="dark"] .hio--info .hioi__doc .hio__panel + .hio__panel{ border-top-color:rgba(224,189,102,.16) !important; }

  /* корешок: рисуется каждой панелью от края до края, поэтому на стыках
     продолжается и читается как одна линия через весь документ */
  .hio--info .hioi__doc .hio__panel::after{
    content:"" !important; position:absolute !important; left:126px !important;
    top:0 !important; bottom:0 !important; width:1px !important; z-index:1 !important;
    background:rgba(168,133,83,.42) !important; pointer-events:none !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__doc .hio__panel::after{ background:rgba(224,189,102,.26) !important; }

  /* сетка раздела: колонка метки (медальон сидит на корешке) + колонка чтения.
     Колонка метки есть у КАЖДОГО раздела, даже если метки нет — иначе текст
     разных разделов вставал бы по разным линиям. */
  .hio--info .hioi__doc .hio__in{
    display:grid !important; grid-template-columns:140px minmax(0,1fr) !important;
    column-gap:40px !important; align-items:start !important;
    max-width:none !important; text-align:left !important;
  }
  .hio--info .hioi__doc .hio__in > .hio__medal{
    grid-column:1 !important; grid-row:1 / span 99 !important; align-self:start !important;
    width:96px !important; height:96px !important; margin:2px auto 0 !important;
    /* без кольца-вырезки: на сплошном листе фиксированный кремовый ободок
       светил бы пятном в нижних (более тёмных) разделах. Корешок проходит
       за медальоном — диск непрозрачный и перекрывает линию сам. */
    box-shadow:0 14px 30px -18px rgba(70,50,15,.75) !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__doc .hio__in > .hio__medal{
    box-shadow:0 14px 30px -18px rgba(0,0,0,.8) !important;
  }
  /* фото живого человека («О создателе») — та же колонка метки, но прямоугольное
     и без кольца: правило владельца «фото — не медальон». */
  .hio--info .hioi__doc .hio__in > .hio__art{
    grid-column:1 !important; grid-row:1 / span 99 !important; align-self:start !important;
    width:140px !important; max-width:140px !important; margin:3px 0 0 !important;
    border-radius:14px !important;
  }
  .hio--info .hioi__doc .hio__in > *:not(.hio__medal):not(.hio__art):not(.hio__navcta){ grid-column:2 !important; }
  /* ⚠️ у этого правила спецификация (0,5,0) — выше, чем у любого правила ниже по файлу,
     заданного одним классом. Всё, что должно жить НЕ во второй колонке (полоса
     закрывающего блока), исключается здесь, а не перебивается потом. */

  /* ── 4. ТИПОГРАФИКА РАЗДЕЛА ───────────────────────────────────────────
     Шкала: титул 44 → раздел 27 → лид 17. Заголовок раздела рядом с медальоном
     встаёт ВЛЕВО: центрованный заголовок над левой колонкой текста висел бы
     сам по себе (правило «заголовки по центру» остаётся на титуле и мобильном). */
  .hio--info .hioi__doc .hio__h{
    font-size:27px !important; line-height:1.2 !important; margin:0 !important; text-align:left !important;
  }
  .hio--info .hioi__doc .hio__rule{
    margin:12px 0 0 !important; max-width:118px !important; justify-content:flex-start !important;
  }
  .hio--info .hioi__doc .hio__lead{
    font-size:17px !important; line-height:1.68 !important; max-width:66ch !important;
    margin:14px 0 0 !important; text-align:left !important; text-align-last:auto !important;
    font-weight:400 !important;
  }
  .hio--info .hioi__doc .hio__lead:last-child{ margin:14px 0 0 !important; }
  /* первый абзац раздела — без красной строки (он и так открывается заголовком) */
  .hio--info .hioi__doc .hio__rule + .hio__lead{ text-indent:0 !important; }
  .hio--info .hioi__doc .hio__sub{ font-size:19px !important; margin:22px 0 0 !important; text-align:left !important; }
  .hio--info .hioi__doc .hio__close{ font-size:19px !important; margin:18px 0 0 !important; max-width:58ch !important; }

  /* перечни — в одну колонку: в 660px две колонки ломают короткие пункты пополам */
  .hio--info .hioi__doc .hio__list{
    grid-template-columns:1fr !important; max-width:66ch !important; margin:16px 0 0 !important; gap:0 !important;
  }
  .hio--info .hioi__doc .hio__list li{ font-size:16px !important; padding:8px 4px 8px 30px !important; }
  .hio--info .hioi__doc .hio__pts{ margin:16px 0 0 !important; max-width:66ch !important; }
  .hio--info .hioi__doc .hio__note{ max-width:66ch !important; margin:20px 0 0 !important; }

  /* ── 5. ЗАКРЫВАЮЩИЙ БЛОК — подвал документа во всю его ширину ──────────
     Отрицательные поля выводят полосу за padding панели; .hio__panel
     обрезает overflow, поэтому за края документа она не вылезет.           */
  .hio--info .hioi__doc .hio__navcta{
    grid-column:1 / -1 !important;
    margin:30px -56px -38px !important; padding:26px 56px 30px !important;
    text-align:center !important;
    border-top:1px solid rgba(168,133,83,.42) !important;
    background:rgba(255,250,236,.34) !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__doc .hio__navcta{
    border-top-color:rgba(224,189,102,.26) !important; background:rgba(255,244,214,.05) !important;
  }
  .hio--info .hioi__doc .hio__navcta .hio__lead{
    max-width:56ch !important; margin:0 auto !important; text-align:center !important; text-indent:0 !important;
  }
  .hio--info .hioi__doc .hio__navbtn{
    margin:18px 0 0 !important; min-width:280px !important; padding:15px 38px !important; font-size:14px !important;
  }

  /* ── 6. ЧИТАЙТЕ ТАКЖЕ ─────────────────────────────────────────────────
     Раньше страница кончалась одной кнопкой; соседние инфостраницы читатель
     мог найти только в шапке. Три ссылки — ровно то, что читают после текста. */
  .hio--info .hioi__also{ display:block !important; grid-column:1 !important; margin:26px 0 0 !important; }
  .hio--info .hioi__also__k{
    display:block !important; margin:0 0 12px 4px !important;
    font-size:11px !important; font-weight:600 !important; letter-spacing:.21em !important;
    text-transform:uppercase !important; line-height:1.4 !important; color:#7d5f28 !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__also__k{ color:#e0bd66 !important; }
  .hio--info .hioi__also__row{
    display:grid !important; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important; gap:14px !important;
  }
  .hio--info .hioi__also a{
    display:block !important; padding:15px 18px 17px !important; border-radius:14px !important;
    border:1px solid rgba(168,133,83,.45) !important; background:rgba(255,252,244,.85) !important;
    text-decoration:none !important; color:#4a3f2c !important;
    font-size:15px !important; line-height:1.35 !important; font-weight:600 !important;
    transition:transform .2s, border-color .2s, background .2s !important;
  }
  .hio--info .hioi__also a:hover{ transform:translateY(-2px) !important; border-color:rgba(168,133,83,.8) !important; }
  .hio--info .hioi__also a span{
    display:block !important; margin-top:6px !important;
    font-size:13px !important; letter-spacing:0 !important; font-weight:500 !important;
    line-height:1.4 !important; color:#6d604a !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__also a span{ color:#a9b3ad !important; }
  html[data-tp-mode="dark"] .hio--info .hioi__also a{
    background:rgba(255,244,214,.05) !important; border-color:rgba(224,189,102,.24) !important; color:#dfe7e1 !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__also a:hover{ border-color:rgba(224,189,102,.6) !important; }
}

/* ── 7. ОГЛАВЛЕНИЕ — только там, где на него есть место ───────────────────
   224 + 44 + 940 = 1208px. При 1280px вьюпорта контейнер витрины даёт ~1245px,
   на экране владельца (1366) — ~1331px. Ниже 1280 рельс прячется, документ
   остаётся по центру: терять ширину чтения ради оглавления нельзя.          */
@media (min-width:1280px){
  .hio--info.hioi{ grid-template-columns:224px minmax(0,940px) !important; }
  .hio--info .hioi__title,
  .hio--info .hioi__doc,
  .hio--info .hioi__also{ grid-column:2 !important; }
  /* рельс начинается на одном уровне с началом страницы (титулом), а не с
     документом — владелец: «подними выше на тот же уровень, что и начало
     самой инфостраницы». Растянут на все ряды, иначе sticky некуда ехать. */
  .hio--info .hioi__toc{
    /* ⚠️ НЕ `grid-row:1/-1`: строк в ЯВНОЙ сетке нет (grid-template-rows не задан),
       поэтому -1 сворачивается в конец первой строки — рельс оказывался внутри
       ряда титула и распирал его своей высотой: между титулом и документом
       возникал провал в 157px при margin-bottom 14px. Ряды перечисляем явно:
       1 — титул, 2 — документ, 3 — «читайте также». */
    display:block !important; grid-column:1 !important; grid-row:1 / span 3 !important;
    position:sticky !important; top:124px !important;   /* шапка fixed 108px + воздух */
    padding-top:4px !important;
  }
  .hio--info .hioi__toc__k{
    display:block !important; margin:0 0 14px !important;
    font-size:11px !important; font-weight:600 !important; letter-spacing:.21em !important;
    text-transform:uppercase !important; line-height:1.4 !important; color:#7d5f28 !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__toc__k{ color:#e0bd66 !important; }
  /* вертикальная нить оглавления рифмуется с корешком документа */
  .hio--info .hioi__toc__list{
    display:flex !important; flex-direction:column !important; gap:11px !important;
    padding-left:18px !important; border-left:1px solid rgba(168,133,83,.42) !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__toc__list{ border-left-color:rgba(224,189,102,.26) !important; }
  .hio--info .hioi__toc__list a{
    position:relative !important; display:block !important;
    font-size:14px !important; line-height:1.38 !important; font-weight:500 !important;
    color:#6d604a !important; text-decoration:none !important; transition:color .2s !important;
  }
  .hio--info .hioi__toc__list a::before{
    content:"" !important; position:absolute !important; left:-21.5px !important; top:6px !important;
    width:7px !important; height:7px !important; border-radius:50% !important;
    background:transparent !important; transition:background .2s !important;
  }
  .hio--info .hioi__toc__list a:hover{ color:#a9822f !important; }
  .hio--info .hioi__toc__list a.is-on{ color:#a9822f !important; font-weight:700 !important; }
  .hio--info .hioi__toc__list a.is-on::before{ background:#c8a24a !important; }
  html[data-tp-mode="dark"] .hio--info .hioi__toc__list a{ color:#a9b3ad !important; }
  html[data-tp-mode="dark"] .hio--info .hioi__toc__list a:hover,
  html[data-tp-mode="dark"] .hio--info .hioi__toc__list a.is-on{ color:#e0bd66 !important; }
  html[data-tp-mode="dark"] .hio--info .hioi__toc__list a.is-on::before{ background:#e0bd66 !important; }
  .hio--info .hioi__toc__sep{
    height:1px !important; margin:20px 0 16px !important; background:rgba(168,133,83,.35) !important;
  }
  html[data-tp-mode="dark"] .hio--info .hioi__toc__sep{ background:rgba(224,189,102,.22) !important; }
  /* кнопка рельса — тот же золотой стиль, но в размер колонки */
  .hio--info .hioi__toc .hio__navbtn{
    width:100% !important; min-width:0 !important; margin:0 !important;
    padding:13px 12px !important; font-size:12px !important; letter-spacing:.06em !important;
    border-radius:11px !important;
  }
}
/* ===== /MK ИНФОСТРАНИЦЫ ДЕСКТОП v1 ===== */

/* ===== MK: КАНАЛЫ СВЯЗИ (.hio__chan) — страница «Контакты», 2026-08-24 =======
   Строка-ссылка: иконка канала в золотом кружке + название с пояснением +
   адрес. Работает на всех ширинах (это контент, а не раскладка страницы).
   ⚠️ Жёсткий сброс `.hio, .hio *{background:none;border:0;padding:0}` зануляет
   фон/рамку/поля у ЛЮБОГО класса внутри .hio — поэтому здесь !important. */
.hio__chans{ display:grid; gap:12px; margin:22px 0 0; }
.hio__chan{
  display:grid !important; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:8px 16px;
  padding:13px 17px !important; border-radius:14px !important;
  border:1px solid rgba(168,133,83,.45) !important;
  background:rgba(255,250,236,.55) !important;
  text-decoration:none !important; color:inherit !important;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hio__chan:hover{
  transform:translateY(-2px); border-color:rgba(168,133,83,.9) !important;
  box-shadow:0 12px 24px -16px rgba(70,50,15,.55) !important;
}
.hio__chan__ico{
  width:44px; height:44px; border-radius:50% !important; flex:none;
  display:grid !important; place-items:center;
  background:linear-gradient(135deg,#f0d488,#d4af52 47%,#bd923c) !important;
  color:#241704; box-shadow:inset 0 1px 0 rgba(255,250,225,.5) !important;
}
.hio__chan__ico svg{ width:21px; height:21px; fill:currentColor; }
.hio__chan__txt b{ display:block; font-size:16.5px; line-height:1.2; font-weight:700; color:var(--head); }
.hio__chan__txt span{ display:block; margin-top:3px; font-size:13.5px; line-height:1.35; color:#6d604a; }
/* ⚠️ Адрес канала НЕ nowrap: ссылки вида vk.ru/tvoy_put_s_dobroslavom не
   переносятся сами (подчёркивание не даёт места для переноса), и на узком
   экране текст вылезал за рамку карточки. */
.hio__chan__go{ font-size:13px; color:#8a6a2a; overflow-wrap:anywhere; word-break:break-word; }

@media (max-width:560px){
  /* Третьей колонкой адрес уже не помещается — уводим его под название,
     во всю ширину карточки. */
  .hio__chan{ grid-template-columns:auto minmax(0,1fr); }
  .hio__chan__go{ grid-column:2; margin-top:4px; }
}
html[data-tp-mode="dark"] .hio__panel--cream .hio__chan{
  background:rgba(255,244,214,.05) !important; border-color:rgba(224,189,102,.26) !important;
}
html[data-tp-mode="dark"] .hio__panel--cream .hio__chan:hover{ border-color:rgba(224,189,102,.6) !important; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__chan__txt b{ color:#f3ead7; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__chan__txt span{ color:#a9b3ad; }
html[data-tp-mode="dark"] .hio__panel--cream .hio__chan__go{ color:#e0bd66; }
/* на телефоне адрес не влезает третьей колонкой — уводим его под название */
@media (max-width:760px){
  .hio__chan{ grid-template-columns:auto minmax(0,1fr); }
  .hio__chan__go{ grid-column:2; white-space:normal; }
}
/* ===== /MK каналы связи ===== */

/* ===== MK: КОРОТКАЯ ИНФОСТРАНИЦА БЕЗ ОГЛАВЛЕНИЯ (2026-08-24) ===============
   Рельс имеет смысл от трёх разделов; на «Контактах» их два, и оглавление
   из двух строк выглядело бы как недоразумение. JS в таком случае вешает
   на корень .hioi--notoc и не строит рельс, а сетка схлопывается в одну
   колонку — иначе документ уехал бы вправо, оставив пустую колонку слева. */
@media (min-width:1280px){
  .hio--info.hioi--notoc{ grid-template-columns:minmax(0,940px) !important; }
  .hio--info.hioi--notoc .hioi__title,
  .hio--info.hioi--notoc .hioi__doc,
  .hio--info.hioi--notoc .hioi__also{ grid-column:1 !important; }
}
/* ===== /MK короткая инфостраница ===== */

/* ===== MK: ССЫЛКИ ВНУТРИ .hio — ЧИТАЕМЫЙ ЦВЕТ (2026-09-09) ==================
   Владелец на странице «Вопрос-ответ»: «в тёмной версии часть текста не читается
   из-за неверного цвета (наверное, это ссылки)». Так и есть.
   Обычная ссылка внутри .hio не красилась вообще — доставался цвет из общей темы
   Free (`a{color:#333}`). Замер на боевой в тёмной теме: текст rgb(205,216,211)
   даёт контраст 12.75 к фону rgb(4,19,38), а ссылка rgb(51,51,51) — **1.48**,
   то есть не видно вовсе. Подчёркивания тоже не было.
   Лечение: ссылка наследует цвет текста и опознаётся подчёркиванием (работает
   в обеих темах, в отличие от золота — оно на креме даёт слабый контраст).
   ⚠️ Не трогаем .hio__navbtn и .hio__chan — у них свой оформленный вид.
   Правило общее для ВСЕХ страниц на движке описаний: тот же дефект был бы на
   любой карточке товара, где в тексте появится ссылка.                        */
.hio a:not(.hio__navbtn):not(.hio__chan),
.hio__lead a:not(.hio__navbtn):not(.hio__chan){
  color:inherit !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:3px !important;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent) !important;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.hio a:not(.hio__navbtn):not(.hio__chan):hover{
  color:#a07d3f !important; text-decoration-color:currentColor !important;
}
html[data-tp-mode="dark"] .hio a:not(.hio__navbtn):not(.hio__chan):hover{ color:#f1dda2 !important; }

/* ===== MK: «ВОПРОС-ОТВЕТ» — ОТВЕТ РАСКРЫВАЕТСЯ ПО КЛИКУ (2026-09-09) ========
   Владелец: «наверное надо, чтобы ответы на вопросы открывались по клику на
   вопрос (разворачивался текст)».
   Механика — нативный <details>/<summary>, как в блоке «Подробнее о Доброславе»
   на главной: без своего JS, открывается с клавиатуры, и поиск по странице
   (Ctrl+F) находит спрятанный текст — браузер сам раскрывает нужный блок.
   ⚠️ Маркер <summary> гасим ТРЕМЯ способами сразу: `display:flex` (снимает
   display:list-item), `::marker` и вебкитовский `::-webkit-details-marker` —
   по отдельности ни один не покрывает все браузеры аудитории.
   ⚠️ !important обязателен: жёсткий сброс `.hio *{background:none;border:0;
   padding:0}` иначе зануляет поля и линии.                                    */
.hio .hio__faq{
  display:block !important;
  border-bottom:1px solid rgba(168,133,83,.26) !important;
}
html[data-tp-mode="dark"] .hio .hio__faq{ border-bottom-color:rgba(224,189,102,.18) !important; }
.hio .hio__faq:first-of-type{ border-top:1px solid rgba(168,133,83,.26) !important; margin-top:22px !important; }
html[data-tp-mode="dark"] .hio .hio__faq:first-of-type{ border-top-color:rgba(224,189,102,.18) !important; }

.hio .hio__faq__q{
  display:flex !important; align-items:flex-start !important; gap:14px !important;
  cursor:pointer; list-style:none;
  padding:15px 2px !important;
  font-family:var(--serif) !important; font-weight:700 !important;
  font-size:clamp(17px,2.1vw,20px) !important; line-height:1.32 !important;
  color:var(--head) !important; text-align:left !important;
  transition:color .2s ease;
}
.hio .hio__faq__q::marker{ content:"" !important; }
.hio .hio__faq__q::-webkit-details-marker{ display:none !important; }
html[data-tp-mode="dark"] .hio .hio__faq__q{ color:#f1dda2 !important; }
.hio .hio__faq__q:hover{ color:#a07d3f !important; }
html[data-tp-mode="dark"] .hio .hio__faq__q:hover{ color:#ffe7a8 !important; }
.hio .hio__faq__q:focus-visible{ outline:2px solid #a07d3f !important; outline-offset:2px; border-radius:4px; }

/* стрелка: рисуется бордюрами псевдоэлемента (жёсткий сброс `.hio *` до
   псевдоэлементов не достаёт, но !important оставлен для единообразия) */
.hio .hio__faq__q::after{
  content:"" !important; flex:0 0 auto; margin:5px 2px 0 auto !important;
  width:9px !important; height:9px !important;
  border-right:2px solid currentColor !important;
  border-bottom:2px solid currentColor !important;
  transform:rotate(45deg); transition:transform .22s ease;
}
.hio .hio__faq[open] .hio__faq__q::after{ transform:rotate(-135deg); }

.hio .hio__faq__a{ padding:0 2px 18px !important; }
.hio .hio__faq__a .hio__lead{ margin:0 0 12px !important; }
.hio .hio__faq__a .hio__lead:last-child{ margin-bottom:0 !important; }

@media (max-width:760px){
  .hio .hio__faq__q{ padding:13px 2px !important; gap:11px !important; }
  .hio .hio__faq__a{ padding-bottom:15px !important; }
}

/* ===== MK: СТРАНИЦА БЕЗ МЕДАЛЬОНОВ (.hio--nomedal) — 2026-09-09 =============
   Владелец про «Вопрос-ответ»: «медальоны не нужны на этой странице».
   В десктопном слое у каждого раздела есть колонка метки 140px + корешок на
   x=126 — она специально сохраняется даже у разделов без медальона, чтобы текст
   разных разделов вставал по одной линии. Но когда медальонов нет НИ У ОДНОГО
   раздела, слева остаётся пустая полоса во весь документ (мерил: колонка чтения
   начиналась в 236px от края листа) и золотая линия, которая ничего не отделяет.
   Поэтому на таких страницах колонку схлопываем, а корешок убираем.
   ⚠️ СПЕЦИФИЧНОСТЬ: базовое `.hio--info .hioi__doc .hio__in > *:not(.hio__medal)
   :not(.hio__art):not(.hio__navcta)` — это (0,5,0) с !important. Перебить его
   можно только более специфичным селектором, поэтому здесь тот же набор :not()
   плюс два класса корня — (0,7,0). Меньшая специфичность не сработает даже
   с !important.                                                               */
@media (min-width:980px){
  .hio--info.hio--nomedal .hioi__doc .hio__in{
    grid-template-columns:minmax(0,1fr) !important;
    column-gap:0 !important;
  }
  .hio--info.hio--nomedal .hioi__doc .hio__in > *:not(.hio__medal):not(.hio__art):not(.hio__navcta){
    grid-column:1 !important;
  }
  .hio--info.hio--nomedal .hioi__doc .hio__panel::after{ display:none !important; }
}
/* ===== /MK вопрос-ответ ===== */