/* AVELOR — Договір публічної оферти
 * Extension styles. Loaded AFTER avelor-shipping.css + avelor-faq.css +
 * avelor-contact.css + avelor-privacy.css. Reuses .sh-* / .faq-* /
 * .ct-* / .pv-* structure; adds .of-* specifics:
 *
 *   .of-article         — slightly wider article column for 15-section legal copy
 *   .of-preamble        — accented preamble block before the first numbered section
 *   .of-terms           — Section 02 definition list (term → meaning)
 *   .of-chips           — Section 04 product-info chips
 *   .of-chips-muted     — Section 13 force-majeure dashed chips
 *   .of-duties          — Section 10 two-column duties layout (Сторона А / Сторона Б)
 *   .of-quality-list    — Section 09 checklist tweaks
 *   .of-toc             — Tighten TOC rows (15 items needs less vertical space)
 *
 * Hero H1 cap matches the Privacy page treatment — «Договір публічної оферти.»
 * is the same long-string class.
 */

/* =========================================================
   Hero — H1 sized down for the long «Договір публічної оферти.»
   ========================================================= */
.of-page .sh-hero h1 {
	font-size: clamp(32px, 4.2vw, 56px);
	max-width: 24ch;
}

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

/* =========================================================
   Preamble — gentle deep-green accent, no numbered head
   ========================================================= */
.of-preamble {
	padding: 24px 24px 4px;
	border-left: 2px solid var(--avelor-deep-green);
	background: linear-gradient(to right, rgba(31, 61, 53, 0.025), transparent 60%);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.of-preamble p { margin: 0 0 16px !important; }
.of-preamble p:last-child { margin-bottom: 0 !important; }

/* =========================================================
   02 · Terms — definition list (term in display type)
   ========================================================= */
.of-terms {
	margin: 8px 0 0;
	padding: 0;
	border-top: 1px solid var(--avelor-line);
}

.of-terms-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 28px;
	padding: 16px 0;
	border-bottom: 1px solid var(--avelor-line);
	align-items: baseline;
}

.of-terms-row dt {
	margin: 0;
	font-family: var(--font-display, var(--font-body));
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--avelor-deep-green);
}

.of-terms-row dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-primary);
	text-wrap: pretty;
}

.of-terms-row dd strong {
	color: var(--avelor-graphite);
	font-weight: 600;
}

/* =========================================================
   04 / 13 · Chip lists
   ========================================================= */
.of-chips {
	list-style: none;
	margin: 4px 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.of-chips li {
	padding: 7px 14px;
	background: var(--avelor-white);
	border: 1px solid var(--avelor-line);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--fg-primary);
	letter-spacing: -0.005em;
}

.of-chips-muted li {
	background: transparent;
	color: var(--fg-secondary);
	border-color: var(--avelor-line);
	border-style: dashed;
}

/* =========================================================
   09 · Quality checklist — slightly tighter
   ========================================================= */
.of-quality-list { margin-top: 0; }

/* =========================================================
   10 · Duties — two columns (Сторона А / Сторона Б)
   ========================================================= */
.of-duties {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: var(--avelor-white);
	border: 1px solid var(--avelor-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-top: 4px;
}

.of-duties-col {
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.of-duties-col:first-child {
	border-right: 1px solid var(--avelor-line);
}

.of-duties-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--avelor-line);
}

.of-duties-eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--avelor-deep-green);
}

.of-duties-head h3 {
	font-family: var(--font-display, var(--font-body));
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	font-weight: 500;
	color: var(--avelor-graphite);
	margin: 0;
}

.of-duties-list { margin: 0 !important; border-top: 0 !important; }

.of-duties-list li {
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--avelor-line);
	grid-template-columns: 24px 1fr !important;
	gap: 12px !important;
}

.of-duties-list li:last-child { border-bottom: 0; }
.of-duties-list li .t { font-size: 14px !important; }

/* =========================================================
   TOC — 15 items needs tighter rows
   ========================================================= */
.of-toc .sh-toc-list li a { padding: 5px 0 !important; }

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 1024px) {
	.of-article { max-width: none; }
	.of-preamble { padding: 18px 18px 4px; }

	.of-terms-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 0;
	}

	.of-terms-row dt { font-size: 15px; }

	.of-duties { grid-template-columns: 1fr; }

	.of-duties-col:first-child {
		border-right: 0;
		border-bottom: 1px solid var(--avelor-line);
	}

	.of-duties-col { padding: 20px; }
}