/* === Deferred CSS: put this into /assets/css/style.css === */

/* Ссылки — эффекты (тело ссылок и базовая типографика уже в inline) */
a, a:hover, a:visited { text-decoration: none; }
a { -webkit-transition: all .2s ease-in; transition: all .2s ease-in; }
p > a { display: inline-block; }

/* Контентные отступы, не влияющие на моментальный рендер */
article { margin-bottom: 50px; margin-top: 30px; }
article .ttl { margin-bottom: 25px; }

/* Форма: доп. стили для иконки кнопки */
form button svg {
    fill: #bdbdbd; width: 38px; height: 38px;
    -webkit-transition: all .3s ease-in; transition: all .3s ease-in;
}

/* Хлебные крошки — уже отрисованы inline. Ниже только подтверждение отступов (можно убрать, если дублируется). */
.breadcrumbs { margin: 15px 0; }

/* Списки каталога */
.listing {
    overflow: hidden; background-color: #fff;
    border: 1px solid #bdbdbd; border-radius: 6px;
    width: 100%; height: max-content;
}
.listing p {
    font-size: 12px; color: #676767; text-align: center; padding: 7px;
}
.listing .ttl {
    text-align: center; padding: 16px 10px 10px;
    background-color: #d9d9d9; border-radius: 6px 6px 0 0;
}
.listing.listing_stand ol { height: 340px; }
.listing.listing_tall ol { height: 690px; }
.listing ol {
    counter-reset: item; margin: 10px 3px 25px 10px; overflow-y: scroll;
}
.listing ol li {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 100%; line-height: 1.9; gap: 6px; position: relative; padding: 0 0 0 25px;
}
.listing ol li::before {
    counter-increment: item; content: counter(item, decimal-leading-zero) ".";
    position: absolute; left: 0; top: 0; font-size: 13px;
}
.listing ol li svg { width: 17px; height: 17px; -webkit-box-flex: 0; -ms-flex: 0 0 17px; flex: 0 0 17px; }
.listing ol li a { color: #00a3ff; font-weight: 700; width: auto; white-space: nowrap; }
.listing ol li span {
    color: #676767; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.listing button,
.listing ol li,
.listing ol li a,
.listing ol li span { -webkit-transition: .2s all ease-in; transition: .2s all ease-in; }
.listing button {
    background-color: #00a3ff; border-radius: 11px; width: calc(100% - 14px);
    display: block; font-weight: 700; font-size: 15px; line-height: 33px; margin: 0 auto 7px; color: #fff;
}

/* Кастомные скроллбары */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #757474; }

/* Рейтинг и звёзды */
.rating-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2px; }
.rating-list__item {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-image: none;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}

/* Включённая звезда */
.rating-list__item.rateon,
.rating-list__item.rateon-forced {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16.899 0.623378L20.2402 8.24415C20.3659 8.53096 20.5662 8.77877 20.8204 8.96172C21.0745 9.14467 21.3731 9.25606 21.6849 9.28425L29.8245 10.0141C30.7455 10.1481 31.1128 11.2776 30.4451 11.9279L24.3137 17.0788C23.8172 17.4958 23.5914 18.1512 23.7279 18.7842L25.5102 27.1273C25.6666 28.0433 24.7059 28.7433 23.8818 28.3089L16.7773 24.1485C16.5094 23.9912 16.2043 23.9083 15.8936 23.9083C15.5829 23.9083 15.2779 23.9912 15.0099 24.1485L7.90546 28.3064C7.08381 28.7383 6.12066 28.0408 6.27705 27.1248L8.05937 18.7817C8.19341 18.1487 7.97 17.4933 7.47354 17.0763L1.33968 11.9304C0.674413 11.2825 1.0418 10.1506 1.96026 10.0165L10.0999 9.28674C10.4117 9.25854 10.7103 9.14716 10.9644 8.9642C11.2185 8.78125 11.4189 8.53344 11.5446 8.24664L14.8858 0.62586C15.3003 -0.208206 16.4869 -0.208206 16.899 0.623378Z' fill='%23FDD835'/%3e%3c/svg%3e");
}
/* Выключенная звезда (и форс-офф) */
.rating-list__item,
.rating-list__item.rateoff,
.rating-list__item.rateon-forced_off {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9287 4.02784C15.5238 2.82308 17.2422 2.82308 17.8373 4.02784L21.0492 10.5362L28.2314 11.5801C29.5619 11.7734 30.0935 13.4084 29.1303 14.3464L23.934 19.4124L25.1606 26.5661C25.3876 27.8901 23.9969 28.9009 22.8073 28.2753L16.383 24.898L9.95873 28.2753C8.7692 28.9009 7.37843 27.8907 7.60548 26.5655L8.83275 19.4124L3.63572 14.3464C2.67258 13.4084 3.20413 11.7734 4.534 11.5801L11.7162 10.5362L14.9287 4.02784ZM16.383 4.82086L13.1924 11.2842C13.076 11.5199 12.9042 11.7238 12.6915 11.8783C12.4789 12.0328 12.2319 12.1334 11.9717 12.1712L4.8385 13.2085L10.0004 18.2401C10.1887 18.4237 10.3295 18.6503 10.4107 18.9004C10.4919 19.1505 10.511 19.4167 10.4665 19.6758L9.24845 26.78L15.6284 23.4258C15.8611 23.3035 16.1201 23.2396 16.383 23.2396C16.6459 23.2396 16.9049 23.3035 17.1377 23.4258L23.5176 26.78L22.2996 19.6758C22.255 19.4167 22.2742 19.1505 22.3554 18.9004C22.4366 18.6503 22.5773 18.4237 22.7656 18.2401L27.9275 13.2092L20.7943 12.1726C20.5341 12.1348 20.2869 12.0343 20.0742 11.8798C19.8614 11.7253 19.6894 11.5213 19.573 11.2855L16.383 4.82086Z' fill='%23AAAAAA'/%3e%3c/svg%3e");
}
.rating-list__item.rateoff { background: no-repeat 0 0; }

.rate {
    font-size: 19px; font-weight: 700;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    gap: 10px; margin-bottom: 40px; margin-top: 30px;
}
.rate svg { width: 21px; height: 21px; }
.rate svg:first-child { fill: #00a3ff; }
.rate svg:last-child  { fill: #ff4747; }

/* Прочие элементы интерфейса */
.link { color: #00a3ff; font-size: 21px; font-weight: 700; }

.wrap {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    gap: 15px; margin-bottom: 40px;
}

.slider { max-width: 455px; margin: 0 auto; }
.slider .slide { margin-bottom: 16px; }
.slider .slide img { aspect-ratio: 455/313; -o-object-fit: cover; object-fit: cover; }
.slider .btns {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    gap: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.slider .btns a { width: 133px; }

.holder, .row, .thumbs, footer nav { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.holder, .row, .thumbs, footer nav { display: -webkit-box; display: -ms-flexbox; display: flex; }
.holder { gap: 10px; margin: 30px 0; }
.holder .recl { width: 100%; }

.holder .recl img,
.slider .btns a img,
.thumb-img img { aspect-ratio: 133/91; -o-object-fit: cover; object-fit: cover; }

.content .ttl-1, .row {
    -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px;
}
.content .ttl-1 svg { width: 32px; height: 32px; }
.content p { color: #555; }

.row {
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    margin-bottom: 20px; gap: 10px;
}

.thumb { padding: 10px; margin-bottom: 10px; width: 100%; }
.thumbs, footer nav { margin: 10px 0; }
.thumb p, footer { text-align: center; }
.thumb p { font-size: 15px; color: #00a3ff; padding: 9px; font-weight: 700; }

.thumb-img { margin: 0 auto; }
.holder .recl img, .thumb-img img { aspect-ratio: 300/250; width: 100%; }
.thumb-img img { border: 1px solid #000; border-radius: 3px; aspect-ratio: 279/193; }

/* Подвал */
footer { background-color: #343434; color: #bdbdbd; padding: 35px 0; }
footer nav { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 1em 0; }
footer nav a { color: #00a3ff; padding: 5px 8px; position: relative; }
footer nav a:not(:last-child)::after {
    content: "|"; color: #bdbdbd; right: -3px; position: absolute;
}

/* Hover-состояния (не критичны для первичного рендера) */
@media (any-hover:hover) {
    .breadcrumbs li a:hover,
    .link:hover,
    .listing ol li:hover a,
    .thumb:hover p,
    a:hover:hover { color: #0075b7; }
    form button:hover svg { fill: #00a3ff; }
    .listing button:hover { background-color: #0075b7; }
}

/* Адаптивность */
@media only screen and (min-width: 479.98px) {
    .holder .recl, .listing { width: calc(50% - 5px); }
    .thumb { width: 50%; }
}
@media only screen and (min-width: 767.98px) {
    article { padding: 16px 14px; }
    header { margin-top: 30px; margin-bottom: 30px; }
    .logo { font-size: 34px; }
    form input { padding: 11px 30px; font-size: 21px; }
    form input::-webkit-input-placeholder,
    form input::-moz-placeholder,
    form input:-ms-input-placeholder,
    form input::-ms-input-placeholder,
    form input::placeholder { font-size: 21px; }
    form button { margin-right: 18px; }
    .breadcrumbs { margin: 27px 0; }
    .holder .recl, .listing { width: calc(33.333% - 6.6666666667px); }
    .rating-list__item { height: 30px; width: 30px; }
    .wrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
    .slider { margin: 0; }
    .content, .slider { width: calc(50% - 15px); }
    .thumb { width: 33.333%; }
}
@media only screen and (min-width: 991.98px) {
    .holder .recl, .listing { width: calc(25% - 7.5px); }
    .wrap { gap: 30px; margin-bottom: 100px; }
    .slider { width: calc(40% - 15px); }
    .content { width: calc(60% - 15px); }
    .thumb { width: 25%; }
}
@media all and (min-width: 1250px) {
    .container { padding-inline: 0; }
}

/* Toast, поиск, спиннер, карточки в поиске */
.rating-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background-color: rgba(0,0,0,0.8); color: #fff; padding: 12px 20px; border-radius: 8px;
    font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out; z-index: 9999;
}
.rating-toast.show { opacity: 1; }

.search-layer {
    position: absolute; left: 50%; transform: translateX(-50%); top: 146px;
    width: 90vw; max-width: 900px; min-width: 320px; background: #fff; border-radius: 10px;
    border: 1px solid #e3e3e3; box-shadow: 0 8px 32px rgba(0,0,0,.08); z-index: 80;
    padding: 22px 18px 18px 18px; max-height: 60vh; overflow-y: auto; opacity: 0; transition: opacity .18s; display: none;
}
.search-layer.active { opacity: 1; }
@media (max-width: 600px) {
    .search-layer { left: 0; right: 0; transform: none; width: 100vw; top: 136px; border-radius: 0; max-height: none; }
}
.search-spinner-centered {
    position: fixed; z-index: 1200; left: 50%; top: 50%; width: 70px; height: 70px;
    transform: translate(-50%,-50%); background: rgba(255,255,255,0.85); border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08); display: none; align-items: center; justify-content: center;
    pointer-events: none; transition: opacity .18s;
}
.search-spinner-centered svg { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.search-card {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #eee;
}
.search-card > img { width: 128px; height: 96px; object-fit: contain; border-radius: 4px; }
.search-card > div { flex: 1; min-width: 0; }
.search-card > div > a {
    color: #00a3ff; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.search-card > span { margin-left: 10px; color: #ffb300; font-size: 15px; }
.search-card .search-card-domain { color: #999; font-size: 13px; }
.search-card .search-card-category {
    color: #444; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Базовые классы favicon без картинок — сами картинки подключай в /assets/css/favicons-sprite.css */
.favicon, .favicon- {
    position: relative; display: inline-block; padding-left: 24px; vertical-align: middle;
}
.favicon::before, .favicon-::before {
    content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-color: transparent;
}