.cemacon-product-faq {
	--cemacon-product-faq-divider-color: #e4e6e8;
	--cemacon-product-faq-item-padding: 20px;
	--cemacon-product-faq-chevron-color: #1a1a1a;
	--cemacon-product-faq-chevron-size: 14px;
	--cemacon-product-faq-vote-idle-color: #a4a9ae;
	--cemacon-product-faq-vote-active-color: #1a1a1a;
	--cemacon-product-faq-vote-icon-size: 18px;
	--cemacon-product-faq-question-hover-color: #faa21b;
	--cemacon-product-faq-answer-color: #6b7076;

	display: flex;
	flex-direction: column;
	font-family: var(--cemacon-font-body);
}

.cemacon-product-faq__heading {
	margin: 0 0 38px;
	font-family: var(--cemacon-font-heading);
}

.cemacon-product-faq__item {
	border-top: 1px solid var(--cemacon-product-faq-divider-color);
}

.cemacon-product-faq__item:last-child {
	border-bottom: 1px solid var(--cemacon-product-faq-divider-color);
}

.cemacon-product-faq .cemacon-product-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
	width: 100%;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: var(--cemacon-product-faq-item-padding) 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--cemacon-font-heading);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
	cursor: pointer;
	appearance: none;
	transition: color 0.2s ease;
	white-space: normal;
}

/* Zero-specificity defaults so Elementor Style → Tipografie wins when set. */
:where(.cemacon-product-faq .cemacon-product-faq__question) {
	font-weight: 700;
	line-height: normal;
}

/* Beat Elementor kit button Ubuntu; Style → Tipografie still overrides. */
.elementor-kit-6 .cemacon-product-faq button.cemacon-product-faq__question {
	font-family: var(--cemacon-font-heading);
}

.cemacon-product-faq .cemacon-product-faq__question:hover,
.cemacon-product-faq .cemacon-product-faq__question:focus,
.cemacon-product-faq .cemacon-product-faq__question:focus-visible {
	background-color: transparent;
	color: var(--cemacon-product-faq-question-hover-color);
}

.cemacon-product-faq__chevron {
	flex: 0 0 auto;
	width: var(--cemacon-product-faq-chevron-size);
	color: var(--cemacon-product-faq-chevron-color);
	transition: transform 0.2s ease, color 0.2s ease;
}

.cemacon-product-faq__question:hover .cemacon-product-faq__chevron,
.cemacon-product-faq__question:focus-visible .cemacon-product-faq__chevron {
	color: var(--cemacon-product-faq-question-hover-color);
}

.cemacon-product-faq__item--open .cemacon-product-faq__chevron {
	transform: rotate(180deg);
}

.cemacon-product-faq__answer[hidden] {
	display: none;
}

.cemacon-product-faq__answer-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 24px;
	padding: 0 0 var(--cemacon-product-faq-item-padding);
}

.cemacon-product-faq__answer-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--cemacon-product-faq-answer-color);
	font-family: var(--cemacon-font-body);
}

.cemacon-product-faq__vote {
	flex: 0 0 auto;
	display: flex;
	column-gap: 12px;
}

.cemacon-product-faq .cemacon-product-faq__vote-btn {
	display: flex;
	align-items: center;
	column-gap: 6px;
	margin: 0;
	padding: 4px;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--cemacon-product-faq-vote-idle-color);
	cursor: pointer;
	appearance: none;
	transition: color 0.2s ease;
}

.cemacon-product-faq .cemacon-product-faq__vote-btn:hover,
.cemacon-product-faq .cemacon-product-faq__vote-btn:focus,
.cemacon-product-faq .cemacon-product-faq__vote-btn:focus-visible {
	background-color: transparent;
	color: var(--cemacon-product-faq-vote-active-color);
}

.cemacon-product-faq__vote-btn svg {
	width: var(--cemacon-product-faq-vote-icon-size);
	height: var(--cemacon-product-faq-vote-icon-size);
}

.cemacon-product-faq__vote-btn[data-active="true"] {
	color: var(--cemacon-product-faq-vote-active-color);
}

.cemacon-product-faq__vote-count {
	font-size: 0.875em;
	min-width: 1ch;
}

.cemacon-product-faq--placeholder {
	color: var(--cemacon-product-faq-vote-idle-color);
	font-style: italic;
}

@media (max-width: 768px) {
	.cemacon-product-faq__answer-inner {
		flex-direction: column;
		align-items: stretch;
		row-gap: 12px;
	}

	.cemacon-product-faq__vote {
		justify-content: flex-end;
	}
}