/* Basic layout */
.ais-wrapper { display: flex; gap: 20px; align-items: flex-start; width: 100%; box-sizing: border-box; }
.ais-left { flex: 0 0 auto; width: 45%; }
.ais-right { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.ais-image-wrap { width: 100%; box-sizing: border-box; }
.ais-image-wrap img.ais-preview { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 6px; }

/* Accordion items */
.ais-accordion { background: var(--default-bg,#fff); color: var(--default-color,#111); padding: 12px; cursor: pointer; border-radius:4px; transition: background .18s, color .18s; overflow: hidden; border:1px solid rgba(0,0,0,0.06); }
.ais-accordion + .ais-accordion { margin-top: 8px; }
.ais-accordion .ais-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ais-accordion .ais-title { font-weight:600; }
.ais-accordion .ais-content { display:none; margin-top:10px; }

/* Icon area */
.ais-icon { width: 1.4em; height:1.4em; display:inline-block; text-align:center; line-height:1.4em; font-size:1.1em; }

/* Active / hover states */
.ais-accordion:hover { background: var(--hover-bg,#f5f5f5); color: var(--hover-color,#111); }
.ais-accordion.ais-active { background: var(--active-bg,#eee); color: var(--active-color,#000); }
.ais-accordion.ais-active .ais-content { display:block; }

/* Responsive: mobile stack */
@media (max-width: 768px) {
    .ais-wrapper { flex-direction: column; }
    .ais-left, .ais-right { width: 100%; }
    .ais-right { order: 2; }
    .ais-left { order: 1; }
    .ais-image-wrap img.ais-preview { border-radius:4px; }
}

/* When image is right, wrapper will be reversed via JS/CSS by adding class ais-image-right */
.ais-image-right { flex-direction: row-reverse; }

/* Small helpers */
.ais-right { gap: 12px; }