/* ==========================================================================
   Spawlab: porównanie produktów i lista obserwowanych.
   Korzysta z tokenów i klas z main.css (.tbl, .btn, .card, .products).
   ========================================================================== */

.cmp-head{padding:24px 0 24px}
.cmp-wrap{padding-bottom:56px}

/* Atrybut hidden ma pierwszeństwo nad układem tych bloków. */
.cmp-empty[hidden],.wl-mail[hidden],.wl-error[hidden],.wl-loading[hidden],.cmp-wrap .products[hidden]{display:none}

/* ---------- tabela porównania ---------- */
.cmp-scroll{background:#fff}
.cmp-tbl{table-layout:fixed;min-width:640px}
.cmp-tbl--1{min-width:0}
.cmp-tbl--2{min-width:620px}
.cmp-tbl--3{min-width:860px}
.cmp-tbl th,.cmp-tbl td{vertical-align:top}

/* Pierwsza kolumna trzyma się krawędzi przy przewijaniu poziomym. */
.cmp-lab{position:sticky;left:0;z-index:2;width:170px;min-width:170px;background:#F7F9FC;border-right:1px solid var(--sl-line);box-shadow:3px 0 6px rgba(14,23,38,.05);text-align:left}
.cmp-tbl td{width:auto;background:#fff}

.cmp-tbl tr:last-child th,.cmp-tbl tr:last-child td{border-bottom:0}

/* Wiersz identyczny w każdej kolumnie: widoczny, ale zejdź z niego wzrokiem. */
.cmp-tbl tr.is-same td{color:var(--sl-muted);background:#FCFDFE}
.cmp-tbl tr.is-same .cmp-lab{color:#8B95A3}
.cmp-tbl tr.is-same .badge{opacity:.6}

.cmp-none{color:var(--sl-muted);font-family:var(--sl-mono);font-size:12px}

.cmp-row--media td{padding:12px}
.cmp-media{display:block;border-radius:var(--sl-r);overflow:hidden;background:var(--sl-soft)}
.cmp-img{width:100%;aspect-ratio:4/3;object-fit:cover}

.cmp-row--name td{padding-top:12px;padding-bottom:12px}
.cmp-name{font-family:var(--sl-cond);font-size:21px;font-weight:700;line-height:1.1;color:var(--sl-ink);display:block}
.cmp-name:hover{color:var(--sl-navy);text-decoration:none}

.cmp-price__main{display:block;font-family:var(--sl-cond);font-size:26px;font-weight:800;line-height:1.05;color:var(--sl-ink);white-space:nowrap}
.cmp-price__unit{font-family:var(--sl-sans);font-size:13px;font-weight:600;color:var(--sl-muted)}
.cmp-price__second{display:block;font-size:13px;color:var(--sl-muted);margin-top:3px;white-space:nowrap}

.cmp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.cmp-list li{position:relative;padding-left:14px}
.cmp-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--sl-line)}

/* ---------- przyciski pod tabelą ---------- */
.cmp-acts{display:grid;gap:16px;margin-top:16px;grid-template-columns:170px repeat(var(--cmp-cols,3),minmax(0,1fr))}
.cmp-acts--1{--cmp-cols:1}
.cmp-acts--2{--cmp-cols:2}
.cmp-acts--3{--cmp-cols:3}
.cmp-acts::before{content:"";display:block}
.cmp-act{padding:14px;display:flex;flex-direction:column;gap:8px}
.cmp-act__name{font-family:var(--sl-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);line-height:1.3}
.cmp-act .btn{width:100%}
.cmp-act .btn:first-of-type{margin-top:auto}

.cmp-hint{margin:16px 0 0;font-size:14px;color:var(--sl-muted)}

/* ---------- stan pusty ---------- */
.cmp-empty{padding:40px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.cmp-empty svg{color:var(--sl-navy)}
.cmp-empty h2{font-size:clamp(22px,2.6vw,30px)}
.cmp-empty p{margin:0;max-width:52ch;color:var(--sl-body)}
.cmp-empty__links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}

/* ---------- obserwowane ---------- */
.wl-loading{font-family:var(--sl-mono);font-size:13px;color:var(--sl-muted);margin:0 0 16px}
.wl-error{margin-top:16px}

.wl-card__meta{font-family:var(--sl-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted)}
.wl-card__price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wl-card__price b{font-family:var(--sl-cond);font-size:28px;font-weight:800;line-height:1;color:var(--sl-ink)}
.wl-card__price span{font-size:13px;color:var(--sl-muted)}

.wl-mail{margin-top:28px;padding:24px 28px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.wl-mail__text{flex:1;min-width:260px}
.wl-mail__text h2{font-size:24px}
.wl-mail__row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.wl-mail__row input[type=email]{min-width:240px;height:52px;border:1.5px solid var(--sl-line);border-radius:var(--sl-r);padding:0 14px;background:#fff;font-size:15px;font-family:inherit}
.wl-trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;margin:0}

/* ---------- responsywność ---------- */
@media (max-width:860px){
	.cmp-lab{width:112px;min-width:112px;font-size:10px;padding:10px 8px}
	/* Tabela zostaje szeroka, kolumna z nazwami wierszy trzyma się krawędzi. */
	.cmp-tbl{min-width:460px}
	.cmp-tbl--1{min-width:0}
	.cmp-tbl--2{min-width:460px}
	.cmp-tbl--3{min-width:640px}
	.cmp-name{font-size:18px}
	.cmp-price__main{font-size:22px}
	.cmp-acts{grid-template-columns:1fr;gap:10px}
	.cmp-acts::before{display:none}
	.cmp-act{flex-direction:row;flex-wrap:wrap;align-items:center}
	.cmp-act__name{flex-basis:100%}
	.cmp-act .btn{width:auto;flex:1}
	.wl-mail{padding:20px}
	.wl-mail__row{width:100%}
	.wl-mail__row input[type=email]{flex:1;min-width:0}
}