.mreels{margin:28px 0;--mr-accent:#6A1A2B}
.mreels-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.mreels-head h2{margin:0;font-size:clamp(20px,2.4vw,28px)}
.mreels-nav button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.12);background:#fff;font-size:22px;cursor:pointer;margin-left:6px}
.mreels--rail .mreels-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.mreels--rail .mreels-track::-webkit-scrollbar{display:none}
.mreels--rail .mreels-card{flex:0 0 calc((100% - 12px*(var(--mr-cols) - 1))/var(--mr-cols));min-width:140px;scroll-snap-align:start}
.mreels--grid .mreels-track{display:grid;grid-template-columns:repeat(var(--mr-cols),1fr);gap:12px}
.mreels-card{position:relative;aspect-ratio:9/16;border:0;padding:0;border-radius:16px;overflow:hidden;background:#111;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.5);transition:transform .2s}
.mreels-card:hover{transform:translateY(-3px)}
.mreels-card>img{width:100%;height:100%;object-fit:cover;display:block}
.mreels-play{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center}
.mreels-play svg{width:16px;height:16px}
.mreels-tag{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border-radius:10px;padding:5px 8px 5px 5px;font-size:12px;font-weight:700;color:#201a1c}
.mreels-tag img{width:28px;height:28px;border-radius:7px;object-fit:cover}
@media(max-width:767px){.mreels--rail .mreels-card{flex-basis:44%}.mreels--grid .mreels-track{grid-template-columns:repeat(2,1fr)}}
/* player */
.mreels-player{position:fixed;inset:0;z-index:99999;background:rgba(10,8,8,.96);display:flex;align-items:center;justify-content:center;gap:14px}
.mreels-player[hidden]{display:none!important}
html.mreels-open{overflow:hidden}
.mreels-stage{position:relative;width:min(430px,94vw);height:min(92vh,764px);border-radius:18px;overflow:hidden;background:#000}
.mreels-video{position:absolute;inset:0}
.mreels-video iframe,.mreels-video video{width:100%;height:100%;border:0;display:block;object-fit:cover;background:#000}
.mreels-meta{position:absolute;left:0;right:0;bottom:0;padding:60px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;pointer-events:none}
.mreels-title{font-size:13px;font-weight:600;margin-bottom:10px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.mreels-shop{pointer-events:auto;display:flex;align-items:center;gap:10px;background:#fff;color:#201a1c;text-decoration:none;border-radius:14px;padding:8px 10px}
.mreels-shop img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.mreels-shop span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mreels-shop b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mreels-shop i{font-style:normal;font-size:12px;color:var(--mr-accent,#6A1A2B);font-weight:700}
.mreels-shop em{font-style:normal;background:var(--mr-accent,#6A1A2B);color:#fff;font-size:12px;font-weight:800;padding:8px 12px;border-radius:999px;white-space:nowrap}
.mreels-close{position:absolute;top:14px;right:14px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:30px;cursor:pointer}
.mreels-arrow{width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;cursor:pointer;transform:rotate(90deg)}
@media(max-width:767px){.mreels-arrow{display:none}.mreels-stage{width:100vw;height:100vh;border-radius:0}}