/* [v1471] Описание товара — блок, собранный сервером по явным якорям
   (system/library/sp/desc.php). Каждый элемент несёт data-sp-k: ключ
   характеристики, а не слово на языке страницы. */
.spd,.sp-ex{--spd-ink:#1d1b2e;--spd-ink2:#4a4766;--spd-mute:#6e6a85;--spd-line:#ece9f5;--spd-card:#fff;--spd-soft:#f7f5fd;--spd-acc:#5b3fa0;--spd-acc-bg:#f0ebfb;--spd-ok:#12820a;--spd-ok-bg:#e9f8e6;--spd-warn:#9a5b00;--spd-warn-bg:#fff4e2;--spd-time:#12820a;
  color:var(--spd-ink);font-size:14px;line-height:1.5}
.spd{display:flex;flex-direction:column;gap:14px;margin-top:4px}
html.sp-dark .spd,html.sp-dark .sp-ex{--spd-ink:#e7e5f2;--spd-ink2:#c2bed8;--spd-mute:#9a96b3;--spd-line:#2d2a42;--spd-card:#1c1a2b;--spd-soft:#232036;--spd-acc:#b39cf5;--spd-acc-bg:rgba(179,156,245,.14);--spd-ok:#6fd19b;--spd-ok-bg:rgba(111,209,155,.13);--spd-warn:#f0c46e;--spd-warn-bg:rgba(240,196,110,.12);--spd-time:#6fd19b}

/* характеристики: сетка 2 колонки, значок — по ключу */
.spd-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.spd-spec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--spd-line);border-radius:12px;background:var(--spd-card);min-width:0}
.spd-ic{color:var(--spd-acc);flex:none}
.spd-l{color:var(--spd-mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spd-v{font-weight:700;color:var(--spd-ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.spd-time{font-style:normal;color:var(--spd-time)}
.spd-ok .spd-v,.spd-ok .spd-ic{color:var(--spd-ok)}
.spd-flag{font-size:14px;margin-right:2px}
.spd-wide{grid-column:1/-1;background:var(--spd-soft)}
.spd-r{display:inline-flex;align-items:center;gap:8px;min-width:0;justify-content:flex-end}
.spd-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.spd-fast{background:var(--spd-ok-bg);color:var(--spd-ok)}
.spd-slow{background:var(--spd-warn-bg);color:var(--spd-warn)}

/* ссылки: в тексте остаются, плюс кнопка «Копировать» */
.spd-links{display:flex;flex-direction:column;gap:6px}
.spd-link{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border:1px dashed var(--spd-line);border-radius:12px;background:var(--spd-soft);min-width:0}
.spd-link .spd-ic{color:var(--spd-mute)}
.spd-tag{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--spd-acc);background:var(--spd-acc-bg);padding:2px 8px;border-radius:999px;white-space:nowrap}
.spd-url{direction:ltr;unicode-bidi:isolate;text-align:start;flex:1;min-width:0;background:none;padding:0;color:var(--spd-ink2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spd-copy,.spd-more{border:1px solid var(--spd-line);background:var(--spd-card);color:var(--spd-acc);font-weight:700;font-size:12px;border-radius:9px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.spd-copy:hover,.spd-more:hover{border-color:var(--spd-acc);background:var(--spd-acc-bg)}
.spd-copy.done{color:var(--spd-ok);border-color:var(--spd-ok)}
.spd-copy:focus-visible,.spd-more:focus-visible,.sp-ex-code:focus-visible{outline:2px solid var(--spd-acc);outline-offset:2px}

/* прочие «метка: значение» — компактный список */
.spd-pairs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.spd-pairs>div{display:flex;gap:6px;min-width:0;font-size:13px;padding:2px 0}
.spd-pairs dt{font-weight:400;color:var(--spd-mute);white-space:nowrap}
.spd-pairs dt:after{content:':'}
.spd-pairs dd{margin:0;color:var(--spd-ink);font-weight:600;min-width:0;overflow-wrap:anywhere}

/* предупреждение */
.spd-callout{border-radius:12px;background:var(--spd-warn-bg);color:var(--spd-ink);padding:12px 14px;border-left:3px solid var(--spd-warn)}
.spd-callout b{display:block;margin-bottom:4px;color:var(--spd-warn)}
.spd-callout ul{margin:0;padding-left:18px}

/* текст: длинный — сворачивается */
.spd-text p{margin:0 0 8px;color:var(--spd-ink2)}
.spd-text p:last-child{margin-bottom:0}
.spd-fold{max-height:9.6em;overflow:hidden;position:relative}
.spd-fold:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(transparent,var(--spd-card,#fff))}
.spd-fold.open{max-height:none}.spd-fold.open:after{display:none}
.spd-more{align-self:flex-start}

/* подсказка «Пример ссылки» под полем «Ссылка» */
.sp-ex{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:12px;line-height:1.4;color:var(--spd-mute)}
.sp-ex-code{direction:ltr;unicode-bidi:isolate;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;background:var(--spd-acc-bg);color:var(--spd-acc);border:1px solid var(--spd-line);border-radius:6px;padding:2px 8px;cursor:pointer;overflow-wrap:anywhere}
.sp-ex-code:hover{border-color:var(--spd-acc)}
.sp-ex .spd-copy{padding:3px 9px;font-size:11px}

/* тёмная тема витрины красит всё внутри .tab-pane через !important
   (html.sp-dark .tab-pane span/div/b {color:…!important}) — возвращаем
   свои цвета той же силой и большей точностью */
html.sp-dark .tab-pane .spd .spd-l,html.sp-dark .tab-pane .spd .spd-pairs dt{color:var(--spd-mute)!important}
html.sp-dark .tab-pane .spd .spd-v,html.sp-dark .tab-pane .spd .spd-pairs dd,html.sp-dark .tab-pane .spd .spd-callout li{color:var(--spd-ink)!important}
html.sp-dark .tab-pane .spd .spd-text p,html.sp-dark .tab-pane .spd .spd-url{color:var(--spd-ink2)!important}
html.sp-dark .tab-pane .spd .spd-time,html.sp-dark .tab-pane .spd .spd-ok .spd-v,html.sp-dark .tab-pane .spd .spd-ok .spd-ic,html.sp-dark .tab-pane .spd .spd-fast,html.sp-dark .tab-pane .spd .spd-copy.done{color:var(--spd-ok)!important}
html.sp-dark .tab-pane .spd .spd-ic,html.sp-dark .tab-pane .spd .spd-tag,html.sp-dark .tab-pane .spd .spd-copy,html.sp-dark .tab-pane .spd .spd-more{color:var(--spd-acc)!important}
html.sp-dark .tab-pane .spd .spd-link .spd-ic{color:var(--spd-mute)!important}
html.sp-dark .tab-pane .spd .spd-slow,html.sp-dark .tab-pane .spd .spd-callout b{color:var(--spd-warn)!important}

/* значения переводов бывают длинными — на узких экранах одна колонка */
@media (max-width:640px){
  .spd-specs,.spd-pairs{grid-template-columns:1fr}
  .spd-l{white-space:normal}
  /* длинная подпись (среднее время) — значение уходит строкой ниже */
  .spd-wide[data-sp-k="avg"]{grid-template-columns:auto minmax(0,1fr)}
  .spd-wide[data-sp-k="avg"]>.spd-r{grid-column:2;justify-content:flex-start;text-align:left}
  .spd-link{flex-wrap:wrap}
  .spd-url{flex:1 1 140px}
}
[dir="rtl"] .spd-v{text-align:left}
[dir="rtl"] .spd-callout{border-left:0;border-right:3px solid var(--spd-warn)}
@media (prefers-reduced-motion:reduce){.spd-copy,.spd-more{transition:none}}