/* Rule only between items — first has no top rule, last has no bottom. */
.rb-accordion__item + .rb-accordion__item { border-top: 1px solid var(--reformed-grey-1, #444); }

.rb-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.9rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--reformed-font-title, inherit);
    font-size: 1.1rem;
    color: inherit;
    text-align: left;
}

.rb-accordion__title { flex: 1 1 auto; }

/* Chevron sits to the LEFT of the title (matches the reference). It inherits the
   header text colour (currentColor) so it stays visible on the dark card, and
   rotates 180deg when the item opens. */
.rb-accordion__icon {
    flex: 0 0 auto;
    display: inline-flex;
    margin-left: -4px;
    transition: transform 0.3s ease;
}
.rb-accordion__icon svg { display: block; width: 14px; height: 10px; }
.rb-accordion__header[aria-expanded="true"] .rb-accordion__icon { transform: rotate(180deg); }

/* Animated open/close: grid-template-rows 0fr -> 1fr animates the panel to its
   natural content height (no fixed max-height guesswork). */
.rb-accordion__panel {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows 0.3s ease;
}
.rb-accordion__header[aria-expanded="true"] + .rb-accordion__panel { grid-template-rows: minmax(0, 1fr); }

.rb-accordion__panel-inner {
    overflow: hidden;
    min-height: 0;
    padding-bottom: 1rem;
    /* Take collapsed content out of the a11y tree / tab order, but only after the
       close animation finishes so it stays visible while collapsing. */
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
}
.rb-accordion__header[aria-expanded="true"] + .rb-accordion__panel .rb-accordion__panel-inner {
    visibility: visible;
    transition-delay: 0s;
}

.rb-accordion__price { margin: 0 0 0.4rem; }

@media (prefers-reduced-motion: reduce) {
    .rb-accordion__icon,
    .rb-accordion__panel { transition: none; }
}