@layer components {
    .faq {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .faq-item {
        padding-inline: clamp(16px, 2vw, 24px);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-card);
        background: var(--color-white);
    }

    .faq--tinted .faq-item {
        background: var(--color-page);
    }

    .faq-item__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-block: 20px;
        list-style: none;
        cursor: pointer;
    }

    .faq-item__summary::-webkit-details-marker {
        display: none;
    }

    .faq-item__question {
        font-size: 19px;
        font-weight: 600;
        line-height: 1.35;
    }

    .faq-item__icon {
        flex: none;
        color: var(--color-accent);
        font-size: 26px;
        font-weight: 400;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .faq-item[open] .faq-item__icon {
        transform: rotate(45deg);
    }

    .faq-item__answer {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 22px;
    }

    .faq-item__text {
        display: flex;
        flex: 1;
        flex-direction: column;
        line-height: 1.35;
    }

    .faq-item__subtitle {
        color: var(--color-muted);
        font-size: 15px;
    }

    .faq-item--numbered .faq-item__answer {
        padding-left: 60px;
    }

    @media (width < 360px) {
        .faq-item__text,
        .faq-item__question {
            min-width: 0;
            overflow-wrap: break-word;
            hyphens: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .faq-item__icon {
            transition: none;
        }
    }
}