/*
 * "Questions about this property" on the listing page
 * (products/partials/listing-faq.blade.php). Linked from the head through
 * @push('styles'). These rules must not go back into a <style> block in the
 * partial: it renders inside the shop Vue root, which drops <style> tags when
 * it mounts. The chevron SVGs also carry width/height attributes so they stay
 * 18px before this file arrives.
 */
.hzlf-faq__list { margin-block-start: 8px; border-block-start: 1px solid var(--hzp-line, #e6e8ee); }
.hzlf-faq__item { border-block-end: 1px solid var(--hzp-line, #e6e8ee); }
.hzlf-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding-block: 12px; padding-inline: 2px; color: var(--hzp-ink, #12141a); font-size: 15px; font-weight: 650; line-height: 1.45; list-style: none; cursor: pointer; }
.hzlf-faq__item summary::-webkit-details-marker { display: none; }
.hzlf-faq__item summary:focus-visible { outline: 2px solid var(--hzp-accent, #c2410c); outline-offset: 2px; }
.hzlf-faq__chevron { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; color: var(--hzp-accent, #c2410c); transition: transform .18s ease; }
.hzlf-faq__chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hzlf-faq__item[open] .hzlf-faq__chevron { transform: rotate(180deg); }
.hzlf-faq__answer { padding-block: 0 14px; padding-inline: 2px; color: var(--hzp-muted, #4b5162); font-size: 14px; line-height: 1.6; }
.hzlf-faq__answer p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .hzlf-faq__chevron { transition: none; } }