/* Сторінка для постачальників — доповнює shop.css */
.sp-sub{margin:-8px 0 20px;max-width:72ch}
.sp-h3{font-family:var(--f-d);font-size:19px;margin:40px 0 10px}

/* схема каналів збуту */
.sp-flow{display:grid;gap:6px;justify-items:stretch}
.sp-n{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:grid;gap:2px}
.sp-n b{font-size:16px}.sp-n span{font-size:13px;color:var(--soft)}
.sp-n.we{background:var(--slate);border-color:var(--slate);color:#fff}
.sp-n.we span{color:#c3cad0}
.sp-n.we b{font-family:var(--f-d)}
.sp-n.end{background:color-mix(in srgb,var(--ok) 12%,var(--panel));border-color:color-mix(in srgb,var(--ok) 40%,var(--line));text-align:center}
.sp-n.you{border:2px solid var(--orange)}
.sp-ch{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sp-ch div{background:color-mix(in srgb,var(--orange) 12%,var(--panel));border-radius:var(--r-s);padding:10px 12px;display:grid;gap:2px;align-content:start}
.sp-ch b{font-size:14px;line-height:1.3}.sp-ch span{font-size:12px;color:var(--soft)}
.sp-ar{display:block;width:2px;height:16px;background:var(--soft);margin:0 auto;position:relative}
.sp-ar:after{content:"";position:absolute;left:-4px;bottom:-2px;border:5px solid transparent;border-top:6px solid var(--soft);border-bottom:0}

/* категорії */
.sp-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sp-cat{display:grid;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .15s}
.sp-cat:hover{border-color:var(--orange)}
.sp-cat .im{aspect-ratio:16/10;background:var(--grout)}
.sp-cat .im img{width:100%;height:100%;object-fit:cover}
.sp-cat .tx{padding:12px 14px;display:grid;gap:2px}
.sp-cat em{font-style:normal;font-size:13px;color:var(--ok);font-weight:600}
.sp-cat small{font-size:12px;color:var(--soft);line-height:1.4}

/* таблиця форматів */
.sp-cmp td[colspan]{text-align:center;background:var(--panel)!important}

/* чекліст готовності */
.sp-ready{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.sp-list{display:grid;gap:8px}
.sp-it{display:flex;gap:12px;align-items:center;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-s);padding:12px 14px;cursor:pointer;font-weight:500;transition:border-color .15s}
.sp-it input{width:20px;height:20px;accent-color:var(--ok);flex:none}
.sp-it.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--panel))}
.sp-res{position:sticky;top:86px;background:var(--slate);color:#fff;border-radius:var(--r);padding:24px;display:grid;gap:10px}
.sp-res>span{font-size:14px;color:#c3cad0}
.sp-res>b{font-family:var(--f-d);font-size:40px;line-height:1;color:var(--orange)}
.sp-pb{height:8px;border-radius:4px;background:#ffffff22;overflow:hidden}
.sp-pb i{display:block;height:100%;width:0;background:var(--orange);transition:width .3s}
.sp-res p{font-size:14px;color:#dfe4e8;min-height:42px}
.sp-res .btn{justify-self:start}

/* кроки */
.sp-steps li:last-child:before{content:"5"}

@media(max-width:1020px){.sp-cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.sp-ready{grid-template-columns:1fr}.sp-res{position:static}}
@media(max-width:520px){.sp-cats{grid-template-columns:1fr 1fr}.sp-ch{grid-template-columns:1fr}}
.sp-cmp th:last-child,.sp-cmp td:last-child{background:var(--panel)}
.sp-cmp thead th,.sp-cmp thead th:last-child{background:var(--wall);color:var(--ink)}