/* AVELOR — Cookies
 * Extension styles. Loaded AFTER avelor-shipping.css + avelor-faq.css +
 * avelor-contact.css + avelor-privacy.css. Reuses .sh-* / .faq-* /
 * .pv-* structure; adds:
 *
 *   .ck-article       — slightly tightened article column for legal copy
 *   .ck-cats          — purposes-card list (4 cards, vertical stack)
 *   .ck-cat           — single purpose card (head + lede)
 *   .ck-browsers      — 2×2 grid of browser-setting hints
 *   .ck-callout-warn  — clay-tinted callout about blocking cookies
 *   .ck-third         — slight tightening over .sh-options used here
 *
 * Note: this page used to differentiate «Necessary / By consent» tiers
 * with tinted cards + status pills. Dropped in 2026-05-19 — Ukraine has
 * no hard cookie-consent regulation, so the page now simply lists
 * purposes for which cookies may be used.
 */

/* =========================================================
   Article — legal copy reads better narrow
   ========================================================= */
.ck-article { max-width: 68ch; }

/* =========================================================
   Cookie category cards
   ========================================================= */
.ck-cats {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ck-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 26px;
	background: var(--avelor-white);
	border: 1px solid var(--avelor-line);
	border-radius: var(--radius-lg);
}

.ck-cat-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ck-cat-num {
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 600;
	color: var(--avelor-line);
	font-variant-numeric: tabular-nums;
	padding-right: 10px;
	border-right: 1px solid var(--avelor-line);
	align-self: stretch;
	display: inline-flex;
	align-items: center;
}

.ck-cat-kind {
	font-family: var(--font-display, var(--font-body));
	font-size: 22px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--avelor-graphite);
	flex: 1;
	min-width: 0;
}

.ck-cat-lede {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--fg-primary) !important;
	margin: 0 !important;
	text-wrap: pretty;
}

/* =========================================================
   Browsers reference grid (2×2 desktop → 1-col mobile)
   ========================================================= */
.ck-browsers {
	list-style: none;
	margin: 4px 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 1px solid var(--avelor-line);
	border-left: 1px solid var(--avelor-line);
}

.ck-browsers li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
	border-right: 1px solid var(--avelor-line);
	border-bottom: 1px solid var(--avelor-line);
	background: var(--avelor-white);
}

.ck-browsers-k {
	font-family: var(--font-display, var(--font-body));
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--avelor-graphite);
}

.ck-browsers-v {
	font-size: 13px;
	line-height: 1.5;
	color: var(--fg-secondary);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   Warning callout for «blocking essentials»
   ========================================================= */
.ck-callout-warn {
	background: rgba(217, 119, 87, 0.06);
	border-color: rgba(217, 119, 87, 0.28);
}

.ck-callout-warn .sh-callout-k {
	color: var(--avelor-clay, #B8634A);
}

/* =========================================================
   Third-party list — slightly tighter top margin
   ========================================================= */
.ck-third { margin-top: 4px; }

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 1024px) {
	.ck-article { max-width: none; }

	.ck-cat { padding: 18px 20px; }
	.ck-cat-kind { font-size: 18px; }

	.ck-cat-num {
		border-right: 0;
		padding: 0;
	}

	.ck-browsers { grid-template-columns: 1fr; }
}