.toggles {width:100%}
.toggles .single-toggle { border-bottom: 1px solid #e0e0e0; }

.toggles .single-toggle .toggle-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) 0; cursor: pointer; }
.toggles .single-toggle .toggle-head h4 { margin: 0; }

/* Plus icon that rotates into a minus when open */
.toggles .single-toggle .toggle-head::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-left: var(--space-xs); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: center; background-size: 100% 2px, 2px 100%; background-repeat: no-repeat; transition: transform 0.3s ease; }
.toggles .single-toggle.is-open .toggle-head::after { transform: rotate(135deg); }

/* The grid 0fr -> 1fr trick animates to height: auto smoothly */
.toggles .single-toggle .toggle-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.toggles .single-toggle.is-open .toggle-content { grid-template-rows: 1fr; }
.toggles .single-toggle .toggle-content .toggle-content-inner { overflow: hidden; min-height: 0; }
.toggles .single-toggle .toggle-content .toggle-content-inner p { margin: 0; padding-bottom: var(--space-xs); }