/* ==========================================================================
   splitu-shop.css — компоненты магазина: карточка, раздел каталога, фильтр,
   пагинация, тост. Токены — в splitu.css.
   ========================================================================== */

/* ---------- сетка карточек ---------- */
.sp-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.sp-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1023px){ .sp-grid, .sp-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (max-width:767px){ .sp-grid, .sp-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }

/* ---------- карточка товара (C-Card) ---------- */
.sp-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:16px; background:#fff; border:1px solid var(--sp-line); border-radius:var(--sp-r16); transition:box-shadow .15s, border-color .15s; min-width:0; }
.sp-card:hover{ border-color:var(--sp-blue); box-shadow:var(--sp-sh-l); }
.sp-card__media{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#fff; }
.sp-card__media > a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
body.sp .sp-card__media img{ width:100%; height:100%; object-fit:contain; }
.sp-card.is-out .sp-card__media img{ opacity:.55; }
.sp-card__noimg{ width:100%; height:100%; border-radius:10px; background:var(--sp-bg-photo); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--sp-text-3); }
.sp-card__badge{ position:absolute; top:0; left:0; }
.sp-card__cmp{ position:absolute; top:-6px; right:-6px; width:44px; height:44px; border:0; border-radius:var(--sp-r12); background:var(--sp-bg-photo); color:var(--sp-text-3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sp-card__cmp:hover{ background:var(--sp-blue-bg); color:var(--sp-blue-d); }
.sp-card__cmp[aria-pressed="true"], .sp-card__cmp.is-active, .sp-card__cmp.active{ background:var(--sp-blue-d); color:#fff; }
.sp-card__brand{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--sp-text-3); }
body.sp .sp-card__name{ font-size:16px; font-weight:600; line-height:1.33; color:var(--sp-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.66em; }
body.sp .sp-card:hover .sp-card__name{ color:var(--sp-blue-d); }
body.sp .sp-card__rating{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sp-text-3); }
.sp-card__buy{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.sp-card__price{ display:flex; flex-direction:column; }
.sp-card__price s{ font-size:14px; color:var(--sp-gray); min-height:19px; }
.sp-card__price b{ font-size:24px; font-weight:800; line-height:1.1; white-space:nowrap; }
.sp-card__buy form{ margin:0; }
.sp-btn.sp-card__cta{ height:50px; padding:0 16px; font-size:18px; }
.sp-card.is-out .sp-card__buy{ flex-direction:column; align-items:stretch; }
.sp-card.is-out .sp-btn.sp-card__cta{ width:100%; font-size:16px; height:48px; }
.sp-card--compact, .sp-grid--compact .sp-card{ padding:10px; gap:8px; }
.sp-card--compact .sp-card__cmp{ background:transparent; top:-4px; right:-4px; }
body.sp .sp-card--compact .sp-card__name{ font-size:14px; -webkit-line-clamp:3; min-height:3.99em; }
.sp-card--compact .sp-card__buy{ flex-direction:column; align-items:stretch; }
.sp-card--compact .sp-card__price s{ font-size:13px; min-height:17px; }
.sp-card--compact .sp-card__price b{ font-size:20px; }
.sp-card--compact .sp-btn.sp-card__cta{ width:100%; height:44px; font-size:17px; }
@media (max-width:1279px){
    .sp-grid--3 .sp-card__buy{ flex-direction:column; align-items:stretch; }
    .sp-grid--3 .sp-btn.sp-card__cta{ width:100%; }
}
@media (max-width:767px){
    .sp-grid .sp-card{ padding:10px; gap:8px; }
    .sp-grid .sp-card__cmp{ background:transparent; top:-4px; right:-4px; }
    body.sp .sp-grid .sp-card__name{ font-size:14px; -webkit-line-clamp:3; min-height:3.99em; }
    .sp-grid .sp-card__buy{ flex-direction:column; align-items:stretch; }
    .sp-grid .sp-card__price b{ font-size:20px; }
    .sp-grid .sp-card__price s{ font-size:13px; min-height:17px; }
    .sp-grid .sp-btn.sp-card__cta{ width:100%; height:44px; font-size:16px; padding:0 8px; }
    .sp-grid .sp-card__rating{ font-size:12px; }
    .sp-grid .sp-stock{ font-size:13px; }
}

/* ---------- шапка раздела ---------- */
.sp-listhead{ display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.sp-listhead__title{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
body.sp .sp-listhead h1{ margin:0; font-size:40px; }
.sp-listhead__count{ font-size:18px; color:var(--sp-text-3); white-space:nowrap; }
@media (max-width:767px){
    body.sp .sp-listhead h1{ font-size:26px; }
    .sp-listhead__title{ flex-direction:column; gap:4px; }
    .sp-listhead__count{ font-size:14px; }
    .sp-chips--scroll{ flex-wrap:nowrap; overflow-x:auto; margin-right:calc(-1 * var(--sp-pad)); padding-right:var(--sp-pad); scrollbar-width:none; }
    .sp-chips--scroll::-webkit-scrollbar{ display:none; }
}

/* ---------- тулбар: сортировка ---------- */
.sp-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.sp-sort{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.sp-sort__label{ font-size:15px; color:var(--sp-text-3); margin-right:8px; }
.sp-sort__btn{ height:44px; padding:0 14px; border-radius:10px; border:1.5px solid transparent; background:transparent; font:inherit; font-size:15px; font-weight:500; color:var(--sp-text); cursor:pointer; }
.sp-sort__btn:hover{ color:var(--sp-blue-d); }
.sp-sort__btn.is-active{ border-color:var(--sp-blue); background:var(--sp-blue-bg2); color:var(--sp-blue-d); font-weight:700; }
.sp-toolbar__note{ font-size:14px; color:var(--sp-text-3); }
.sp-toolbar__filter, .sp-sort-select{ display:none!important; }
@media (max-width:1023px){
    .sp-toolbar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .sp-sort, .sp-toolbar__note{ display:none; }
    .sp-toolbar__filter{ display:flex!important; height:48px; padding:0 12px; }
    .sp-sort-select{ display:flex!important; height:48px; box-sizing:border-box; border:1.5px solid var(--sp-line-field); border-radius:var(--sp-r12); align-items:center; padding:0 10px; }
    .sp-sort-select select{ width:100%; border:0; background:transparent; font:inherit; font-size:15px; font-weight:600; color:var(--sp-text); outline:none; }
}

/* ---------- список: загрузка, пустое состояние ---------- */
.shop_items_list.is-loading{ opacity:.45; transition:opacity .15s; pointer-events:none; }
.sp-empty{ border:1.5px dashed var(--sp-line-field); border-radius:var(--sp-r20); padding:56px 32px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.sp-empty__ico{ width:88px; height:88px; border-radius:50%; background:var(--sp-blue-bg); color:var(--sp-blue); display:flex; align-items:center; justify-content:center; }
.sp-empty__ico .sp-ico{ width:44px; height:44px; stroke-width:1.8; }
body.sp .sp-empty h2{ margin:0; font-size:26px; }
.sp-empty p{ margin:0; max-width:560px; color:var(--sp-text-3); font-size:17px; }
.sp-empty__acts{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
@media (max-width:767px){ .sp-empty{ padding:32px 16px; } body.sp .sp-empty h2{ font-size:20px; } .sp-empty p{ font-size:15px; } }

/* ---------- пагинация (html_pagebar) ---------- */
.sp-pages{ display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:28px; }
.sp-pages .pagebar, .sp-pages ul.pagination, .sp-pages nav ul{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; list-style:none; margin:0; padding:0; }
.sp-pages .pagination > li > a, .sp-pages .pagination > li > span, .sp-pages .pagebar a, .sp-pages .pagebar span, .sp-pages .page-link{
    min-width:44px; height:44px; padding:0 10px; box-sizing:border-box; border:1.5px solid var(--sp-line)!important; border-radius:10px!important; display:flex; align-items:center; justify-content:center;
    background:#fff!important; color:var(--sp-text)!important; font-size:15px; margin:0!important; float:none!important;
}
.sp-pages .pagination > .active > a, .sp-pages .pagination > .active > span, .sp-pages .page-item.active .page-link, .sp-pages .pagebar_current, .sp-pages .pagebar .active{
    background:var(--sp-blue-d)!important; border-color:var(--sp-blue-d)!important; color:#fff!important; font-weight:700;
}
.sp-pages a:hover, .sp-pages .page-link:hover{ border-color:var(--sp-blue)!important; }
.sp-pages .pagebar_notice, .sp-pages .pages_count, .sp-pages .text-muted{ font-size:14px; color:var(--sp-text-3); }
.sp-more{ min-width:280px; }

/* ---------- фильтр ---------- */
.sp-filter{ border:1px solid var(--sp-line); border-radius:var(--sp-r16); background:#fff; }
.sp-filter__sheethead{ display:none; }
.sp-filter__form{ padding:20px; display:flex; flex-direction:column; gap:22px; margin:0; }
.sp-filter__head{ display:flex; justify-content:space-between; align-items:center; font-size:20px; font-weight:800; }
body.sp .sp-filter__reset{ font-size:14px; font-weight:500; }
.sp-filter__group{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sp-filter__group legend{ padding:0; margin-bottom:10px; font-size:16px; font-weight:700; color:var(--sp-text); border:0; width:auto; }
.sp-filter__range{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sp-filter .sp-input{ height:44px; padding:0 10px; border-radius:10px; font-size:15px; }
.sp-filter .sp-check{ min-height:40px; align-items:center; font-size:15px; margin:0; font-weight:400; }
.sp-filter .sp-check input{ margin:0; }
.sp-filter__group--list .is-extra{ display:none; }
.sp-filter__group--list.is-open .is-extra{ display:flex; }
.sp-filter__more{ align-self:flex-start; height:40px; padding:0; border:0; background:transparent; font:inherit; font-size:15px; font-weight:600; color:var(--sp-blue-d); cursor:pointer; }
.sp-filter__actions{ display:flex; flex-direction:column; gap:8px; }
.sp-filter__status{ font-size:13px; color:var(--sp-text-3); }
.sp-filter__status[hidden]{ display:none; }
.sp-spin{ display:inline-block; width:12px; height:12px; border:2px solid var(--sp-line); border-top-color:var(--sp-blue); border-radius:50%; animation:sp-spin .7s linear infinite; vertical-align:-1px; }
@keyframes sp-spin{ to{ transform:rotate(360deg); } }
.sp-filter__bg{ display:none; }
@media (min-width:1024px){ .sp-filter__actions .sp-btn--orange{ display:none; } }
@media (max-width:1023px){
    .sp-sidebar{ position:static; }
    .sp-filter{ position:fixed; left:0; right:0; bottom:0; top:32px; z-index:2050; border-radius:var(--sp-r20) var(--sp-r20) 0 0; border:0; display:none; flex-direction:column; box-shadow:0 -12px 32px rgba(0,0,0,.2); }
    body.sp-filter-open .sp-filter{ display:flex; }
    body.sp-filter-open .sp-filter__bg{ display:block; position:fixed; inset:0; z-index:2040; background:var(--sp-overlay); }
    .sp-filter__sheethead{ height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 20px; border-bottom:1px solid var(--sp-line); font-size:20px; font-weight:800; }
    .sp-filter__sheethead b{ color:var(--sp-blue-d); }
    .sp-filter__sheethead .sp-iconbtn{ background:transparent; width:44px; height:44px; }
    .sp-filter__head{ display:none; }
    .sp-filter__form{ flex-grow:1; overflow-y:auto; padding:8px 20px 0; gap:0; }
    .sp-filter__group{ padding:14px 0; border-bottom:1px solid var(--sp-line); }
    .sp-filter__actions{ position:sticky; bottom:0; margin:0 -20px; padding:12px 20px 20px; background:#fff; border-top:1px solid var(--sp-line); display:grid; grid-template-columns:1fr 2fr; direction:rtl; }
    .sp-filter__actions > *{ direction:ltr; }
    .sp-filter .sp-input{ font-size:16px; }
}

/* ---------- SEO-текст раздела (виджет seotext) ---------- */
.sp-seo{ margin-top:var(--sp-sec); background:var(--sp-bg-sec); border-top:1px solid var(--sp-line); padding:48px 0 56px; }
.sp-seo__body{ max-width:1000px; font-size:16px; line-height:1.65; color:var(--sp-text-3); }
.sp-seo__body.is-collapsed{ max-height:7.5em; overflow:hidden; position:relative; }
.sp-seo__body.is-collapsed::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3em; background:linear-gradient(rgba(250,250,250,0), var(--sp-bg-sec)); }
.sp-seo__toggle{ margin-top:8px; }

/* ---------- тост «Товар добавлен» ---------- */
.sp-toast{ position:fixed; right:24px; top:24px; z-index:2200; width:420px; max-width:calc(100vw - 32px); box-sizing:border-box; background:#fff; border-radius:var(--sp-r16); box-shadow:var(--sp-sh-xl); padding:16px; display:none; gap:14px; align-items:flex-start; }
.sp-toast.is-open{ display:flex; }
.sp-toast__ico{ width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--sp-ok-bg); color:var(--sp-ok); display:flex; align-items:center; justify-content:center; }
.sp-toast__body{ flex-grow:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.sp-toast__title{ font-size:17px; font-weight:800; }
.sp-toast__name{ font-size:14px; color:var(--sp-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-toast__acts{ display:flex; gap:8px; }
.sp-toast__acts .sp-btn{ flex:1; }
.sp-toast__x{ width:32px; height:32px; border:0; background:transparent; color:var(--sp-text-3); cursor:pointer; flex-shrink:0; }
@media (max-width:767px){ .sp-toast{ left:16px; right:16px; top:auto; bottom:16px; width:auto; } }

/* плавающая кнопка сравнения из compare.js — на десктопе есть иконка в шапке */
.compare-fab{ display:none!important; } /* сравнение — значок в шапке (десктоп и мобильная) */

/* ---------- обёртка виджетов ---------- */
.sp-widget + .sp-widget{ margin-top:var(--sp-sec); }
body.sp .sp-widget__title{ margin:0; }
/* «Вы уже смотрели» */
.sp-viewed{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
body.sp .sp-viewed__item{ display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--sp-line); border-radius:var(--sp-r12); color:var(--sp-text); min-width:0; }
body.sp .sp-viewed__item:hover{ border-color:var(--sp-blue); }
.sp-viewed__img{ width:56px; height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
body.sp .sp-viewed__img img{ max-width:100%; max-height:100%; object-fit:contain; }
.sp-viewed__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sp-viewed__name{ font-size:14px; line-height:1.3; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-viewed__txt b{ font-size:16px; font-weight:800; }
@media (max-width:1279px){ .sp-viewed{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767px){ .sp-viewed{ display:flex; overflow-x:auto; scrollbar-width:none; margin-right:calc(-1 * var(--sp-pad)); } .sp-viewed__item{ flex:0 0 240px; } }
.sp-seo__title{ font-size:24px!important; margin:0 0 14px!important; }
/* сайдбар каталога: заголовок виджета фильтра не нужен (у фильтра свой) */
.sp-sidebar .sp-widget > .sp-sec-head{ display:none; }
.sp-sidebar{ position:sticky; top:150px; max-height:calc(100vh - 170px); overflow-y:auto; scrollbar-width:thin; }
@media (max-width:1023px){ .sp-sidebar{ position:static; max-height:none; overflow:visible; } }
body.sp .sp-card__buy .sp-btn{ white-space:normal; text-align:center; line-height:1.2; min-width:0; } @media (max-width:767px){ body.sp .sp-card__buy .sp-btn--outline{ height:auto; min-height:44px; padding:8px 10px; font-size:14px; } }