/* ===== CSS variables =====
Defaults are overridden inline via style="--var:value" on the wrapper.
*/
:root{
  --msr-star-size:16px;
  --msr-star-color:#111;
  --msr-badge-bg:#111;
  --msr-badge-color:#fff;
  --msr-radius:12px;
  --msr-card-bg:#fff;
  --msr-border-color:rgba(0,0,0,.08);
  --msr-text-color:#222;
}

/* ===== Grid (when not slider) ===== */
.msr-wrap{display:grid;gap:var(--msr-gap,16px)}
.msr-cols-1{grid-template-columns:1fr}
.msr-cols-2{grid-template-columns:repeat(2,1fr)}
.msr-cols-3{grid-template-columns:repeat(3,1fr)}
.msr-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.msr-cols-3,.msr-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.msr-cols-2,.msr-cols-3,.msr-cols-4{grid-template-columns:1fr}}

/* ===== Card ===== */
.msr-card{border:1px solid var(--msr-border-color);border-radius:var(--msr-radius);background:var(--msr-card-bg);color:var(--msr-text-color)}
.msr-card-inner{padding:16px}
.msr-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.msr-stars-wrap{font-size:var(--msr-star-size);line-height:1;color:var(--msr-star-color)}
.msr-star{opacity:.25;margin-right:2px}
.msr-star.is-on{opacity:1}
.msr-badge{font-size:12px;background:var(--msr-badge-bg);color:var(--msr-badge-color);border-radius:999px;padding:4px 8px;display:inline-block}
.msr-content{font-size:15px;line-height:1.5;margin:8px 0 10px}
.msr-footer{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px}
.msr-footer .msr-prod{width:100%;font-weight:600;margin-top:4px}
.msr-dot{opacity:.6}

/* ===== Extra styles ===== */
.msr-style-minimal .msr-card{border:none;border-left:3px solid var(--msr-star-color);background:#fafafa}
.msr-style-shadow .msr-card{box-shadow:0 10px 25px rgba(0,0,0,.07)}
.msr-style-quote .msr-card{background:#f9fafb;border:1px solid rgba(0,0,0,.06)}
.msr-style-quote .msr-card-inner{position:relative}
.msr-style-quote .msr-card-inner:before{content:'“';position:absolute;top:6px;left:10px;font-size:42px;opacity:.15;line-height:1}
.msr-style-badge .msr-card{position:relative}
.msr-style-badge .msr-card:before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--msr-star-color);border-top-left-radius:var(--msr-radius);border-top-right-radius:var(--msr-radius)}

/* ===== Slider ===== */
.msr-slider{display:flex;gap:var(--msr-gap,16px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px;margin-bottom:8px;scrollbar-width:none}
.msr-slider::-webkit-scrollbar{display:none}
.msr-slider .msr-card{min-width:calc(100%/var(--msr-per-view,1));scroll-snap-align:start}
@media(max-width:900px){.msr-slider .msr-card{min-width:calc(100%/var(--msr-per-view-md,var(--msr-per-view,1)))}} 
@media(max-width:640px){.msr-slider .msr-card{min-width:calc(100%/var(--msr-per-view-sm,1))}}

/* ===== Controls ===== */
.msr-slider-wrap{position:relative;overflow:visible;margin-bottom:12px}
.msr-prev,.msr-next{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:999px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.08);z-index:2}
.msr-prev{left:8px}.msr-next{right:8px}
.msr-nav-outside .msr-prev{left:calc(-1 * var(--msr-nav-offset,48px))}
.msr-nav-outside .msr-next{right:calc(-1 * var(--msr-nav-offset,48px))}
.msr-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.msr-dot-btn{width:8px;height:8px;border-radius:999px;background:rgba(0,0,0,.2);border:none}
.msr-dot-btn.is-active{background:var(--msr-star-color)}

/* ===== CTA button ===== */
.msr-cta{margin-top:14px}
.msr-cta-left{text-align:left}.msr-cta-center{text-align:center}.msr-cta-right{text-align:right}
.msr-btn{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--msr-star-color);color:#fff;text-decoration:none;font-weight:600}
.msr-btn:hover{opacity:.9}