.ketabbin-ketaseo-product {
	--ketaseo-surface: #fff;
	--ketaseo-text: #1e1930;
	--ketaseo-muted: #655f72;
	--ketaseo-border: #e8e1f1;
	--ketaseo-accent: #6b2fb9;
	max-width: 1180px;
	margin: 2.5rem auto;
	color: var(--ketaseo-text);
}

[data-theme="dark"] .ketabbin-ketaseo-product {
	--ketaseo-surface: #211b2c;
	--ketaseo-text: #f8f5ff;
	--ketaseo-muted: #cec5dc;
	--ketaseo-border: #443a54;
	--ketaseo-accent: #c6a2ff;
}

.ketabbin-ketaseo-product__section {
	margin-block: 1rem;
	padding: clamp(1.1rem, 3vw, 2rem);
	border: 1px solid var(--ketaseo-border);
	border-radius: 1.25rem;
	background: var(--ketaseo-surface);
	box-shadow: 0 12px 35px rgb(27 17 43 / 7%);
}

.ketabbin-ketaseo-product h2 {
	margin: 0 0 1rem;
	color: var(--ketaseo-text);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.ketabbin-ketaseo-product__copy,
.ketabbin-ketaseo-faq details,
.ketabbin-ketaseo-related span {
	color: var(--ketaseo-text);
	line-height: 2;
}

.ketabbin-ketaseo-faq details {
	padding: 1rem;
	border-block-end: 1px solid var(--ketaseo-border);
}

.ketabbin-ketaseo-faq summary {
	cursor: pointer;
	color: var(--ketaseo-text);
	font-weight: 750;
}

.ketabbin-ketaseo-faq details > div {
	color: var(--ketaseo-muted);
}

.ketabbin-ketaseo-related {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}

.ketabbin-ketaseo-related a {
	display: grid;
	gap: .65rem;
	padding: .75rem;
	border: 1px solid var(--ketaseo-border);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--ketaseo-surface) 92%, var(--ketaseo-accent));
	text-decoration: none;
}

.ketabbin-ketaseo-related img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: .7rem;
}

.ketabbin-ketaseo-related a:focus-visible {
	outline: 3px solid var(--ketaseo-accent);
	outline-offset: 3px;
}