/* The two sections the plugin adds to the 16 stage kits' description. Colours come from the description's own
   variables and DESIGN.md (body slate #404e65).

   "Co dostajesz": one column, one blue check per line, nothing else, so it reads as a short checklist and not as a
   second copy of the banded task list above it (Edvin, 2026-09-30/10-01). The check colour is the description's own
   accent (its heading underline). */
body.kt-quarterly-kit .zk-digital-copy .kt-kit-contents {
	max-width: 560px;
	margin: 24px auto 8px;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-contents ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-contents li {
	position: relative;
	margin: 0;
	padding: 0 0 0 32px;
	font-size: 18px;
	line-height: 1.45;
	list-style: none;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-contents li + li {
	margin-top: 10px;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-contents li::before {
	position: absolute;
	top: 4px;
	left: 7px;
	width: 7px;
	height: 14px;
	margin: 0;
	border: solid var(--zk-copy-accent);
	border-width: 0 3px 3px 0;
	border-radius: 0;
	background: none;
	content: "";
	transform: rotate(45deg);
}

/* "Zadaniaki, market czy Facebook?" (Edvin, 2026-10-01): our column carries the tint and the weight, the other two stay
   plain. On a phone the table keeps its columns and scrolls sideways inside its frame: the row names and the column
   names stay in place, the next column is cut by the edge, the edge fades while more is hidden, and the fixed column
   casts a shadow once the table has moved (the frame's classes come from kt-digital-pdp-relaunch.js). Sticky cells need
   an opaque background: the page's cool white. Separate borders, because collapsed ones don't travel with sticky cells. */
body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare {
	max-width: 860px;
	margin: 24px auto 8px;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare__frame {
	position: relative;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	font-size: 16px;
	line-height: 1.35;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare :is(th, td) {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--zk-copy-border);
	background: #fdfefe;
	color: #404e65;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare thead :is(th, td) {
	padding-top: 14px;
	border-bottom-color: var(--zk-copy-accent);
	font-weight: 700;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare thead td {
	width: 22%;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare tbody th {
	color: var(--zk-copy-ink);
	font-weight: 700;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare .is-us {
	background: var(--zk-copy-wash);
	color: var(--zk-copy-ink);
	font-weight: 700;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare .is-none {
	color: #6f7f92;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare__frame::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	background: linear-gradient(to right, rgb(253 254 254 / 0), #fdfefe 85%);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare__frame.is-scrollable:not(.is-end)::after {
	opacity: 1;
}

@media (max-width: 767px) {
	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare__scroll {
		max-height: min(78vh, 640px);
		overflow: auto;
	}

	/* 100px of row names and three 150px columns: on a 330px phone the next column is cut about in half. */
	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare table {
		width: 550px;
	}

	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare thead td {
		width: 100px;
	}

	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare :is(th, td) {
		padding: 10px;
	}

	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare thead :is(th, td) {
		position: sticky;
		top: 0;
		z-index: 2;
	}

	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare :is(thead td, tbody th) {
		position: sticky;
		left: 0;
		transition: box-shadow 200ms cubic-bezier(0.25, 1, 0.5, 1);
	}

	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare tbody th {
		z-index: 1;
	}

	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare thead td {
		z-index: 3;
	}

	body.kt-quarterly-kit .zk-digital-copy .kt-kit-compare__frame.is-scrolled :is(thead td, tbody th) {
		box-shadow: 8px 0 10px -8px rgb(45 61 84 / 0.22);
	}
}