.srb-reviews {
    --srb-star-color: #ffb400;
    --srb-star-empty: #e0e0e0;
    --srb-border:     #ececec;
    --srb-text:       #333;
    --srb-muted:      #777;
    --srb-gap:        14px;
}

.srb-title { margin: 0 0 16px; font-size: 1.25em; }

/* ---------- List / Grid ---------- */
.srb-items { display: flex; flex-direction: column; gap: var(--srb-gap); }
.srb-layout-grid .srb-items {
    display: grid;
    grid-template-columns: repeat(var(--srb-columns, 2), minmax(0, 1fr));
    gap: var(--srb-gap);
}
@media (max-width: 600px) {
    .srb-layout-grid .srb-items { grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */
.srb-item {
    border: 1px solid var(--srb-border);
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    box-sizing: border-box;
}
.srb-header { display: flex; align-items: center; gap: 10px; }
.srb-avatar {
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 50%;
    background: #2271b1; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px;
}
.srb-meta { display: flex; flex-direction: column; gap: 2px; }
.srb-name { font-weight: 600; color: var(--srb-text); font-size: .95em; }

.srb-stars-row { display: inline-flex; gap: 2px; line-height: 1; font-size: 1em; }
.srb-star { position: relative; display: inline-block; line-height: 1; }
.srb-star-bg { color: var(--srb-star-empty); }
.srb-star-fg {
    position: absolute; top: 0; left: 0;
    color: var(--srb-star-color);
    width: var(--srb-fill, 100%);
    overflow: hidden; white-space: nowrap;
}

.srb-text { margin-top: 10px; color: var(--srb-text); line-height: 1.5; }
.srb-empty { padding: 12px; border: 1px dashed var(--srb-border); border-radius: 8px; color: var(--srb-muted); }

/* ---------- Slider ---------- */
.srb-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.srb-track {
    display: flex;
    gap: var(--srb-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px;
    flex: 1 1 auto;
    scrollbar-width: thin;
}
.srb-track::-webkit-scrollbar { height: 8px; }
.srb-track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* each card takes (1 / per-view) of the track width */
.srb-slider .srb-item {
    flex: 0 0 auto;
    width: calc( ( 100% - ( var(--srb-per-view, 3) - 1 ) * var(--srb-gap) ) / var(--srb-per-view, 3) );
    scroll-snap-align: start;
}

.srb-nav {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--srb-border);
    background: #fff;
    color: var(--srb-text);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background .15s, opacity .15s;
}
.srb-nav:hover:not(:disabled) { background: #f5f5f5; }
.srb-nav:disabled { opacity: .35; cursor: default; }

/* mobile: always 1 card */
@media (max-width: 600px) {
    .srb-slider .srb-item { width: 85%; }
}

/* ---------- Editor-only inline panel ---------- */
.srb-editor-panel {
    margin-top: 18px;
    padding: 14px;
    border: 1px dashed #c9c9c9;
    border-radius: 8px;
    background: #fafafa;
}
.srb-editor-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.srb-hint {
    font-size: 12px;
    color: var(--srb-muted);
    margin: 4px 0 10px;
}
.srb-editor-panel .components-base-control { margin-bottom: 10px; }