/* 10.11.2026 — путь из поиска к заявке (inc/ux-1110.php). Цвета и шрифт — переменные темы. */

/* 1. Строка списка — ссылка целиком: ссылка заголовка растянута на строку.
   Снимок с увеличением лежит выше неё и открывает лайтбокс. */
.fits-row{position:relative}
.fits-row h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.fits-row h3 a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fits-pic[data-zoom]{position:relative;z-index:2;cursor:zoom-in}
.fits-pic[data-zoom]:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.fits-pic[data-zoom]::after{content:"";position:absolute;left:50%;bottom:6px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233057a7' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:0 1px 4px rgba(3,18,48,.25)}
@media (min-width:769px){
  .fits-row{transition:background .2s}
  .fits-row:hover{background:hsla(220,55%,42%,.04)}
  .fits-row:hover h3 a{color:var(--brand)}
}

/* Снимок в слайдере серий — ссылка на серию. */
.series-pic-link{display:block}
@media (min-width:769px){
  .series-pic-link img{transition:opacity .2s}
  .series-pic-link:hover img{opacity:.85}
}

/* Снимки на карточке товара — увеличение по клику. */
.product-hero-pic img,.product-features-pic img,.product-set-pic img,.product-shots img{cursor:zoom-in}

/* Лайтбокс */
.ux-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:64px 16px 24px;background:rgba(3,18,48,.88)}
.ux-lightbox[hidden]{display:none}
.ux-lightbox-img{display:block;max-width:min(100%,960px);max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;cursor:zoom-out}
.ux-lightbox-close{position:absolute;top:12px;right:12px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--brand);font:700 28px/44px 'Nunito Sans',sans-serif;text-align:center;cursor:pointer}
.ux-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.ux-lightbox-on,html.ux-lightbox-on body{overflow:hidden}

/* 2. Ключевые цифры в строке списка */
.ux-specs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;list-style:none;margin:12px 0 0;padding:0}
.ux-specs li{display:inline-flex;align-items:baseline;gap:6px;margin:0;padding:4px 10px;border:1px solid var(--line);background:hsla(220,55%,42%,.05);font-size:14px;line-height:1.4;color:var(--title)}
.ux-specs-k{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brand)}
.ux-specs-v{font-weight:700;white-space:nowrap}
@media (min-width:768px){
  .ux-specs{justify-content:flex-start}
}

/* 3. Блок под статьёй */
.ux-cta{margin:40px 0 0;padding:28px 24px;border-left:10px solid var(--brand);background:hsla(220,55%,42%,.06)}
.ux-cta-label{margin:0 0 6px;font-size:14px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--brand)}
.ux-cta-title{margin:0 0 10px;font-size:24px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
.ux-cta-text{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--text)}
.ux-cta-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.ux-cta-actions .btn{text-align:center}
@media (max-width:479px){
  .ux-cta{padding:22px 16px;border-left-width:6px}
  .ux-cta-title{font-size:20px}
  .ux-cta-actions .btn{flex:1 1 100%}
}

/* Таблицы в статьях на телефоне шире экрана (было до 10.11, напр. статья 893:
   526 px при окне 390) — прокрутка внутри таблицы, а не всей страницы. */
@media (max-width:767px){
  .article-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* 4. Главная: выбор по газу на первом экране */
.ux-cover-pick{max-width:560px;margin:8px auto 0}
.ux-cover-pick-label{margin:0 0 10px;font-size:14px;line-height:1.4;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.ux-gas-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.ux-gas-pick li{margin:0}
.ux-gas-pick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;padding:10px 6px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.08);color:#fff;text-decoration:none;transition:background .2s,color .2s}
.ux-gas-f{font-size:22px;line-height:1.2;font-weight:900}
.ux-gas-n{font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.ux-gas-pick-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ux-cover-pick-cta{margin:14px 0 0}
.btn-white{background:#fff;color:var(--brand)}
@media (min-width:769px){
  .ux-gas-pick-btn:hover{background:#fff;color:var(--brand)}
  .btn-white:hover{background:#eef2f9}
}