/* Бетонотехніка — спільні стилі для всіх сторінок сайту.
     Шар: базове скидання (те саме, що дає обгортка артефакта головній сторінці),
     потім токени, потім компоненти. */
  :root{color-scheme:light; box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  body{margin:0; padding:0; font-size:14px; line-height:normal;}
  img{max-width:100%;}
  [hidden]:not([hidden=until-found i]){display:none !important;}

  :root{
    --paper:#FAF9F4;
    --paper-raised:#EFF2E9;
    --paper-sunken:#E7ECE0;
    --ink:#152016;
    --ink-soft:#4B5A4C;
    --ink-faint:#7C897C;
    --line:#D9DECE;
    --brand-900:#123A1E;
    --brand-700:#1E6E2C;
    --brand-600:#2C8C3B;
    --brand-500:#3AA34A;
    --brand-100:#DEEEDA;
    --brand-050:#EFF7EC;
    --on-brand:#F8FBF3;
    --cta-btn-bg:#F8FBF3;
    --chip-bg:#DEEEDA;
    --chip-fg:#1E6E2C;
    --grid:rgba(30,110,44,.09);
    /* тінь логотипа на фоні сторінок напрямків: трохи темніше за фон, як сірий знак на білому титулі документації;
       виводиться з --ink і --paper, тож у темній темі сама стає трохи світлішою за фон */
    --logo-shadow:color-mix(in srgb, var(--ink) 8%, var(--paper));
    --shadow: 0 1px 2px rgba(18,30,15,.06), 0 10px 30px -14px rgba(18,30,15,.22);
    /* позиції (смуги) трохи виділяються на фоні: легка зеленкувата поверхня й м'яка тінь */
    --strip-bg:color-mix(in srgb, var(--paper-raised) 62%, transparent);
    --shadow-soft: 0 1px 2px rgba(18,30,15,.05), 0 8px 20px -12px rgba(18,30,15,.2);
    --radius-s:10px;
    --radius-m:16px;
    --radius-l:26px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#1C1F21;
      --paper-raised:#272B2E;
      --paper-sunken:#141618;
      --ink:#ECEEEC;
      --ink-soft:#B9BEBB;
      --ink-faint:#8D938F;
      --line:#3A4044;
      --brand-900:#0E2916;
      --brand-700:#3FB652;
      --brand-600:#39A64A;
      --brand-500:#4FC562;
      --brand-100:#193322;
      --brand-050:#122619;
      --on-brand:#08130A;
      --cta-btn-bg:#1C1F21;
      --chip-bg:#DEEEDA;
      --chip-fg:#1E6E2C;
      --grid:rgba(79,197,98,.12);
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.6);
      --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 10px 22px -12px rgba(0,0,0,.55);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --paper:#1C1F21;
    --paper-raised:#272B2E;
    --paper-sunken:#141618;
    --ink:#ECEEEC;
    --ink-soft:#B9BEBB;
    --ink-faint:#8D938F;
    --line:#3A4044;
    --brand-900:#0E2916;
    --brand-700:#3FB652;
    --brand-600:#39A64A;
    --brand-500:#4FC562;
    --brand-100:#193322;
    --brand-050:#122619;
    --on-brand:#08130A;
    --cta-btn-bg:#1C1F21;
    --chip-bg:#DEEEDA;
    --chip-fg:#1E6E2C;
      --grid:rgba(79,197,98,.12);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -20px rgba(0,0,0,.6);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 10px 22px -12px rgba(0,0,0,.55);
    color-scheme:dark;
  }

  *{box-sizing:border-box;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    padding-inline:0;
  }
  h1,h2,h3,.display{
    font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
    font-weight:800;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0;
  }
  p{margin:0; color:var(--ink-soft); line-height:1.6;}
  .mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
  .eyebrow{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--brand-700);
    display:flex;align-items:center;gap:.5em;
  }
  .eyebrow::before{content:"";width:1.1em;height:2px;background:var(--brand-600);display:inline-block;}
  a{color:inherit;}
  .wrap{max-width:1180px;margin-inline:auto;padding-inline:20px;}
  img{max-width:100%;}
  button{font:inherit;}

  /* ---------- header ---------- */
  /* Шапка липне до верху. Панель меню (.header-nav) при прокручуванні вниз заїжджає під верхній рядок і
     повертається при прокручуванні вгору (клас nav-hidden ставить site.js). Висота шапки при цьому не
     змінюється, тож сторінка не стрибає: фон мають самі рядки, а порожнє місце під схованим меню прозоре
     й не перехоплює кліків. */
  header.site-header{
    position:sticky; top:env(safe-area-inset-top,0px);
    z-index:40;
    pointer-events:none;
  }

  .header-top{position:relative; z-index:2; background:var(--paper); border-bottom:1px solid var(--line); pointer-events:auto;}
  .header-top-inner{
    display:flex; align-items:center; justify-content:space-between; gap:28px;
    padding:16px 28px; flex-wrap:wrap;
  }
  .logo-link{display:flex; align-items:center; flex:none;}
  .logo-link img{display:block; height:38px; width:auto;}

  .addr-block{display:flex; align-items:flex-start; gap:8px; flex:none;}
  .addr-block svg{flex:none; margin-top:3px; color:var(--ink);}
  .addr-block .addr-lines{display:flex; flex-direction:column; gap:2px; line-height:1.3;}
  .addr-block .addr-main{font-size:.86rem; font-weight:700; color:var(--ink);}
  .addr-block .addr-main a{color:#1A73E8; font-weight:600; text-decoration:none; margin-left:2px;}
  .addr-block .addr-main a:hover{text-decoration:underline;}
  .addr-block .addr-sub{font-size:.76rem; color:var(--ink-faint);}

  .phone-block{display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:600; color:var(--ink); flex:none; white-space:nowrap;}
  .phone-block svg{color:var(--ink);}

  .visit-btn{
    border:1.5px solid var(--brand-600);
    color:var(--brand-600);
    background:transparent;
    border-radius:999px;
    padding:11px 22px;
    font-size:.86rem;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    flex:none;
  }
  .visit-btn:hover{background:var(--brand-050);}

  /* вибір мови: кнопка з глобусом і поточною мовою, під нею — список усіх мов */
  .lang-picker{position:relative; flex:none;}
  .lang-btn{
    all:unset; box-sizing:border-box; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px; padding:8px 12px 8px 10px;
    border:1px solid var(--line); border-radius:999px;
    color:var(--ink); font-size:.84rem; font-weight:700; letter-spacing:.03em;
    transition:border-color .15s, color .15s;
  }
  .lang-btn:hover{border-color:var(--brand-500); color:var(--brand-700);}
  .lang-btn:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
  .lang-chev{transition:transform .15s; opacity:.7;}
  .lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg);}
  .lang-menu{
    position:absolute; right:0; top:calc(100% + 8px); z-index:60;
    width:250px; max-height:min(440px, 70vh); overflow-y:auto;
    margin:0; padding:6px; list-style:none;
    background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  }
  .lang-menu button{
    all:unset; box-sizing:border-box; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
    padding:8px 12px; border-radius:9px; color:var(--ink); font-size:.9rem;
  }
  .lang-menu button:hover, .lang-menu button:focus-visible{background:var(--paper-raised);}
  .lang-menu button:focus-visible{outline:2px solid var(--brand-600); outline-offset:-2px;}
  .lang-menu button[aria-checked="true"]{background:var(--brand-050); color:var(--brand-700); font-weight:600;}
  .lang-menu button[aria-checked="true"] .lang-code::before{content:"\2713\00a0"; font-weight:700;}
  .lang-code{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; color:var(--ink-faint);}
  .lang-menu button[aria-checked="true"] .lang-code{color:var(--brand-700);}
  .lang-caption{
    margin:8px 12px 4px; padding-top:8px; border-top:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace; font-size:.64rem; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
  }
  /* мови ЄС поки заглушки: видно, але не вибираються */
  .lang-menu .is-soon{cursor:default; color:var(--ink-faint);}
  .lang-menu .is-soon:hover{background:none;}

  .header-nav{
    position:relative; z-index:1; background:var(--paper); pointer-events:auto;
    transition:transform .28s ease, visibility 0s;
  }
  .site-header.nav-hidden .header-nav{
    transform:translateY(-100%); visibility:hidden; pointer-events:none;
    transition:transform .28s ease, visibility 0s linear .28s;
  }
  @media (prefers-reduced-motion: reduce){ .header-nav, .site-header.nav-hidden .header-nav{transition:none;} }
  /* пункти меню розтягнуті на всю ширину центральної колонки сторінки (та сама, що й .wrap: 1180px з полями
     по 20px): перший пункт починається від її лівого краю, останній закінчується на правому, проміжки рівні.
     Бічний відступ 6px + власний відступ кнопки 14px = 20px, тож текст крайніх кнопок стоїть рівно на краях колонки. */
  .header-nav-inner{display:flex; align-items:stretch; justify-content:center;}
  nav.links{
    display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap;
    box-sizing:border-box; width:100%; max-width:1180px; padding:14px 6px; flex:0 1 auto;
  }
  nav.links a{
    text-decoration:none; font-size:.9rem; font-weight:500; color:var(--ink);
    padding:8px 14px; border-radius:8px; transition:background .15s, color .15s;
    white-space:nowrap;
  }
  nav.links a:hover{background:var(--paper-raised); color:var(--brand-700);}

  /* Кнопка з випадним меню. Посилання — блок, тож обгортка .nav-dropdown збігається з видимою кнопкою
     (а не лише з рядком тексту), і меню починається рівно від її нижнього краю. */
  .nav-dropdown{position:relative;}
  .nav-dropdown > a{display:block;}
  .nav-dropdown > a::after{
    content:"";
    display:inline-block; width:6px; height:6px; margin-left:6px; margin-bottom:1px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg); opacity:.6;
  }
  /* Випадне меню приєднане до своєї кнопки без прогалини. .mega-menu — прозора зона наведення, що
     починається від нижнього краю кнопки; її верхні --mm-gap пікселів — це відступ картки від кнопки,
     і вони теж належать меню. Тож курсор дорогою від кнопки до картки ніде не «випадає» з наведення,
     хоч як повільно він рухається. Сама видима картка — .mega-menu-box. */
  .mega-menu{
    --mm-gap:6px;
    /* left: зазвичай від лівого краю кнопки; site.js зсуває меню вліво (--mm-shift), якщо воно не вміщається
       у вікно — пункти стоять по центру, тож меню правих кнопок інакше виходило б за правий край */
    position:absolute; top:100%; left:var(--mm-shift, 0px); z-index:50;
    width:min(760px, 84vw); padding-top:var(--mm-gap);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    /* закривається з короткою затримкою: курсор, що на мить вийшов за край меню, його не закриває */
    transition:opacity .15s ease .08s, transform .15s ease .08s, visibility 0s linear .23s;
  }
  .mega-menu-box{
    display:flex; align-items:stretch;
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--shadow); overflow:hidden;
  }
  .nav-dropdown:hover .mega-menu,
  .nav-dropdown:focus-within .mega-menu,
  .nav-dropdown.is-held .mega-menu{
    opacity:1; visibility:visible; transform:translateY(0); z-index:51;
    transition:opacity .15s ease, transform .15s ease, visibility 0s;
  }
  /* курсор прямує навскоси від кнопки до її відкритого меню (site.js тримає це меню класом is-held) —
     меню сусідніх кнопок, над якими він при цьому проходить, не відкриваються */
  nav.links.is-aiming .nav-dropdown:not(.is-held):not(:focus-within) .mega-menu{
    opacity:0; visibility:hidden; transform:translateY(-6px);
  }
  /* навели на іншу кнопку — попереднє меню зникає одразу, без затримки */
  nav.links:has(.nav-dropdown:hover) .nav-dropdown:not(:hover):not(.is-held):not(:focus-within) .mega-menu{
    transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  }  .mega-menu-cats{
    flex:0 0 45%; background:var(--paper-raised); border-right:1px solid var(--line);
    padding:10px; display:flex; flex-direction:column; gap:2px;
  }
  /* розділи зліва — посилання на сторінки підрозділів; наведення показує товари праворуч.
     Селектори починаються з nav.links, щоб перебити загальне правило nav.links a. */
  nav.links .mega-menu-cats a{
    display:block; padding:12px 14px; border-radius:10px;
    font-size:.86rem; font-weight:500; color:var(--ink-soft); line-height:1.35;
    white-space:normal;
  }
  nav.links .mega-menu-cats a:hover{background:var(--paper); color:var(--ink);}
  nav.links .mega-menu-cats a.is-active{background:var(--paper); color:var(--brand-700); font-weight:600;}
  .mega-menu-items{flex:1; padding:16px 20px; min-width:0;}
  .mega-menu-panel{display:flex; flex-direction:column; gap:2px;}
  nav.links .mega-menu-panel a{
    display:block; padding:9px 10px; border-radius:8px;
    font-size:.88rem; color:var(--ink); text-decoration:none; white-space:nowrap;
  }
  nav.links .mega-menu-panel a:hover{background:var(--paper-raised); color:var(--brand-700);}
  .mega-menu-panel .empty{display:block; padding:9px 10px; font-size:.86rem; color:var(--ink-faint);}

  /* пункт шапки, у розділі якого зараз відвідувач */
  nav.links > a.is-current,
  nav.links .nav-dropdown > a.is-current{color:var(--brand-700); box-shadow:inset 0 -2px 0 var(--brand-600); border-radius:8px 8px 0 0;}

  @media (max-width:1080px){
    .mega-menu{width:min(560px, 90vw);}
    nav.links .mega-menu-cats a{font-size:.8rem; padding:10px 12px;}
  }

  /* кнопка «бургер» і мобільне меню — лише на екранах до 860px (див. нижче) */
  .nav-toggle, .mobile-nav{display:none;}

  /* компактна шапка на вужчих екранах: шість пунктів меню й верхній рядок уміщаються без переносу */
  @media (max-width:1240px){
    .header-top-inner{gap:18px; padding:14px 20px;}
    .addr-block .addr-sub{display:none;}
    .addr-block .addr-lines{max-width:250px;}
    nav.links{gap:2px; padding:12px 11px;}   /* 11px + відступ кнопки 9px = ті самі 20px до краю колонки */
    nav.links > a, nav.links .nav-dropdown > a{padding:8px 9px; font-size:.84rem;}
  }

  /* ---------- телефон і планшет (до 860px) ----------
     Верхній рядок шапки: логотип ліворуч; праворуч «Записатись на візит» (лише від 601px), мова і «бургер».
     Рядок із розділами прихований: розділи, адреса, телефон і запис на візит — у меню, яке відкриває «бургер». */
  @media (max-width:860px){
    .header-top-inner{flex-wrap:nowrap; gap:12px; padding:12px 18px;}
    .logo-link{margin-right:auto;}
    .addr-block, .phone-block, .header-nav{display:none;}
    .nav-toggle{
      display:inline-flex; align-items:center; justify-content:center; flex:none;
      width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:12px;
      background:transparent; color:var(--ink); cursor:pointer;
    }
    .nav-toggle:hover{border-color:var(--brand-500); color:var(--brand-700);}
    .nav-toggle:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
    .nav-toggle path{
      stroke:currentColor; stroke-width:2; stroke-linecap:round;
      transform-box:view-box; transform-origin:12px 12px; transition:transform .2s ease, opacity .15s ease;
    }
    .nav-toggle[aria-expanded="true"] .nt-a{transform:rotate(45deg) translateY(5px);}
    .nav-toggle[aria-expanded="true"] .nt-b{opacity:0;}
    .nav-toggle[aria-expanded="true"] .nt-c{transform:rotate(-45deg) translateY(-5px);}

    /* меню на весь екран під шапкою; висоту (--mn-h) ставить site.js, сторінка під ним не гортається */
    .mobile-nav:not([hidden]){
      display:flex; flex-direction:column; gap:18px;
      position:absolute; top:100%; left:0; right:0; height:var(--mn-h, 75vh);
      overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
      padding:6px 18px calc(28px + env(safe-area-inset-bottom,0px));
      background:var(--paper); border-top:1px solid var(--line); box-shadow:var(--shadow); pointer-events:auto;
    }
    html.mn-open{overflow:hidden;}
    .mn-links{display:flex; flex-direction:column;}
    .mn-group{border-bottom:1px solid var(--line);}
    .mn-group > summary, .mn-link{
      display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px;
      font-size:1.05rem; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer;
    }
    .mn-link{border-bottom:1px solid var(--line);}
    .mn-link[aria-current="page"]{color:var(--brand-700);}
    .mn-group > summary{list-style:none;}
    .mn-group > summary::-webkit-details-marker{display:none;}
    .mn-group > summary::after{
      content:""; flex:none; width:9px; height:9px; margin-right:6px;
      border-right:2px solid currentColor; border-bottom:2px solid currentColor;
      transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease; opacity:.6;
    }
    .mn-group[open] > summary{color:var(--brand-700);}
    .mn-group[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
    .mn-group > summary:focus-visible, .mn-link:focus-visible, .mn-panel a:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px; border-radius:6px;}
    .mn-panel{display:flex; flex-direction:column; padding:0 0 14px;}
    .mn-panel a{display:flex; align-items:center; min-height:42px; padding:6px 0; text-decoration:none; color:var(--ink);}
    .mn-all{
      font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
      color:var(--brand-700) !important; gap:6px;
    }
    .mn-sub{font-size:.95rem; font-weight:600; margin-top:4px;}
    .mn-item{font-size:.92rem; color:var(--ink-soft) !important; padding-left:16px !important; border-left:2px solid var(--line);}
    .mn-contacts{display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:auto; padding-top:6px;}
    .mn-addr, .mn-phone{display:flex; align-items:flex-start; gap:10px; margin:0; font-size:.92rem; color:var(--ink); text-decoration:none;}
    .mn-addr svg, .mn-phone svg{flex:none; margin-top:2px;}
    .mn-phone{align-items:center; font-weight:700; font-size:1.05rem; min-height:44px;}
    .mn-phone svg{margin-top:0;}
    .mn-hours{font-size:.8rem; color:var(--ink-faint);}
    .mn-visit{align-self:stretch; justify-content:center;}
  }
  @media (max-width:600px){
    .site-header .visit-btn{display:none;}
  }
  @media (max-width:420px){
    .header-top-inner{gap:8px; padding-inline:14px;}
    .logo-link img{height:32px;}
  }
  @media (max-width:350px){
    .logo-link img{height:27px;}
    .lang-chev{display:none;}
  }

  /* ---------- hero ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 22px; border-radius:999px; font-weight:600; font-size:.92rem;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
  }
  .btn-primary{background:var(--brand-600); color:var(--on-brand); box-shadow:var(--shadow);}
  .btn-primary:hover{background:var(--brand-700);}
  .btn-ghost{background:transparent; border-color:rgba(255,255,255,.55); color:#fff;}
  .btn-ghost:hover{background:rgba(255,255,255,.12);}

  .hero-banner{
    position:relative; width:100%; overflow:hidden;
    height:clamp(380px, 46vw, 620px);
    border-bottom:1px solid var(--line);
  }
  .hero-slides{position:absolute; inset:0;}
  .hero-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transition:opacity 1.1s ease;
  }
  .hero-slide.is-active{opacity:1;}
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(8,14,9,.40) 0%, rgba(8,14,9,.26) 42%, rgba(8,14,9,.06) 72%);
  }
  .hero-copy{
    position:relative; z-index:2; height:100%;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  }
  .hero-copy-inner{
    display:flex; flex-direction:column; gap:16px;
    max-width:min(640px, 92vw);
  }
  .hero-copy .eyebrow{color:#B9E7C0;}
  .hero-copy .eyebrow::before{background:#B9E7C0;}
  .hero-copy h1{color:#fff; font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.06;}
  .hero-copy h1 em{font-style:normal; color:#7BE08A;}
  /* дві частини заголовка — окремі блоки: кожна врівноважується сама, без слова-одинака в рядку */
  .hero-copy h1 span, .hero-copy h1 em{display:block;}
  .hero-copy h1 br{display:none;}
  .hero-copy p.lead{color:rgba(255,255,255,.88); font-size:1.02rem; max-width:44ch;}
  .hero-copy h1{text-shadow:0 2px 16px rgba(0,0,0,.5);}
  .hero-copy .eyebrow, .hero-copy p.lead{text-shadow:0 1px 8px rgba(0,0,0,.6);}
  .hero-ctas{display:flex; gap:12px; margin-top:6px; flex-wrap:wrap;}

  .hero-dots{
    position:absolute; z-index:3; bottom:20px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px;
  }
  .hero-dots .dot{
    width:8px; height:8px; border-radius:999px; padding:0; border:none;
    background:rgba(255,255,255,.45); cursor:pointer; transition:width .2s, background .2s;
  }
  .hero-dots .dot.is-active{background:#fff; width:24px;}
  .hero-arrow{
    position:absolute; z-index:3; bottom:16px;
    width:42px; height:42px; border-radius:999px;
    border:1px solid rgba(255,255,255,.5); background:rgba(8,14,9,.35); color:#fff;
    font-size:1.5rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-arrow:hover{background:rgba(8,14,9,.6);}
  .hero-arrow.prev{right:68px;}   /* обидві стрілки в нижньому правому куті — не лягають на текст */
  .hero-arrow.next{right:16px;}

  @media (max-width:860px){
    /* текст займає майже всю ширину банера — затемнення рівніше, щоб написи читались на світлих місцях фото */
    .hero-scrim{background:linear-gradient(100deg, rgba(8,14,9,.58) 0%, rgba(8,14,9,.5) 60%, rgba(8,14,9,.3) 100%);}
  }
  @media (max-width:700px){
    /* на вузькому екрані текст вищий за банер фіксованої висоти — банер росте за текстом, нічого не зрізається */
    .hero-banner{height:auto; min-height:clamp(420px, 118vw, 560px); display:flex;}
    .hero-scrim{background:linear-gradient(190deg, rgba(8,14,9,.5) 0%, rgba(8,14,9,.55) 38%, rgba(8,14,9,.72) 100%);}
    .hero-copy{height:auto; width:100%; justify-content:flex-end; padding-top:36px; padding-bottom:56px;}
    .hero-copy-inner{max-width:100%;}
    .hero-arrow{display:none;}
    /* крапки — єдиний спосіб перемкнути слайд пальцем: кнопка 28x40, сама крапка лишається 8 px */
    .hero-dots{gap:0; bottom:4px;}
    .hero-dots .dot{position:relative; width:28px; height:40px; background:none; transition:none;}
    .hero-dots .dot::before{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:999px; background:rgba(255,255,255,.45); transition:width .2s, margin .2s, background .2s;}
    .hero-dots .dot.is-active{width:40px; background:none;}
    .hero-dots .dot.is-active::before{width:24px; margin-left:-12px; background:#fff;}
  }
  @media (max-width:420px){ .hero-copy h1{font-size:1.65rem;} }
  @media (max-width:350px){ .hero-copy h1{font-size:1.45rem;} }

  /* ---------- marquee ---------- */
  .marquee{
    background:var(--brand-600); color:var(--on-brand);
    overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--line);
  }
  .marquee-track{
    display:inline-flex; gap:0; animation:scroll 80s linear infinite;
  }
  .marquee-track span{
    font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.1em;
    padding-block:11px; padding-inline:26px; text-transform:uppercase; opacity:.85;
    border-right:1px solid rgba(248,251,243,.18);
  }
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

  /* ---------- sections ---------- */
  /* місце під смугу прокрутки зарезервоване завжди: коли меню чи вікно блокують прокручування, нічого не зсувається */
  html{scrollbar-gutter:stable;}
  section{padding-block:64px;}
  /* перехід за якорем: розділ стає нижче липкої шапки, напис над заголовком не ховається під неї */
  section[id]{scroll-margin-top:24px;}
  @media (min-width:861px){ section[id]{scroll-margin-top:calc(var(--header-h, 129px) - 45px);} }   /* --header-h ставить site.js */
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap;}
  .section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
  .section-head p{max-width:52ch;}

  .cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media (max-width:900px){ .cards3{grid-template-columns:1fr;} }
  .cat-card{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:26px; display:flex; flex-direction:column; gap:16px;
    transition:transform .18s, box-shadow .18s, border-color .18s;
  }
  .cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-500);}
  .cat-card .icon{
    width:52px; height:52px; border-radius:var(--radius-s);
    background:var(--chip-bg); color:var(--chip-fg);
    display:flex; align-items:center; justify-content:center;
  }
  .cat-card h3{font-size:1.12rem; font-weight:700;}
  .cat-card .go{
    margin-top:auto; display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--brand-700); text-decoration:none;
  }
  /* уся картка — посилання: невидима накладка від «Детальніше» на всю її площу */
  .cat-card{position:relative;}
  .cat-card .go::after{content:""; position:absolute; inset:0; border-radius:var(--radius-m);}
  .cat-card:focus-within{border-color:var(--brand-500);}

  /* «Про компанію» на головній: велика цифра ліворуч (прикраса), заголовок і текст праворуч */
  .about{padding-block:56px;}
  .about-grid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:56px; align-items:center;}
  .about-figure{
    margin:0; display:flex; align-items:flex-start; line-height:.82; font-weight:800; letter-spacing:-.04em;
    color:var(--brand-600); font-variant-numeric:lining-nums;
  }
  .about-num{font-size:clamp(5.5rem, 13vw, 10.5rem);}
  .about-plus{font-size:clamp(2.6rem, 6vw, 4.8rem); margin-top:.08em; color:var(--brand-500);}
  .about-copy h2{font-size:clamp(1.6rem,3vw,2.3rem); margin:10px 0 14px;}
  .about-copy p:not(.eyebrow){font-size:1.02rem; max-width:60ch;}
  @media (max-width:700px){
    .about{padding-block:44px;}
    .about-grid{grid-template-columns:1fr; gap:22px;}
  }

  .trust{background:var(--paper-sunken); border-block:1px solid var(--line);}
  .trust .wrap{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
  .trust h2{font-size:clamp(1.6rem,3vw,2.3rem); margin:10px 0 14px;}
  .trust p:not(.eyebrow){font-size:1rem; max-width:48ch;}
  .trust-points{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px;}
  .trust-points li{display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--ink);}
  .trust-points li svg{flex:none; margin-top:2px; color:var(--brand-600);}
  @media (max-width:860px){ .trust .wrap{grid-template-columns:1fr;} }

  .services{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media (max-width:900px){ .services{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .services{grid-template-columns:1fr;} }
  .svc{padding-top:18px; border-top:2px solid var(--brand-600);}
  .svc .num{font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--ink-faint);}
  .svc h3{font-size:1rem; margin-top:8px; margin-bottom:8px; font-weight:700;}
  .svc p{font-size:.88rem;}

  .news{background:var(--paper-raised); border-block:1px solid var(--line);}
  /* «Акції та новини» на головній — світлий фон сторінки, як у «Після покупки»; картки трохи темніші за фон */
  #news, .news.is-plain{background:none; border-block:0;}
  #news .news-card, .news.is-plain .news-card{background:var(--paper-raised);}
  .news-note{font-size:.82rem; color:var(--ink-faint); margin-top:6px;}
  .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px;}
  @media (max-width:900px){ .news-grid{grid-template-columns:1fr;} }
  .news-card{
    background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius-m);
    padding:22px; display:flex; flex-direction:column; gap:10px;
  }
  .news-card .badge{
    align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:3px 9px;
  }
  .news-card h3{font-size:1rem; font-weight:700;}

  /* доставка на головній: смуга з фото на фоні (правила .photo-band нижче). Ліворуч коротко й посилання
     на сторінку доставки, праворуч — невелика напівпрозора «мапа» маршруту, що лежить поверх фото */
  .delivery{background:var(--paper-sunken); border-block:1px solid var(--line);}
  .dlv-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  @media (max-width:860px){ .dlv-grid{grid-template-columns:1fr; gap:36px;} }
  .delivery h2{font-size:clamp(1.6rem,3vw,2.3rem); margin:10px 0 14px;}
  .dlv-copy > p{max-width:52ch;}
  .dlv-more{margin-top:24px;}
  /* сторінка доставки: етапи — ряд кружків-номерів на спільній лінії (на вузьких — у стовпчик) */
  .dlv-timeline{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;}
  .dlv-timeline li{position:relative; padding-top:56px;}
  .dlv-timeline li::before{content:""; position:absolute; top:18px; left:0; right:-24px; height:2px; background:var(--line);}
  .dlv-timeline li:last-child::before{display:none;}
  .dlv-timeline .num{
    position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--brand-600); color:var(--on-brand); box-shadow:0 0 0 6px var(--paper);
    font-family:'IBM Plex Mono',monospace; font-size:.76rem;
  }
  .dlv-timeline h3{font-size:1.05rem; font-weight:700; margin:0 0 6px;}
  .dlv-timeline p{font-size:.9rem; margin:0; max-width:32ch;}
  @media (max-width:860px){
    .dlv-timeline{grid-template-columns:1fr; gap:26px;}
    .dlv-timeline li{padding:6px 0 0 58px;}
    .dlv-timeline li::before{top:38px; bottom:-26px; left:18px; right:auto; width:2px; height:auto;}
  }
  /* «мапа» маршруту: невелика «скляна» картка — така сама, як плашка з переліком у «Чому Бетонотехніка»:
     темний напівпрозорий фон, розмиття того, що під нею, тонка світла рамка. Сітка лишається як натяк на мапу. */
  .dlv-route{
    position:relative; margin:0; width:min(100%, 360px); justify-self:end; aspect-ratio:4/3; overflow:hidden;
    border-radius:var(--radius-l); border:1px solid rgba(255,255,255,.16);
    background-color:rgba(10,18,12,.46);
    -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
    background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:24px 24px;
  }
  @media (max-width:860px){ .dlv-route{justify-self:start;} }
  .dlv-map{position:absolute; inset:0; width:100%; height:100%;}
  .dlv-road{fill:none; stroke:rgba(255,255,255,.07); stroke-width:12; stroke-linecap:round;}
  .dlv-path{fill:none; stroke:#B9E7C0; stroke-width:3; stroke-linecap:round; stroke-dasharray:1 9; animation:dlv-march 1.4s linear infinite;}
  @keyframes dlv-march{ to{stroke-dashoffset:-20;} }
  .dlv-pin{fill:#FFFFFF;}
  .dlv-pin-halo{fill:rgba(185,231,192,.22); transform-box:fill-box; transform-origin:center; animation:dlv-pulse 2.4s ease-out infinite;}
  @keyframes dlv-pulse{ 0%{transform:scale(.6); opacity:1;} 100%{transform:scale(1.6); opacity:0;} }
  .dlv-truck > circle:first-child{fill:#FFFFFF;}
  .dlv-truck path{fill:none; stroke:var(--brand-700); stroke-width:1.8;}
  .dlv-truck .dlv-wheel{fill:var(--brand-700);}
  .dlv-flag{stroke:#FFFFFF; stroke-width:2; stroke-linecap:round;}
  .dlv-flag-cloth{fill:#3AA34A;}
  @media (prefers-reduced-motion: reduce){ .dlv-path, .dlv-pin-halo{animation:none;} }
  .dlv-point{position:absolute; display:flex; flex-direction:column; gap:3px;}
  .dlv-from{top:18px; left:20px;}
  .dlv-to{bottom:18px; right:20px; text-align:right;}
  .dlv-k{font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#B9E7C0;}
  .dlv-v{font-size:1rem; font-weight:700; color:#FFFFFF;}

  .cta-banner{
    background:var(--brand-600); color:var(--on-brand); border-radius:var(--radius-l);
    padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    margin-inline:20px;
  }
  .cta-banner h2{color:var(--on-brand); font-size:clamp(1.4rem,2.6vw,1.9rem); max-width:22ch;}
  .cta-banner .btn-primary{background:var(--cta-btn-bg); color:var(--brand-600);}
  .cta-banner .btn-primary:hover{background:var(--brand-050);}

  footer{padding-block:56px 28px; font-size:.88rem;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;}
  @media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
  footer h4{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; font-weight:600;}
  footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
  footer a{text-decoration:none; color:var(--ink-soft);}
  footer a:hover{color:var(--brand-700);}
  .foot-bottom{
    margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-size:.78rem; color:var(--ink-faint);
  }

  a:focus-visible, button:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}

  .foot-contact li{display:flex; gap:8px; align-items:flex-start; color:var(--ink-soft); line-height:1.45;}
  .foot-contact svg{flex:none; margin-top:2px; color:var(--ink-faint);}

  /* ================= внутрішні сторінки каталогу ================= */

  /* хлібні крихти */
  .crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; row-gap:4px; font-size:.8rem; color:var(--ink-faint);}
  .crumbs li{display:flex; align-items:center; min-width:0;}
  .crumbs li + li::before{content:"/"; margin-inline:8px; color:var(--ink-faint); opacity:.6;}
  .crumbs a{color:var(--ink-soft); text-decoration:none;}
  .crumbs a:hover{color:var(--brand-700); text-decoration:underline;}
  .crumbs [aria-current="page"]{color:var(--ink);}
  @media (max-width:560px){ .crumbs li:nth-child(n+3)[aria-current="page"]{display:none;} }

  /* шапка сторінки розділу */
  .page-head{padding-block:26px 40px; background:var(--paper-sunken); border-bottom:1px solid var(--line);}
  .page-head .wrap{display:flex; flex-direction:column; gap:14px;}
  .page-head .crumbs{margin-bottom:12px;}
  .page-head h1{font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.08; max-width:26ch;}
  .page-head .lead{font-size:1rem; max-width:62ch;}
  .head-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
  .fact{
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--chip-fg); background:var(--chip-bg); border-radius:999px; padding:5px 12px;
    font-variant-numeric:tabular-nums;
  }

  /* смуга із заголовком розділу з фото замість однотонного фону; написи на тих самих місцях.
     Текст поверх фото світлий в обох темах, бо під ним завжди затемнення. */
  .page-head.has-photo{
    --on-photo:#FFFFFF; --on-photo-soft:rgba(255,255,255,.86); --on-photo-faint:rgba(255,255,255,.7); --on-photo-accent:#B9E7C0;
    position:relative; overflow:hidden; isolation:isolate;
    background:var(--brand-900); padding-block:26px 64px;
  }
  .page-head-photo{
    position:absolute; inset:0; z-index:-2;
    width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 42%;
  }
  /* паралакс (клас ставить site.js): фото на всю ширину смуги зі своєю висотою, без обрізання під смугу;
     зсув при прокручуванні задає скрипт */
  .page-head-photo.is-parallax{inset:0 auto auto 0; height:auto; will-change:transform;}
  .page-head-scrim{
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg, rgba(8,14,9,.66) 0%, rgba(8,14,9,.46) 45%, rgba(8,14,9,.14) 82%);
  }
  .page-head.has-photo h1{color:var(--on-photo);}
  .page-head.has-photo .lead{color:var(--on-photo-soft);}
  .page-head.has-photo .eyebrow{color:var(--on-photo-accent);}
  .page-head.has-photo .eyebrow::before{background:var(--on-photo-accent);}
  .page-head.has-photo .crumbs ol,
  .page-head.has-photo .crumbs li + li::before{color:var(--on-photo-faint);}
  .page-head.has-photo .crumbs a{color:var(--on-photo-soft);}
  .page-head.has-photo .crumbs a:hover{color:var(--on-photo);}
  .page-head.has-photo .crumbs [aria-current="page"]{color:var(--on-photo);}
  @media (max-width:700px){
    .page-head-scrim{background:linear-gradient(180deg, rgba(8,14,9,.52) 0%, rgba(8,14,9,.62) 100%);}
  }
  /* сторінка доставки, верхня смуга: нерухоме фото (без паралаксу — так просив користувач), видиму частину
     задає object-position на самому img. Затемнення слабше, ніж у розділах каталогу, але зліва трохи
     щільніше, бо під написами світле небо й тент; написи тримає ще й м'яка тінь */
  .dlv-head .page-head-scrim{background:linear-gradient(100deg, rgba(8,14,9,.52) 0%, rgba(8,14,9,.32) 45%, rgba(8,14,9,.08) 82%);}
  .dlv-head h1{text-shadow:0 2px 18px rgba(0,0,0,.5);}
  .dlv-head .lead, .dlv-head .eyebrow, .dlv-head .crumbs{text-shadow:0 1px 8px rgba(0,0,0,.6);}
  .dlv-head .lead{color:rgba(255,255,255,.94);}
  @media (max-width:700px){
    .dlv-head .page-head-scrim{background:linear-gradient(180deg, rgba(8,14,9,.38) 0%, rgba(8,14,9,.46) 100%);}
  }
  /* звичайний розділ із фото на фоні (сторінка доставки, «Умови»): те саме фото з паралаксом і затемненням,
     заголовок світлий, картки лишаються як були */
  .photo-band{position:relative; overflow:hidden; isolation:isolate; background:var(--brand-900); border-block:0;}
  .photo-band .page-head-scrim{background:linear-gradient(100deg, rgba(8,14,9,.35) 0%, rgba(8,14,9,.25) 50%, rgba(8,14,9,.15) 100%);}
  /* затемнення слабке, тож написи тримає ще й м'яка тінь */
  .photo-band h2{color:#FFFFFF; text-shadow:0 2px 16px rgba(0,0,0,.5);}
  .photo-band .eyebrow{color:#B9E7C0; text-shadow:0 1px 8px rgba(0,0,0,.55);}
  .photo-band .eyebrow::before{background:#B9E7C0;}
  .photo-band .news-note{color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,0,0,.6);}
  @media (max-width:860px){
    /* на вузькому екрані заголовок лягає на світлу частину фото — темніша лише смуга під ним, нижче як було */
    .photo-band .page-head-scrim{background:linear-gradient(180deg, rgba(8,14,9,.55) 0, rgba(8,14,9,.5) 220px, rgba(8,14,9,.2) 460px);}
  }
  /* «Чому Бетонотехніка» на головній — та сама смуга з фото й паралаксом. Текст ліворуч світлий на
     легкому затемненні; перелік праворуч лежить на напівпрозорій «скляній» плашці, бо під ним строката
     частина фото (коробка з написами), і без плашки рядки не читалися б. */
  .trust.photo-band .page-head-scrim{background:linear-gradient(90deg, rgba(8,14,9,.5) 0%, rgba(8,14,9,.3) 46%, rgba(8,14,9,.08) 100%);}
  .trust.photo-band p:not(.eyebrow){color:rgba(255,255,255,.94); text-shadow:0 1px 8px rgba(0,0,0,.6);}
  .trust.photo-band .trust-points{
    margin-top:0; padding:22px 24px; border-radius:var(--radius-l);
    background:rgba(10,18,12,.46); border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  }
  .trust.photo-band .trust-points li{color:#FFFFFF;}
  .trust.photo-band .trust-points li svg{color:#B9E7C0;}
  @media (max-width:860px){
    .trust.photo-band .page-head-scrim{background:linear-gradient(180deg, rgba(8,14,9,.5) 0%, rgba(8,14,9,.32) 100%);}
  }
  /* «Доставка» на головній — така сама смуга з фото й паралаксом. Текст ліворуч світлий (під ним небо й
     тент, тому затемнення зліва трохи сильніше); мапа маршруту праворуч — невелика «скляна» картка. */
  .delivery.photo-band .page-head-scrim{background:linear-gradient(90deg, rgba(8,14,9,.55) 0%, rgba(8,14,9,.34) 46%, rgba(8,14,9,.08) 100%);}
  .delivery.photo-band .dlv-copy > p:not(.eyebrow){color:rgba(255,255,255,.94); text-shadow:0 1px 8px rgba(0,0,0,.6);}
  @media (max-width:860px){
    .delivery.photo-band .page-head-scrim{background:linear-gradient(180deg, rgba(8,14,9,.55) 0%, rgba(8,14,9,.3) 100%);}
  }

  /* тінь логотипа на фоні сторінки напрямку — як на титулі технічної документації: знак повернутий,
     у 1,37 раза ширший за екран і на 29% своєї ширини заходить за лівий край (ті самі пропорції, що на аркуші А4) */
  .dir-body{position:relative; isolation:isolate; overflow:hidden; overflow:clip;} /* clip, а не hidden: не ламає липкі елементи всередині */
  .logo-shadow{
    --mark-w:min(136.7vw, 2400px);
    /* початкове положення трохи вище верхнього краю розділу: далі знак з'їжджає вниз паралаксом */
    position:absolute; z-index:-1; top:calc(var(--mark-w) * -0.07); left:calc(var(--mark-w) * -0.2906);
    width:var(--mark-w); height:auto; max-width:none;
    fill:var(--logo-shadow); pointer-events:none;
    will-change:transform; /* паралакс: зсув при прокручуванні задає site.js */
  }
  /* текстова частина смуг прозора, щоб знак проглядав під назвами, як текст на титулі лежить поверх тіні */
  /* під назвами позицій знак лише ледь проглядає: смуга має власну напівпрозору поверхню (--strip-bg) */

  /* сторінка напрямку: кожен підрозділ — рядок із заголовком і посиланням, під ним товари смугами на всю ширину */
  .sub-rows{border-top:1px solid var(--line);}
  .sub-row{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 40px; align-items:start;
    padding-block:28px; border-bottom:1px solid var(--line);
  }
  .sub-row-head{grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:8px; min-width:0;}
  .sub-row .count{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700); font-variant-numeric:tabular-nums;}
  .sub-row .count.is-empty{color:var(--ink-faint);}
  .sub-row h2{font-size:1.22rem; font-weight:700; line-height:1.25;}
  .sub-row h2 a{text-decoration:none;}
  .sub-row h2 a:hover{color:var(--brand-700);}
  .sub-row > .go{grid-column:2; grid-row:1; padding-top:6px; white-space:nowrap;}
  .sub-row-body{grid-column:1 / -1; grid-row:2; margin-top:8px; min-width:0;}
  /* товари розділу — вузькі смуги одна під одною: зліва назва й кнопка, решта — фото */
  .prod-strips{display:flex; flex-direction:column; gap:12px;}
  .prod-strip{
    display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr); min-height:132px;
    background:var(--strip-bg); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-soft);
    text-decoration:none; color:inherit; transition:border-color .18s, box-shadow .18s, min-height .35s ease;
  }
  .prod-strip:hover{border-color:var(--brand-500); box-shadow:var(--shadow);}
  /* наведення (або фокус з клавіатури) розгортає смугу по висоті: віконце з фото більшає,
     під назвою з'являється короткий опис. На сенсорних екранах наведення немає — там опис видно одразу. */
  .prod-strip-text{display:flex; flex-direction:column; min-width:0;}
  .prod-strip-desc{
    margin:0; max-width:40ch; font-size:.88rem; line-height:1.45; color:var(--ink-soft);
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease;
  }
  @media (hover:hover){
    .prod-strip:hover, .prod-strip:focus-visible{min-height:300px;}
    .prod-strip:hover .prod-strip-desc, .prod-strip:focus-visible .prod-strip-desc{max-height:6em; opacity:1; margin-top:8px;}
  }
  @media (hover:none){
    .prod-strip-desc{max-height:none; opacity:1; margin-top:6px;}
  }
  @media (prefers-reduced-motion:reduce){
    .prod-strip, .prod-strip-desc{transition:none;}
  }
  .prod-strip-info{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; padding:18px 24px; min-width:0;}
  .prod-strip-info h3{font-size:1.05rem; font-weight:700; line-height:1.3;}
  .prod-strip-title{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}
  .prod-strip-btn{
    display:inline-flex; align-items:center; padding:8px 18px; border-radius:999px;
    border:1.5px solid var(--brand-600); color:var(--brand-700); font-size:.84rem; font-weight:600;
    transition:background .15s, color .15s;
  }
  .prod-strip:hover .prod-strip-btn{background:var(--brand-600); color:var(--on-brand);}
  .prod-strip-media{position:relative; min-width:0; border-left:1px solid var(--line); background:var(--paper-sunken);}
  .prod-strip-media img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;}
  .prod-strip-media.ph{aspect-ratio:auto; border-bottom:0; flex-direction:row; gap:16px; padding:12px 20px;}
  /* заглушка порожнього розділу: пунктир, як у прикладах новин */
  .prod-strip.is-placeholder{border-style:dashed;}
  .prod-strip.is-placeholder .prod-strip-media{border-left-style:dashed;}
  @media (max-width:560px){
    /* телефон: позиція — картка; фото зверху на всю ширину, під ним назва, опис і кнопка */
    .prod-strip, .prod-strip:hover, .prod-strip:focus-visible{grid-template-columns:minmax(0,1fr); min-height:0;}
    .prod-strip-media{order:-1; aspect-ratio:16/9; border-left:0; border-bottom:1px solid var(--line);}
    .prod-strip.is-placeholder .prod-strip-media{border-bottom-style:dashed;}
    .prod-strip-info{padding:14px 16px 16px; gap:10px;}
    .prod-strip-info h3{font-size:1rem;}
    .prod-strip-media.ph{aspect-ratio:16/6; flex-direction:column; gap:4px; padding:10px;}
    .prod-strip-media .ph-code{font-size:1.15rem; text-align:center;}
  }
  @media (max-width:860px){
    .sub-row{grid-template-columns:1fr; gap:12px;}
    .sub-row-head, .sub-row > .go, .sub-row-body{grid-column:auto; grid-row:auto;}
    .sub-row > .go{padding-top:0;}
  }

  .btn-outline{background:transparent; border-color:var(--brand-600); color:var(--brand-700);}
  .btn-outline:hover{background:var(--brand-050);}
  .eyebrow a{color:inherit; text-decoration:none;}
  .eyebrow a:hover{text-decoration:underline;}

  .sub-row > .go, .prod-card .go{
    margin-top:auto; display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--brand-700); text-decoration:none;
  }
  @media (max-width:860px){
    .sub-row > .go{min-height:44px; margin-bottom:-16px; font-size:.8rem;}
  }

  /* сторінка підрозділу: бокове меню + сітка товарів */
  .catalog-layout{display:grid; grid-template-columns:270px minmax(0,1fr); gap:40px; align-items:start;}
  .side-nav{position:sticky; top:calc(env(safe-area-inset-top,0px) + 150px); min-width:0;}
  .side-nav .side-title{
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); margin:0 0 10px 12px;
  }
  .side-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
  .side-nav a{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink-soft); font-size:.9rem; line-height:1.35;}
  .side-nav a:hover{background:var(--paper-raised); color:var(--ink);}
  .side-nav a[aria-current="page"]{background:var(--paper-raised); color:var(--brand-700); font-weight:600;}
  @media (max-width:860px){
    .catalog-layout{grid-template-columns:1fr; gap:24px;}
    .side-nav{position:static;}
    .side-nav ul{flex-direction:row; flex-wrap:wrap; gap:8px;}
    .side-nav a{border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.84rem;}
  }

  .prod-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
  .prod-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  @media (max-width:1080px){ .prod-grid, .prod-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:560px){ .prod-grid, .prod-grid.cols-4{grid-template-columns:1fr;} }
  .prod-card{
    display:flex; flex-direction:column; min-width:0;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
    text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s, border-color .18s;
  }
  .prod-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-500);}
  .prod-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1;}
  /* справжнє фото товару в картці — той самий кадр 4:3, що й у заглушки */
  .prod-media{aspect-ratio:4/3; max-width:100%; overflow:hidden; background:var(--paper-sunken); border-bottom:1px solid var(--line);}
  .prod-media img{display:block; width:100%; height:100%; object-fit:cover;}
  .prod-body h3{font-size:1rem; font-weight:700; line-height:1.3;}

  /* заглушка фото: аркуш у клітинку з позначенням моделі, доки немає справжнього знімка */
  .ph{
    position:relative; aspect-ratio:4/3; max-width:100%;
    background-color:var(--paper-sunken);
    background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:20px 20px; background-position:-1px -1px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:16px; text-align:center; border-bottom:1px solid var(--line);
  }
  .ph-code{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif; font-weight:800; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--brand-700); letter-spacing:-.01em; line-height:1.1;}
  .ph-note{font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
  .ph-stamp{
    position:absolute; right:14px; bottom:14px; display:flex;
    border:1px solid var(--ink-faint); background:var(--paper);
    font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  }
  .ph-stamp span{padding:5px 9px;}
  .ph-stamp span + span{border-left:1px solid var(--ink-faint); color:var(--ink); font-weight:600;}

  /* порожній підрозділ */
  .empty-state{
    border:1px dashed var(--line); border-radius:var(--radius-m); background:var(--paper);
    padding:36px; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  }
  .empty-state h2{font-size:1.4rem;}
  .empty-state p{max-width:56ch;}
  .empty-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:6px;}
  .phone-text{display:inline-flex; align-items:center; gap:8px; min-height:40px; font-weight:600; color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums;}
  a.phone-text:hover{color:var(--brand-700);}
  @media (max-width:560px){ .empty-state{padding:24px;} }

  /* панель з телефоном (зараз — на сторінці «Сервіс і підтримка», див. .srv-phone) */
  .contact-card{
    margin-top:8px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-m);
    background:var(--paper-raised); display:grid; gap:4px;
  }
  .contact-card .label{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
  .contact-card .value{font-size:1.15rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
  .contact-card .sub{font-size:.84rem; color:var(--ink-faint);}

  /* ---------- сторінка «Сервіс і підтримка» ---------- */
  .svc-more{margin-top:28px;}   /* кнопка під переліком послуг на головній */
  /* чотири напрями підтримки: картки 2x2 з тією самою зеленою лінією зверху, що й у переліку на головній */
  .srv-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}
  @media (max-width:760px){ .srv-grid{grid-template-columns:1fr;} }
  .srv-card{
    display:flex; flex-direction:column; gap:10px; padding:26px;
    background:var(--paper-raised); border:1px solid var(--line); border-top:2px solid var(--brand-600);
    border-radius:var(--radius-m);
  }
  .srv-card .num{font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--ink-faint);}
  .srv-card h3{font-size:1.12rem; font-weight:700;}
  .srv-card > p{font-size:.94rem; margin:0;}
  .srv-card > p.srv-sub{
    margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft);
  }
  .srv-list{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
  .srv-list li{position:relative; padding-left:20px; font-size:.9rem; color:var(--ink);}
  .srv-list li::before{content:""; position:absolute; left:1px; top:.5em; width:7px; height:7px; border-radius:2px; background:var(--brand-600);}
  .srv-card .go{
    margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
    font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--brand-700); text-decoration:none;
  }
  .srv-card .go{position:relative;}
  .srv-card .go::after{content:""; position:absolute; inset:-5px -8px -12px;}
  .srv-card .go:hover{text-decoration:underline;}
  /* «Як звернутися»: ліворуч що підготувати, праворуч картка з телефоном і кнопками */
  .srv-contact-band{background:var(--paper-sunken); border-block:1px solid var(--line);}
  .srv-contact{display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:center;}
  @media (max-width:860px){ .srv-contact{grid-template-columns:1fr; gap:32px;} }
  .srv-contact h2{font-size:clamp(1.6rem,3vw,2.3rem); margin:10px 0 14px;}
  .srv-steps{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:16px;}
  .srv-steps li{display:grid; grid-template-columns:38px minmax(0,1fr); gap:14px; align-items:start;}
  .srv-steps .num{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--brand-600); color:var(--on-brand); font-family:'IBM Plex Mono',monospace; font-size:.8rem;
  }
  .srv-steps h3{font-size:1rem; font-weight:700; margin:6px 0 3px;}
  .srv-steps p{font-size:.9rem; margin:0;}
  .contact-card.srv-phone{
    margin-top:0; padding:26px; gap:8px; align-content:start;
    background:var(--paper); border-radius:var(--radius-l); box-shadow:var(--shadow-soft);
  }
  .srv-phone .value{font-size:1.5rem; text-decoration:none; justify-self:start;}
  .srv-phone .value:hover{color:var(--brand-700);}
  .srv-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}

  .tag-example{
    font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:3px 9px;
  }
  .spec-wrap{overflow-x:auto; margin-top:22px;}
  .spec-table{width:100%; max-width:780px; border-collapse:collapse; font-size:.92rem;}
  .spec-table th, .spec-table td{padding:14px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
  .spec-table tr:first-child th, .spec-table tr:first-child td{border-top:1px solid var(--line);}
  .spec-table th{font-weight:500; color:var(--ink-soft); width:62%; padding-right:24px;}
  .spec-table td{font-family:'IBM Plex Mono',monospace; color:var(--ink-faint); font-variant-numeric:tabular-nums;}

  /* ================= позиція відкривається на місці (сторінка напрямку з inlineViewer) =================
     Стан «перегляд»: обрана позиція займає всю ширину центральної колонки, а всі позиції стають вкладками
     в рейці поза колонкою — у лівому полі, притиснуті до краю екрана, згруповані за розділами.
     Перехід між списком і переглядом анімує View Transitions API (site.js). */
  .pv{position:relative;}
  /* рейка займає ліве поле від краю екрана до колонки; вкладки в ній липнуть під шапкою */
  /* --sbw — ширина смуги прокрутки (ставить site.js), бо 100vw її включає */
  .pv-rail{
    position:absolute; top:0; bottom:0; right:calc(100% + 12px);
    width:calc((100vw - var(--sbw, 0px) - 100%) / 2 - 12px);
    container-type:inline-size;
  }
  .pv-tabs{
    position:sticky; top:calc(env(safe-area-inset-top,0px) + 150px);
    display:flex; flex-direction:column; gap:6px;
    max-height:calc(100vh - 170px); overflow-y:auto; scrollbar-width:none;
  }
  .pv-tabs::-webkit-scrollbar{display:none;}
  /* розділи: у вузькій рейці — тонкий роздільник, у широкій — підпис */
  .pv-group{flex:none; height:1px; margin:5px 10px 5px 0; background:var(--line); font-size:0; overflow:hidden;}
  .pv-group:first-child{display:none;}
  .pv-tab{
    all:unset; box-sizing:border-box; cursor:pointer; flex:none;
    display:flex; align-items:center; gap:10px; width:100%;
    padding:5px;
    background:var(--strip-bg); border:1px solid var(--line); border-left:0; border-radius:0 12px 12px 0;
    color:var(--ink-soft); font-size:.84rem; font-weight:600; line-height:1.25;
    box-shadow:var(--shadow-soft);
    transition:transform .18s ease, background .15s, color .15s, border-color .15s;
  }
  .pv-tab:hover{transform:translateX(4px); color:var(--ink); border-color:var(--brand-500);}
  .pv-tab:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
  .pv-tab[aria-current="true"]{background:var(--brand-600); border-color:var(--brand-600); color:var(--on-brand);}
  .pv-tab.is-placeholder .pv-tab-label{font-weight:500;}
  .pv-thumb{flex:none; display:block; width:40px; height:32px; border-radius:6px; overflow:hidden; background:var(--paper-sunken);}
  .pv-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
  .pv-thumb.ph{
    background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:8px 8px;
  }
  .pv-tab-label{display:none; min-width:0; overflow-wrap:anywhere;}
  @container (min-width:150px){
    .pv-tab{padding:6px 12px 6px 10px;}
    .pv-thumb{width:48px; height:36px;}
    .pv-tab-label{display:block;}
    .pv-group{
      height:auto; margin:12px 8px 0 12px; background:none; overflow:visible;
      font-family:'IBM Plex Mono',monospace; font-size:.62rem; line-height:1.35; letter-spacing:.08em;
      text-transform:uppercase; color:var(--ink-faint);
    }
    .pv-group:first-child{display:block; margin-top:0;}
  }

  /* обрана позиція: картка на всю ширину колонки — фото з назвою поверх, під ним опис і дії */
  .pv-panel{min-width:0;}
  .pv-detail{
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-soft);
  }
  .pv-photo{
    --on-photo:#FFFFFF; --on-photo-soft:rgba(255,255,255,.88); --on-photo-accent:#B9E7C0;
    position:relative; margin:0; background:var(--paper-sunken);
  }
  .pv-photo img, .pv-photo .ph{display:block; width:100%; height:auto; max-width:100%; aspect-ratio:var(--ar); max-height:min(62vh, 600px); object-fit:cover;}
  .pv-photo .ph{border-bottom:0;}
  /* вертикальні кадри з галереї: фото вписане цілком, поля по боках — розмита копія того ж фото */
  .pv-photo.is-contain{overflow:hidden;}
  .pv-photo.is-contain::before{
    content:""; position:absolute; inset:-40px;
    background:var(--bg) center / cover no-repeat; filter:blur(28px) brightness(.7) saturate(1.1);
  }
  .pv-photo.is-contain > img{position:relative; object-fit:contain;}
  /* затемнення: смуга зверху під розділом і кнопкою, пляма знизу ліворуч під назвою */
  .pv-photo::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(8,14,9,.42) 0%, rgba(8,14,9,0) 24%),
      linear-gradient(20deg, rgba(8,14,9,.74) 0%, rgba(8,14,9,.36) 30%, rgba(8,14,9,0) 58%);
  }
  .pv-top{
    position:absolute; z-index:1; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px;
  }
  .pv-section{margin:0; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-photo-accent);}
  .pv-close{
    all:unset; box-sizing:border-box; cursor:pointer; flex:none;
    display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
    background:rgba(8,14,9,.42); border:1px solid rgba(255,255,255,.4); color:var(--on-photo);
    font-size:.84rem; font-weight:600; backdrop-filter:blur(6px);
  }
  .pv-close:hover{background:rgba(8,14,9,.6);}
  .pv-close:focus-visible{outline:2px solid var(--on-photo); outline-offset:2px;}
  /* назва позиції — поверх фото, внизу ліворуч */
  .pv-caption{
    position:absolute; z-index:1; left:0; bottom:0; max-width:min(100%, 680px);
    display:flex; flex-direction:column; gap:8px; padding:22px 26px 24px;
  }
  .pv-code{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
    color:var(--on-photo); font-size:clamp(2.2rem,4.2vw,3.6rem); line-height:1; letter-spacing:-.02em;
    text-shadow:0 2px 18px rgba(0,0,0,.35);
  }
  .pv-code .tag-example{color:var(--on-photo); border-color:rgba(255,255,255,.55); text-shadow:none;}
  .pv-name{margin:0; color:var(--on-photo-soft); font-size:1.02rem; text-shadow:0 1px 10px rgba(0,0,0,.4);}
  /* без фото (аркуш у клітинку) — написи темні, без затемнення */
  .pv-photo.no-img::after{display:none;}
  .pv-photo.no-img .pv-section{color:var(--brand-700);}
  .pv-photo.no-img .pv-code, .pv-photo.no-img .pv-code .tag-example{color:var(--ink); text-shadow:none;}
  .pv-photo.no-img .pv-code .tag-example{color:var(--ink-faint); border-color:var(--line);}
  .pv-photo.no-img .pv-close{background:var(--paper); border-color:var(--line); color:var(--ink-soft); backdrop-filter:none;}
  .pv-photo.no-img .ph-note{position:absolute; right:22px; bottom:26px;}
  @media (min-width:561px){ .pv-photo.no-img .pv-caption{max-width:min(100% - 170px, 680px);} }
  /* галерея: ряд мініатюр під фото; порожні клітинки — місця під майбутні фото */
  .pv-gallery{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; padding:12px 26px 0;}
  .pv-shot{
    all:unset; box-sizing:border-box; display:block; aspect-ratio:4/3; overflow:hidden; cursor:pointer;
    background:var(--paper-sunken); border:1px solid var(--line);
  }
  .pv-shot img{display:block; width:100%; height:100%; object-fit:cover; transition:opacity .15s;}
  .pv-shot:hover img{opacity:.85;}
  .pv-shot.is-active{outline:2px solid var(--brand-600); outline-offset:-2px;}
  .pv-shot:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
  .pv-shot.is-empty{
    cursor:default;
    background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:12px 12px;
  }
  /* опис і характеристики — дві колонки під галереєю */
  .pv-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px 44px; padding:26px 26px 28px;}
  .pv-about, .pv-specs{min-width:0; padding-block:0;}
  .pv-sec-head{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px;}
  .pv-sec-head h3{font-size:1.15rem; font-weight:700;}
  .pv-desc{margin:0 0 10px; max-width:60ch; font-size:.98rem; color:var(--ink);}
  .pv-more{margin:0; max-width:60ch; font-size:.94rem;}
  .pv-more + .pv-more{margin-top:10px;}
  /* можливі модифікації — одразу після опису */
  .pv-mods{margin-top:20px;}
  /* комплект поставки: нумерований перелік із прайсу */
  .pv-kit{margin-top:18px;}
  .pv-kit-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); counter-reset:kit;}
  .pv-kit-list li{
    counter-increment:kit; display:grid; grid-template-columns:22px 1fr; gap:0 10px; align-items:baseline;
    padding:9px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink); max-width:60ch;
  }
  .pv-kit-list li::before{content:counter(kit); font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--brand-700);}
  /* справжні значення в таблиці характеристик — основним кольором (тире-заготовки лишаються блідими) */
  .spec-table td[data-i18n]{color:var(--ink);}
  .pv-sub-head{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-bottom:8px;}
  .pv-sub-head h4{margin:0; font-size:.98rem; font-weight:700;}
  .pv-mod-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
  .pv-mod-list li{
    display:grid; grid-template-columns:12px minmax(0,1fr); column-gap:10px; row-gap:2px;
    padding:10px 0; border-bottom:1px solid var(--line);
  }
  .pv-mod-list li::before{content:""; grid-row:1 / span 2; width:8px; height:8px; margin-top:6px; background:var(--brand-600); transform:rotate(45deg);}
  .pv-mod-name{grid-column:2; font-size:.92rem; font-weight:600; color:var(--ink);}
  .pv-mod-note{grid-column:2; font-size:.86rem; color:var(--ink-soft);}
  .pv-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .pv-specs .spec-wrap{margin-top:0;}
  .pv-specs .spec-table th{width:auto;}
  @media (max-width:860px){ .pv-body{grid-template-columns:1fr;} }

  /* поля збоку замало (вужче за ~1260px): вкладки — горизонтальним рядком над позицією */
  @media (max-width:1259px){
    .pv-rail{position:static; width:auto; container-type:normal; margin-bottom:12px;}
    .pv-tabs{position:static; flex-direction:row; max-height:none; overflow-x:auto; overflow-y:visible; padding:0 0 4px; scrollbar-width:thin;}
    .pv-group{display:none !important;}
    .pv-tab{width:auto; padding:5px 12px 5px 6px; border:1px solid var(--line); border-radius:12px; box-shadow:none;}
    .pv-tab:hover{transform:none;}
    .pv-tab-label{display:block; white-space:nowrap;}
  }
  @media (max-width:560px){
    .pv-top{padding:12px 14px; justify-content:flex-end;}
    .pv-section{display:none;}
    .pv-photo.no-img .ph-note{right:auto; bottom:auto; left:16px; top:24px;}
    /* вписане (вузьке) фото на телефоні займає рамку за власними пропорціями — без бічних полів, удвічі більше */
    .pv-photo.is-contain > img{aspect-ratio:var(--ar-own, var(--ar));}
    .pv-caption{padding:14px 16px 16px;}
    .pv-code{font-size:1.9rem;}
    .pv-name{font-size:.92rem;}
    .pv-gallery{padding:10px 16px 0; gap:6px;}
    .pv-body{padding:20px 16px 22px;}
  }

  /* анімація переходу: групи плавно змінюють місце й розмір, знімки заповнюють групу без спотворень */
  ::view-transition-group(*){animation-duration:.5s; animation-timing-function:cubic-bezier(.22,.8,.24,1);}
  ::view-transition-old(*), ::view-transition-new(*){height:100%; object-fit:cover; overflow:clip;}
  ::view-transition-group(pv-detail){border-radius:var(--radius-l); overflow:clip;}
  @media (prefers-reduced-motion:reduce){
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important;}
  }

  /* ================= вікно «Записатись на візит» ================= */
  .visit-dialog{
    width:min(720px, calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto;
    overscroll-behavior:contain;
    padding:0; border:0; border-radius:var(--radius-l);
    background:var(--paper); color:var(--ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
  }
  /* поки вікно відкрите, сторінка під ним не гортається */
  html:has(.visit-dialog[open]){overflow:hidden;}
  .visit-dialog::backdrop{background:rgba(12,18,13,.55); backdrop-filter:blur(3px);}
  .vd-inner{display:flex; flex-direction:column; gap:20px; padding:28px 30px 24px;}
  .vd-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}
  .vd-titles{display:flex; flex-direction:column; gap:8px; min-width:0;}
  .vd-titles h2{font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.15;}
  .vd-lead{max-width:52ch;}
  .vd-close{
    all:unset; box-sizing:border-box; cursor:pointer; flex:none;
    display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
    border:1px solid var(--line); border-radius:999px; color:var(--ink-soft);
  }
  .vd-close:hover{color:var(--ink); border-color:var(--brand-500);}
  .vd-close:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
  .vd-options{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
  .vd-card{
    display:flex; flex-direction:column; gap:8px; min-width:0; padding:20px;
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m);
  }
  .vd-card.is-placeholder{background:var(--paper); border-style:dashed;}
  .vd-icon{
    display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:4px;
    border-radius:12px; background:var(--chip-bg); color:var(--chip-fg);
  }
  .vd-card h3{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:1rem; font-weight:700;}
  .vd-value{margin:0; font-size:1.3rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; user-select:all;}
  .vd-value.is-email{font-size:clamp(.8rem, 4.2vw, 1.06rem); line-height:1.6;}
  .vd-value.is-soon{font-size:1.05rem; font-weight:500; color:var(--ink-faint); user-select:auto;}
  .vd-note{font-size:.86rem;}
  .vd-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px;}
  .vd-actions .btn{padding:10px 16px; font-size:.86rem;}
  .btn.is-disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}
  .vd-status{min-height:1.2em; margin:0; font-size:.84rem; color:var(--brand-700); scroll-margin-bottom:20px;}
  @media (max-width:640px){
    .vd-options{grid-template-columns:1fr;}
    .vd-inner{padding:20px 18px;}
  }

  /* ---------- доставка: самовивіз ---------- */
  .pickup-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:start;}
  .pickup-copy h2{margin:10px 0 6px;}
  .pickup-copy .lead{font-weight:600; color:var(--brand-700); margin:0 0 22px;}
  .pickup-steps{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
  .pickup-steps li{display:grid; grid-template-columns:44px 1fr; gap:12px; padding:16px 0; border-bottom:1px solid var(--line);}
  .pickup-steps .num{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--brand-700); padding-top:3px;}
  .pickup-steps p{margin:0; color:var(--ink);}
  .pickup-phone{display:inline-flex; align-items:center; min-height:40px; margin-top:4px; font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums;}
  .pickup-phone:hover{color:var(--brand-700);}
  .pickup-addr{margin-top:6px !important; font-weight:600;}
  .pickup-map{margin:0; display:flex; flex-direction:column; gap:10px;}
  .pickup-map iframe{display:block; width:100%; aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--paper-sunken);}
  .pickup-maplink{align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-700); text-decoration:none; padding:8px 0;}
  .pickup-maplink:hover{text-decoration:underline;}
  @media (max-width:860px){ .pickup-grid{grid-template-columns:1fr; gap:32px;} }
  .pickup-mapimg{display:block; border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden;}
  .pickup-mapimg img{display:block; width:100%; height:auto;}
  .pickup-mapimg:hover{border-color:var(--brand-500);}

  /* ---------- головна: «Гортайте, щоб дізнатись більше» ---------- */
  .scroll-hint-box{position:relative; height:0;}
  .scroll-hint{
    position:absolute; left:0; right:0; top:clamp(28px, 6vh, 64px); margin:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
    opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s; pointer-events:none;
  }
  .scroll-hint svg{color:var(--brand-600); animation:hint-bob 1.6s ease-in-out infinite;}
  @keyframes hint-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);}}
  html.intro-lock .scroll-hint{opacity:1; visibility:visible; transition:none;}
  /* решта сторінки: до першого прогортання прихована, потім виїжджає вгору на своє місце */
  /* site.js дає кожному елементу клас intro-item і затримку --d: вони з'являються почергово */
  .intro-item{transition:opacity 1s ease var(--d, 0s), transform 1.4s cubic-bezier(.16,1.12,.3,1) var(--d, 0s);}
  html.intro-lock .scroll-hint-box ~ *, html.intro-lock main ~ footer, html.intro-lock .intro-item{opacity:0; transform:translateY(120px) scale(.96); pointer-events:none;}
  @media (prefers-reduced-motion:reduce){
    .scroll-hint svg{animation:none;}
    html.intro-lock .scroll-hint-box ~ *, html.intro-lock main ~ footer, html.intro-lock .intro-item{transform:none;}
  }

  /* ---------- «Про компанію»: панель «Наше обладнання в дії» ---------- */
  .action-full{margin-top:44px; border-block:1px solid var(--line); background:var(--paper-raised);}
  .action-panel{padding-block:24px;}
  .action-grid{padding-inline:0;}
  .action-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:18px;}
  .action-head h3{margin:0; font-size:clamp(1.35rem, 2.4vw, 1.75rem); font-weight:700;}
  .action-links{display:flex; flex-wrap:wrap; gap:8px;}
  .action-link{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--line); border-radius:999px; font-size:.88rem; font-weight:600; color:var(--ink); text-decoration:none;}
  a.action-link:hover{border-color:var(--brand-500); color:var(--brand-700);}
  .action-link.is-soon{opacity:.55; cursor:default;}
  .action-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;}
  .action-item{position:relative; margin:0; border-radius:0; overflow:hidden; aspect-ratio:16/9; background:var(--paper-sunken);}
  .action-item.is-video{display:block; color:#fff; text-decoration:none;}
  .action-item img{display:block; width:100%; height:100%; object-fit:cover;}
  .action-play{position:absolute; left:50%; top:50%; width:80px; height:80px; margin:-40px 0 0 -40px; border-radius:999px; background:rgba(200,20,20,.9); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.35); transition:transform .15s;}
  .action-item.is-video:hover .action-play{transform:scale(1.08);}
  .action-cap{position:absolute; left:0; right:0; bottom:0; padding:32px 18px 14px; font-size:1rem; font-weight:600; background:linear-gradient(transparent, rgba(0,0,0,.7));}

  /* верхній ряд — відео, нижній — менші фото */
  .action-grid{display:flex; flex-direction:column; gap:4px;}
  .action-videos{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4px) / 2); gap:4px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
  .action-videos::-webkit-scrollbar{display:none;}
  .action-videos .action-item{scroll-snap-align:start;}
  /* фото — один ряд, гортається вбік (колесо/свайп/смуга прокрутки); видно чотири, решта — далі */
  .action-photos{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 12px) / 4); gap:4px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;}
  .action-photos::-webkit-scrollbar{display:none;}
  /* обмеження висоти на широких екранах: відео не вище 380 px, фото — 210 px (кадр обрізається по центру) */
  .action-videos .action-item{aspect-ratio:auto; height:min(calc((100vw - 4px) / 2 * 9 / 16), 380px);}
  .action-photos .action-item{aspect-ratio:auto; height:min(calc((100vw - 12px) / 4 * 9 / 16), 210px);}
  @media (max-width:860px){
    .action-videos{grid-auto-columns:100%;}
    .action-videos .action-item{height:min(calc(100vw * 9 / 16), 380px);}
    .action-photos .action-item{height:min(calc((100vw - 4px) / 2.3 * 9 / 16), 210px);}
  }

  /* затемнення панелі: заголовок і соцмережі стоять посередині над затемненими відео й фото; наведення
     курсора розсіює затемнення, а заголовок від'їжджає вгору на своє місце. --head-shift рахує site.js */
  @media (hover:hover){
    .action-full{position:relative;}
    .action-grid{position:relative;}
    .action-grid::after{
      content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
      background:radial-gradient(ellipse at center, rgba(8,14,9,.78) 0%, rgba(8,14,9,.6) 70%, rgba(8,14,9,.5) 100%);
      transition:opacity .7s cubic-bezier(.4,0,.2,1) .05s;
    }
    .action-full .action-head{position:relative; z-index:4;}
    .action-full .action-head h3, .action-full .action-links{
      transform:translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1));
      transition:transform .8s cubic-bezier(.65,0,.25,1);
    }
    .action-full .action-head h3{--sc:1.3;}
    .action-full .action-links{transition-delay:.06s;}
    /* напис у затемненні: по білих літерах безперервно пробігає світло-зелений відблиск */
    .action-full .action-head h3{
      color:transparent; background:linear-gradient(105deg, #fff 0%, #fff 38%, #B9E7C0 48%, #7BE08A 50%, #B9E7C0 52%, #fff 62%, #fff 100%) 0 0 / 260% 100%;
      -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
      animation:act-shine 3.2s cubic-bezier(.45,0,.25,1) infinite;
    }
    @keyframes act-shine{0%{background-position:100% 0;} 70%,100%{background-position:0% 0;}}
    .action-full .action-link{color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.08); transition:color .5s, border-color .5s, background .5s;}
    .action-full:hover .action-grid::after, .action-full:has(:focus-visible) .action-grid::after{opacity:0;}
    .action-full:hover .action-head h3, .action-full:hover .action-links, .action-full:has(:focus-visible) .action-head h3, .action-full:has(:focus-visible) .action-links{transform:none;}
    .action-full:hover .action-links{transition-delay:0s;}
    .action-full:hover .action-head h3, .action-full:has(:focus-visible) .action-head h3{color:var(--ink); background:none; filter:none; animation:none;}
    .action-full:hover .action-link, .action-full:has(:focus-visible) .action-link{color:var(--ink); border-color:var(--line); background:transparent;}
  }
  @media (hover:hover) and (prefers-reduced-motion:reduce){
    .action-full .action-head h3, .action-full .action-links, .action-grid::after{transition-duration:.01s;}
    .action-full .action-head h3{animation:none;}
  }
  .action-row-wrap{position:relative;}
  /* відкрите фото займає всю панель (обидва ряди); ряд фото стає зменшеною стрічкою знизу, що виїжджає
     лише коли курсор над панеллю */
  .action-grid{position:relative;}
  .action-grid.is-viewing .action-row-wrap.is-photos{
    position:absolute; left:0; right:0; bottom:0; z-index:7; padding:10px 0 12px;
    background:linear-gradient(transparent, rgba(0,0,0,.75) 45%);
    transform:translateY(102%); opacity:0; transition:transform .45s cubic-bezier(.22,.8,.24,1), opacity .35s;
  }
  /* схована стрічка не ловить курсор (інакше на нижній межі вона то з'являлась, то зникала) */
  .action-grid.is-viewing{overflow:hidden;}
  .action-grid.is-viewing .action-row-wrap.is-photos{pointer-events:none;}
  .action-grid.is-viewing:hover .action-row-wrap.is-photos, .action-grid.is-viewing .action-row-wrap.is-photos:has(:focus-visible){transform:none; opacity:1; pointer-events:auto;}
  .action-grid.is-viewing .is-videos > .action-arrow{display:none;}
  .action-grid.is-viewing .action-photos{grid-auto-columns:clamp(110px, 12vw, 170px); padding-inline:12px;}
  .action-grid.is-viewing .action-photos .action-item{height:auto; aspect-ratio:16/9;}
  .action-grid.is-viewing .action-row-wrap.is-photos .action-arrow{width:36px; height:36px; margin-top:-18px;}
  .action-grid.is-viewing .av-cap{transition:transform .45s cubic-bezier(.22,.8,.24,1);}
  .action-grid.is-viewing:hover .av-cap{transform:translateY(-120px);}
  /* плитки TikTok (обкладинок TikTok не віддає): фірмові кольори, значок, кнопка «▶» */
  .action-item.is-tiktok{background:radial-gradient(circle at 30% 25%, rgba(37,244,238,.28), transparent 55%), radial-gradient(circle at 75% 80%, rgba(254,44,85,.3), transparent 55%), #0d0f10;}
  .action-tt-logo{position:absolute; left:50%; top:50%; margin:-27px 0 0 -27px; color:#fff; opacity:.16; transform:scale(2.6);}
  .action-item.is-tiktok .action-play{background:rgba(254,44,85,.92);}
  .action-item.is-photo{cursor:zoom-in;}
  .action-item.is-photo.is-open{outline:3px solid var(--brand-500); outline-offset:-3px;}
  /* відкрите фото: займає ряд відео, поверх нього; по боках — розмита копія, стрілки й «закрити» */
  .action-viewer{position:absolute; inset:0; z-index:6; overflow:hidden; background:#0b0f0c; animation:av-in .45s cubic-bezier(.22,.8,.24,1);}
  .action-viewer[hidden]{display:none;}
  @keyframes av-in{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;}}
  .av-bg{position:absolute; inset:-30px; width:calc(100% + 60px); height:calc(100% + 60px); object-fit:cover; filter:blur(24px) brightness(.55);}
  .av-img{position:relative; display:block; width:100%; height:100%; object-fit:contain; transition:opacity .25s;}
  .av-img.is-swap{opacity:0;}
  .av-nav, .av-close{position:absolute; z-index:2; border:0; border-radius:999px; background:rgba(8,14,9,.62); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .av-nav:hover, .av-close:hover{background:rgba(8,14,9,.85);}
  .av-nav{top:50%; width:48px; height:48px; margin-top:-24px;} .av-nav.prev{left:12px;} .av-nav.next{right:12px;}
  .av-close{top:12px; right:12px; width:42px; height:42px;}
  .av-cap{position:absolute; z-index:2; left:0; right:0; bottom:0; margin:0; padding:28px 18px 12px; color:#fff; font-size:.95rem; background:linear-gradient(transparent, rgba(0,0,0,.7));}
  .action-arrow{position:absolute; top:50%; z-index:2; width:44px; height:44px; margin-top:-22px; border:0; border-radius:999px; background:rgba(8,14,9,.62); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .2s, background .2s;}
  .action-arrow:hover{background:rgba(8,14,9,.85);}
  .action-arrow.prev{left:10px;} .action-arrow.next{right:10px;}
  .action-arrow[hidden]{display:none;}
  .action-photos .action-item{scroll-snap-align:start;}

  @media (max-width:860px){ .action-photos{grid-auto-columns:calc((100% - 4px) / 2.3);} }