/* ===== style.css — стили витрины ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.55; color: #222; background: #f7f7f8; }
a { color: #1a5fb4; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; height: auto; }

.site-header { background: #fff; border-bottom: 1px solid #e3e3e6; padding: 12px 0; }
.header-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo { font-size: 22px; font-weight: 700; color: #222; }
.search-form { display: flex; flex: 1; min-width: 220px; }
.search-form input[type=text] { flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px 0 0 6px; font-size: 15px; }
.search-form button { padding: 8px 18px; border: 1px solid #1a5fb4; background: #1a5fb4; color: #fff; border-radius: 0 6px 6px 0; cursor: pointer; }
.top-nav a { margin-left: 16px; }
/* кнопка-гамбургер: на десктопе скрыта (сборка 2026-10-25.8) */
.nav-toggle { display: none; padding: 6px 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; font-size: 20px; line-height: 1.2; cursor: pointer; color: #1a5fb4; }
.nav-toggle:hover { border-color: #1a5fb4; }

.breadcrumbs { margin: 14px 0 4px; font-size: 13px; color: #777; }
.crumb-sep { margin: 0 6px; color: #aaa; }
.page-h1 { margin: 10px 0 14px; font-size: 26px; }
.lead { color: #444; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 16px 0; }
.card { background: #fff; border: 1px solid #e3e3e6; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; }
.card-img { display: block; height: 160px; margin-bottom: 10px; text-align: center; overflow: hidden; }
.card-img img { max-height: 160px; object-fit: contain; }
.card-name { font-size: 14px; line-height: 1.35; min-height: 38px; }
.card-price { font-size: 18px; font-weight: 700; margin: 8px 0; }
.btn-buy { display: block; text-align: center; padding: 8px 10px; background: #ff7d1f; color: #fff; border-radius: 6px; font-size: 14px; margin-top: auto; }
.btn-buy:hover { background: #ea6d0f; text-decoration: none; }
.btn-big { font-size: 17px; padding: 12px; }

/* сетка категорий */
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 16px 0; align-items: stretch; }
.cat-card { background: #fff; border: 1px solid #e3e3e6; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; }
.cat-card-img { display: block; height: 90px; margin-bottom: 8px; text-align: center; overflow: hidden; }
.cat-card-img img { max-height: 90px; max-width: 110px; object-fit: contain; }
.cat-card-name { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.cat-card-cnt { font-size: 12px; color: #888; margin-bottom: 8px; }
.cat-card-kids { display: flex; flex-direction: column; margin-top: auto; }
.cat-card-kid, .cat-card-more, .cat-card-kid-empty {
    display: block; height: 18px; line-height: 18px;
    font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-card-kid { color: #1a5fb4; }
.cat-card-more { color: #888; }
.cat-card-more a { color: #1a5fb4; }
.cat-card-kid-empty { visibility: hidden; }

/* единый компактный блок подборок (главная, категория, товар, /selections/) */
.sel-block { margin: 18px 0; padding: 10px 14px; background: #fff; border: 1px solid #e3e3e6; border-radius: 8px; }
.sel-block-title { margin: 0 0 2px; font-size: 15px; }
.sel-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 30px; }
.sel-row { padding: 5px 0; border-bottom: 1px solid #f0f0f2; overflow: hidden; }
.sel-row-name { font-size: 13px; font-weight: 600; display: inline-block; line-height: 1.35; }
.sel-row-intro, .sel-row-meta {
    font-size: 12px; color: #888; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.chip { display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid #ddd; border-radius: 16px; font-size: 14px; }
.chip .cnt { color: #999; font-size: 12px; }
.cat-block { margin-bottom: 20px; }

.pagination { margin: 20px 0; }
.pagination a, .pagination .pag-cur { display: inline-block; padding: 6px 11px; margin-right: 4px; border: 1px solid #ddd; border-radius: 6px; background: #fff; }
.pagination .pag-cur { background: #1a5fb4; color: #fff; border-color: #1a5fb4; }
.pag-dots { margin-right: 4px; color: #999; }

.product { display: flex; gap: 24px; flex-wrap: wrap; margin: 16px 0; }
.product-left { flex: 0 0 320px; max-width: 100%; background: #fff; border: 1px solid #e3e3e6; border-radius: 8px; padding: 16px; text-align: center; }
.product-right { flex: 1; min-width: 260px; }
.product-price { font-size: 26px; font-weight: 700; margin: 8px 0; }
.product-desc { margin-top: 16px; }
.params { border-collapse: collapse; width: 100%; background: #fff; }
.params th, .params td { border: 1px solid #e3e3e6; padding: 7px 10px; text-align: left; font-size: 14px; }
.params th { background: #f0f0f2; }
.params-block { margin: 20px 0; }

/* вводный блок под контентом */
.cat-intro { margin: 26px 0 10px; padding: 18px 20px; background: #fff; border: 1px solid #e3e3e6; border-radius: 8px; font-size: 17px; line-height: 1.65; color: #333; }
.cat-intro p { margin: 8px 0; }
.cat-intro a { font-weight: 600; }

.site-footer { background: #fff; border-top: 1px solid #e3e3e6; margin-top: 30px; padding: 20px 0; font-size: 14px; color: #666; }
.footer-note { margin: 8px 0 0; font-size: 12px; color: #999; }

@media (max-width: 640px) {
    .header-in { gap: 10px; }
    .top-nav a { margin-left: 10px; }
    .page-h1 { font-size: 21px; }
    .cat-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .cat-intro { font-size: 15px; padding: 14px 16px; }
    .sel-rows { grid-template-columns: 1fr; }
}

/* ===== главная (hero) — средний вариант, 2026-10-17 ===== */
.home-hero {
    background: linear-gradient(135deg, #123c73 0%, #1a5fb4 100%);
    border-radius: 10px;
    padding: 32px 30px 28px;
    margin: 22px 0 30px;
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: stretch;
}
.hero-main { min-width: 0; }
.home-right { min-width: 0; }
.home-hero-title { margin: 0 0 10px; font-size: 32px; line-height: 1.15; color: #fff; }
.home-hero-lead { margin: 0 0 22px; max-width: 640px; font-size: 17px; line-height: 1.5; color: #dbe7f7; }
.home-hero-search { display: flex; gap: 10px; max-width: 540px; margin: 0 0 24px; }
.home-hero-search input {
    flex: 1; border: 0; border-radius: 8px; padding: 12px 16px;
    font-size: 16px; background: #fff; color: #222;
}
.home-hero-search input:focus { outline: 3px solid rgba(255,125,31,.55); }
.home-hero-search button {
    border: 0; border-radius: 8px; padding: 12px 24px;
    font-size: 16px; font-weight: 600;
    background: #ff7d1f; color: #fff; cursor: pointer;
}
.home-hero-search button:hover { background: #ea6d0f; }
.home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    max-width: 560px;
}
.home-stat {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px; padding: 10px 12px; min-width: 0; text-align: center;
}
.home-stat b {
    display: block; font-size: 24px; line-height: 1.2; color: #fff;
    overflow-wrap: anywhere;
}
.home-stat span {
    display: block; font-size: 13px; color: #dbe7f7; margin-top: 2px;
    overflow-wrap: anywhere;
}
/* --- карточка «Интересные факты» (десктоп) --- */
/* Текст фактов выровнен по правому краю карточки. */
.home-facts {
    height: 100%;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px; padding: 18px 20px 14px;
    text-align: left;
}
.home-facts-list {
    flex: 1; display: flex; flex-direction: column;
    justify-content: space-evenly; gap: 10px; min-height: 0;
}
.fact-row { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.18); }
.fact-row:first-child { border-top: 0; }
.fact-val {
    display: block; font-size: 22px; font-weight: 700; color: #fff;
    text-decoration: none; overflow-wrap: anywhere;
}
/* hover — как у всех ссылок сайта: подчёркивание без смены цвета (правит общий a:hover) */
.fact-cap {
    display: block; font-size: 13px; color: #dbe7f7; margin-top: 2px;
    overflow-wrap: anywhere;
}
/* мобильные плитки фактов — на десктопе скрыты */
.fact-tile { display: none; }

@media (max-width: 940px) {
    .home-hero { grid-template-columns: 1fr; gap: 0; }
    .home-right { display: none; }
}
@media (max-width: 640px) {
    .home-hero { padding: 22px 18px; margin-top: 14px; }
    .home-hero-title { font-size: 25px; }
    .home-stats { grid-template-columns: repeat(2, 1fr); max-width: none; gap: 8px; }
    .home-stat { padding: 8px 10px; }
    .home-stat b { font-size: 20px; }
    .fact-tile { display: block; }
    .fact-tile .fact-val { font-size: 18px; font-weight: 700; color: #fff; }
    /* чётная сетка: если последняя плитка стоит на непарном месте — растягиваем на всю строку */
    .home-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.search-intro { color: #666; font-size: 14px; margin: 0 0 16px; }

/* ===== мобильная шапка: гамбургер + поиск на всю строку (сборка 2026-10-25.8) ===== */
@media (max-width: 640px) {
    .nav-toggle { display: block; order: 1; margin-left: auto; }
    .search-form { order: 2; flex-basis: 100%; min-width: 0; }
    .search-form input[type=text] { min-width: 0; }
    .top-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; }
    .top-nav.nav-open { display: flex; }
    .top-nav a { margin: 0; padding: 11px 2px; border-top: 1px solid #f0f0f2; }
    /* страница товара: колонка с картинкой больше не жёсткие 320px — на телефоне на всю ширину */
    .product-left { flex: 1 1 100%; }
    /* широкая таблица характеристик прокручивается только внутри своего блока, страницу не расталкивает */
    .params-block { overflow-x: auto; }
    .params { min-width: 480px; }
}

/* ===== hover плашек и фактов (сборка 2026-10-25.11) ===== */
a.home-stat, a.fact-row, a.fact-tile { text-decoration: none; }
a.home-stat, a.fact-tile { transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.home-stat:hover, a.home-stat:focus-visible,
a.fact-tile:hover, a.fact-tile:focus-visible {
    text-decoration: none;
    transform: translateY(-4px);
    background: rgba(255,255,255,.24);
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
a.home-stat:active, a.fact-tile:active { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.2); }
a.fact-row { transition: transform .18s ease, background .18s ease, box-shadow .18s ease; border-radius: 8px; }
a.fact-row:hover, a.fact-row:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
    background: rgba(255,255,255,.15);
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    border-top-color: transparent;
}
a.fact-row:hover .fact-cap { color: #fff; }



/* ===== диагональный подъём + анимация карточек (сборка 2026-10-25.13) ===== */
/* hero-плашки и плитки фактов: вверх и чуть вправо — крупный текст, смаз незаметен */
a.home-stat:hover, a.home-stat:focus-visible,
a.fact-tile:hover, a.fact-tile:focus-visible {
    transform: translate(3px, -4px);
}

/* товарные карточки — крупные, движение безвредно */
.card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover {
    transform: translate(2px, -3px);
    border-color: #c9d4e2;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.card:active { transform: translate(0, 0); }

/* карточки категорий — то же */
.cat-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cat-card:hover {
    transform: translate(2px, -3px);
    border-color: #c9d4e2;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.cat-card:active { transform: translate(0, 0); }

/* строки подборок — БЕЗ движения: мгновенная подсветка + акцентная полоска слева.
   Цвет фона меняется скачком, а не анимацией: анимация цвета как раз и даёт
   эффект «мазка», потому что полупрозрачный фон ползёт под мелким текстом */
.sel-row {
    border-radius: 6px;
    padding-left: 10px;
    margin-left: -10px;
}
.sel-row:hover {
    background: #f0f5fb;
    box-shadow: inset 3px 0 0 #1a5fb4;
}


/* факты в hero — как в сборке 2026-10-25.12: с приподниманием */
a.fact-row {
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    border-radius: 8px;
}
a.fact-row:hover, a.fact-row:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
    background: rgba(255,255,255,.15);
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    border-top-color: transparent;
}
a.fact-row:hover .fact-cap { color: #fff; }


/* для тех, у кого в системе включено «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    .card, .cat-card, a.home-stat, a.fact-tile, a.fact-row {
        transition: none;
    }
    .card:hover, .cat-card:hover,
    a.home-stat:hover, a.fact-tile:hover {
        transform: none;
    }
}



/* ===== строки подборок: цельные ссылки без подчёркивания (сборка 2026-10-25.14) ===== */
a.sel-row, a.sel-row:hover, a.sel-row * { text-decoration: none; }
.sel-brand-plain { color: #1a5fb4; }