/* EAI Loop base styles */
.eai-loop { position: relative; }
.eai-loop .eai-loop-items { display: flex; flex-wrap: wrap; gap: var(--eai-gap, 16px); align-items: stretch; }
.eai-loop .eai-loop-item { flex: 0 0 100%; }

/* Grid layout */
.eai-layout-grid .eai-loop-items { display: grid; grid-template-columns: repeat(var(--eai-cols, 3), minmax(0, 1fr)); gap: var(--eai-gap, 16px); }
.eai-layout-grid .eai-loop-item { flex: initial; }

/* Carousel layout */
.eai-layout-carousel .eai-loop-items { overflow: hidden; display: flex; flex-wrap: nowrap; gap: var(--eai-gap, 16px); }
.eai-layout-carousel .eai-loop-item { flex: 0 0 calc(100% / var(--eai-slides, 1)); }
/* When Swiper is active, let Swiper control widths and spacing */
.eai-layout-carousel.swiper .eai-loop-items { gap: 0; }
.eai-layout-carousel.swiper .eai-loop-item { flex: 0 0 auto; width: auto; }
.eai-layout-carousel .eai-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: var(--eai-nav-bg, #fff); color: var(--eai-nav-color, #111); border:1px solid #ddd; border-radius: 999px; width: var(--eai-nav-size, 36px); height: var(--eai-nav-size, 36px); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.eai-layout-carousel .eai-prev { left: 6px; }
.eai-layout-carousel .eai-next { right: 6px; }

.eai-layout-carousel .eai-dots { display: flex; justify-content: center; margin-top: 10px; }
.eai-layout-carousel .eai-dots .slick-dots { display: flex !important; gap: 8px; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; }
.eai-layout-carousel .eai-dots .slick-dots li { margin: 0; padding: 0; }
.eai-layout-carousel .eai-dots .slick-dots button { width: var(--eai-dot-size, 8px); height: var(--eai-dot-size, 8px); border-radius: 50%; background: var(--eai-dot-color, #c4c4c4); cursor: pointer; border: none; padding: 0; font-size: 0; line-height: 0; }
.eai-layout-carousel .eai-dots .slick-dots .slick-active button { background: var(--eai-dot-active, #111111); }

/* Diagnostics */
.eai-note { background: #f6f7f7; border: 1px dashed #ccd0d4; padding: 6px 10px; border-radius: 4px; }

/* Pagination */
.eai-pagination { display:flex; justify-content:center; align-items:center; gap: 10px; margin-top: 14px; }
.eai-page-numbers { display:flex; gap: 6px; }
.eai-page-numbers button { min-width: 32px; height: 32px; border: 1px solid var(--eai-page-border, #ddd); background: var(--eai-page-bg, #fff); color: var(--eai-page-color, #222); cursor: pointer; border-radius: var(--eai-page-radius, 4px); }
.eai-page-numbers button[aria-current="true"] { background: var(--eai-page-active-bg, #111); color: var(--eai-page-active-color, #fff); border-color: var(--eai-page-active-bg, #111); }
.eai-page-prev, .eai-page-next, .eai-load-more { border: 1px solid var(--eai-page-border, #ddd); background: var(--eai-page-bg, #fff); color: var(--eai-page-color, #222); padding: 6px 12px; border-radius: var(--eai-page-radius, 4px); cursor: pointer; }