/* =========================================================================
   Metal Universe – category texts: SEO text + FAQ under the products (page 1).
   ========================================================================= */

.mu-cc {
	--cc-ink: var(--oc-ink, #F4F3F3);
	--cc-muted: var(--oc-muted, #A3A3A3);
	--cc-line: var(--oc-line-soft, #2A2A2A);
	--cc-panel: var(--oc-panel, #1C1C1C);
	--cc-accent: var(--oc-accent, #E83324);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 32px 48px;
	align-items: start;
	margin: 48px 0 24px;
	padding: 40px 0 0;
	border-top: 1px solid var(--cc-line);
	font-family: var(--oc-body, inherit);
	color: var(--cc-ink);
}
.mu-cc:not(:has(.mu-cc__faq)), .mu-cc:not(:has(.mu-cc__text)) { grid-template-columns: minmax(0, 1fr); }

.mu-cc__text { max-width: 72ch; font-size: 15px; line-height: 1.7; color: var(--oc-ink-2, #D6D6D6); }
.mu-cc__text p { margin: 0 0 14px; }
.mu-cc__text h2, .mu-cc__text h3 { margin: 26px 0 10px; font-family: var(--oc-head, inherit); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--cc-ink); }
.mu-cc__text ul, .mu-cc__a ul, .mu-cc__text ol, .mu-cc__a ol { margin: 0 0 14px; padding: 0; list-style: none; }
.mu-cc__text li, .mu-cc__a li { position: relative; margin: 0 0 6px; padding-left: 20px; }
.mu-cc__text li::before, .mu-cc__a li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--cc-accent); }
.mu-cc__text li p, .mu-cc__a li p { margin: 0; }
.mu-cc strong { color: var(--cc-ink); }
.mu-cc a { color: var(--cc-accent); }

.mu-cc__faq-title { margin: 0 0 16px; font-family: var(--oc-head, inherit); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.15; color: var(--cc-ink); text-wrap: balance; }
.mu-cc__q { margin: 0 0 8px; background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 10px; transition: border-color .15s; }
.mu-cc__q[open] { border-color: color-mix(in srgb, var(--cc-accent) 55%, var(--cc-line)); }
.mu-cc__q summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; font-size: 16px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; }
.mu-cc__q summary::-webkit-details-marker { display: none; }
.mu-cc__q summary:hover { color: var(--cc-accent); }
.mu-cc__q summary:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; border-radius: 10px; }
.mu-cc__icon { position: relative; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--cc-accent) 16%, transparent); }
.mu-cc__icon::before, .mu-cc__icon::after { content: ""; position: absolute; left: 6px; top: 10px; width: 10px; height: 2px; background: var(--cc-accent); transition: transform .2s; }
.mu-cc__icon::after { transform: rotate(90deg); }
.mu-cc__q[open] .mu-cc__icon::after { transform: rotate(0); }
.mu-cc__a { padding: 0 16px 6px; font-size: 15px; line-height: 1.65; color: var(--oc-ink-2, #D6D6D6); }
.mu-cc__a p { margin: 0 0 12px; }
.mu-cc__a ul { columns: 2; column-gap: 24px; }

@media (max-width: 900px) {
	.mu-cc { grid-template-columns: minmax(0, 1fr); margin-top: 36px; padding-top: 28px; }
}
@media (max-width: 480px) {
	.mu-cc__a ul { columns: 1; }
	.mu-cc__q summary { font-size: 15px; padding: 14px; }
}