.svpg-wrap{--svpg-cols:3;--svpg-gap:14px;--svpg-scroll-w:62%;width:100%;box-sizing:border-box}
.svpg-wrap *,.svpg-wrap *::before,.svpg-wrap *::after{box-sizing:border-box}
.svpg-grid{display:grid;grid-template-columns:repeat(var(--svpg-cols),minmax(0,1fr));gap:var(--svpg-gap)}

.svpg-card{--svpg-overlay:rgba(8,12,24,.78);--svpg-bar:#2f6bff;background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(15,23,42,.08)}

/* media */
.svpg-media{position:relative;aspect-ratio:2/3;background:linear-gradient(160deg,#1e293b,#0f172a);overflow:hidden;cursor:pointer;isolation:isolate}
.svpg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.svpg-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;transition:opacity .25s ease;pointer-events:none}
.svpg-card.is-playing .svpg-thumb{opacity:0}
.svpg-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,var(--svpg-overlay),transparent);z-index:2;pointer-events:none}

.svpg-duration{position:absolute;top:8px;left:8px;z-index:3;background:rgba(15,23,42,.62);color:#fff;font-size:11px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;backdrop-filter:blur(4px);font-variant-numeric:tabular-nums}
.svpg-duration:empty{display:none}

.svpg-mute{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.62);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}
.svpg-mute svg{width:16px;height:16px;fill:#fff}
.svpg-mute .svpg-i-on{display:none}
.svpg-mute.is-unmuted .svpg-i-on{display:block}
.svpg-mute.is-unmuted .svpg-i-off{display:none}

.svpg-play{position:absolute;top:50%;left:50%;z-index:3;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.72);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s,transform .2s}
.svpg-play svg{width:46%;height:46%;fill:#fff;margin-left:6%}
.svpg-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.svpg-card.is-playing .svpg-play{opacity:0;pointer-events:none}
.svpg-card.is-playing .svpg-media:hover .svpg-play{opacity:.9;pointer-events:auto}

.svpg-caption{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;gap:7px;align-items:stretch;pointer-events:none}
.svpg-bar{flex:0 0 3px;border-radius:3px;background:var(--svpg-bar)}
.svpg-cap-text{min-width:0}
.svpg-title{color:#fff;font-size:13px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svpg-sub{color:rgba(255,255,255,.92);font-size:10.5px;line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* footer */
.svpg-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;margin-top:auto}
.svpg-meta{min-width:0;flex:1 1 auto}
.svpg-rating{font-size:11px;color:#475569;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svpg-star{color:#f5a623;font-size:12px}
.svpg-rate{color:#0f172a;font-weight:700}
.svpg-rev{color:#64748b}
.svpg-prices{margin-top:2px;line-height:1.2;white-space:nowrap}
.svpg-price{font-size:16px;font-weight:800;color:#0f172a}
.svpg-old{font-size:11px;color:#94a3b8;text-decoration:line-through;margin-left:3px}

.svpg-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:#0b1f4d;color:#fff;border:0;border-radius:8px;padding:9px 13px;font-size:13px;font-weight:600;line-height:1;cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s}
.svpg-btn .svpg-cart{width:15px;height:15px;fill:currentColor}
.svpg-btn:hover{background:#2f6bff;color:#fff}
.svpg-btn.is-loading{opacity:.65;pointer-events:none}
.svpg-btn.is-added{background:#15803d}

.svpg-btn:focus-visible,.svpg-play:focus-visible,.svpg-mute:focus-visible{outline:2px solid #2f6bff;outline-offset:2px}

/* tablet */
@media (max-width:1024px){
  .svpg-price{font-size:15px}
}

/* mobile */
@media (max-width:767px){
  .svpg-title{font-size:12px}
  .svpg-sub{font-size:10px}
  .svpg-foot{padding:8px;gap:6px}
  .svpg-price{font-size:14px}
  .svpg-btn{padding:8px 10px;font-size:12px}
  .svpg-btn .svpg-cart{width:13px;height:13px}
  .svpg-mute{width:26px;height:26px}

  .svpg-m-scroll .svpg-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .svpg-m-scroll .svpg-grid::-webkit-scrollbar{display:none}
  .svpg-m-scroll .svpg-card{flex:0 0 var(--svpg-scroll-w);scroll-snap-align:start}
}

@media (max-width:360px){
  .svpg-foot{flex-wrap:wrap}
  .svpg-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .svpg-play,.svpg-btn{transition:none}
}

/* ---- Theme-proof overrides (themes style <button> and <svg> globally) ---- */
.svpg-wrap .svpg-duration{background:var(--svpg-badge-bg,rgba(15,23,42,.62))}
.svpg-wrap .svpg-media button.svpg-play,
.svpg-wrap .svpg-media button.svpg-mute{
  -webkit-appearance:none!important;appearance:none!important;
  position:absolute!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:50%!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:0!important;line-height:1!important;
  text-transform:none!important;letter-spacing:normal!important;cursor:pointer;z-index:4!important;
}
.svpg-wrap .svpg-media button.svpg-play{
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  width:var(--svpg-play-size,54px)!important;height:var(--svpg-play-size,54px)!important;
  background:var(--svpg-play-bg,rgba(15,23,42,.72))!important;
  transform:translate(-50%,-50%)!important;
}
.svpg-wrap .svpg-media button.svpg-play:hover{transform:translate(-50%,-50%) scale(1.06)!important}
.svpg-wrap .svpg-media button.svpg-mute{
  top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;
  width:28px!important;height:28px!important;
  background:var(--svpg-badge-bg,rgba(15,23,42,.62))!important;
}
.svpg-wrap .svpg-media button svg{display:block!important;flex:none!important;max-width:none!important}
.svpg-wrap .svpg-media button.svpg-play svg{
  width:calc(var(--svpg-play-size,54px)*.46)!important;height:calc(var(--svpg-play-size,54px)*.46)!important;margin-left:6%!important;
}
.svpg-wrap .svpg-media button.svpg-play svg,
.svpg-wrap .svpg-media button.svpg-play svg path{fill:var(--svpg-play-icon,#fff)!important}
.svpg-wrap .svpg-media button.svpg-mute svg{width:16px!important;height:16px!important}
.svpg-wrap .svpg-media button.svpg-mute svg,
.svpg-wrap .svpg-media button.svpg-mute svg path{fill:var(--svpg-mute-icon,#fff)!important}
.svpg-wrap .svpg-media button.svpg-mute .svpg-i-on{display:none!important}
.svpg-wrap .svpg-media button.svpg-mute.is-unmuted .svpg-i-on{display:block!important}
.svpg-wrap .svpg-media button.svpg-mute.is-unmuted .svpg-i-off{display:none!important}
.svpg-wrap .svpg-card.is-playing button.svpg-play{opacity:0!important;pointer-events:none!important}
.svpg-wrap .svpg-card.is-playing .svpg-media:hover button.svpg-play{opacity:.9!important;pointer-events:auto!important}

.svpg-wrap button.svpg-btn,.svpg-wrap a.svpg-btn{box-shadow:none;text-transform:none;letter-spacing:normal;min-height:0;height:auto;text-decoration:none}
.svpg-wrap .svpg-btn svg,.svpg-wrap .svpg-btn svg path{fill:currentColor!important;display:block;flex:none}
.svpg-wrap .svpg-btn svg{width:15px!important;height:15px!important}

@media (max-width:767px){
  .svpg-wrap .svpg-media button.svpg-mute{width:26px!important;height:26px!important}
  .svpg-wrap .svpg-btn svg{width:13px!important;height:13px!important}
}

/* ---- Vertical marquee strip ---- */
.svpg-marq{--m1:#16a34a;--m2:#4ade80;position:absolute;top:0;right:0;bottom:0;width:var(--svpg-marq-w,17%);z-index:3;display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;background:linear-gradient(180deg,var(--m1),var(--m2));box-shadow:inset 2px 0 0 rgba(255,255,255,.6),inset 8px 0 14px -6px rgba(255,255,255,.35);color:#fff;pointer-events:none;overflow:hidden}
.svpg-marq-icon{flex:none;font-size:20px;line-height:1;margin-bottom:6px}
.svpg-marq-track{flex:1 1 auto;min-height:0;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent)}
.svpg-marq-inner{display:flex;flex-direction:column;align-items:center;width:100%;animation:svpg-marq-up var(--svpg-marq-speed,8s) linear infinite;will-change:transform}
.svpg-marq-group{display:flex;flex-direction:column;align-items:center;flex:none;gap:18px;padding-bottom:18px}
.svpg-marq-text{writing-mode:vertical-rl;white-space:nowrap;font-size:15px;font-weight:800;letter-spacing:.03em;line-height:1.1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.svpg-marq-down .svpg-marq-inner{animation-direction:reverse}
.svpg-marq-pause .svpg-media:hover .svpg-marq-inner{animation-play-state:paused}
.svpg-marq-chev{flex:none;margin-top:6px;line-height:0;color:#fff;animation:svpg-chev 1.2s ease-in-out infinite}
.svpg-wrap .svpg-marq-chev svg{display:block;width:22px!important;height:22px!important}
.svpg-wrap .svpg-marq-chev svg,.svpg-wrap .svpg-marq-chev svg path{fill:none!important;stroke:#fff!important}
@keyframes svpg-marq-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes svpg-chev{0%,100%{transform:translateY(2px);opacity:.7}50%{transform:translateY(-3px);opacity:1}}

/* make room for the strip */
.svpg-card--marq .svpg-caption{right:calc(var(--svpg-marq-w,17%) + 8px)}
.svpg-wrap .svpg-card--marq .svpg-media button.svpg-mute{right:calc(var(--svpg-marq-w,17%) + 8px)!important}
.svpg-wrap .svpg-card--marq .svpg-media button.svpg-play{left:calc((100% - var(--svpg-marq-w,17%))/2)!important}

@media (max-width:767px){
  .svpg-marq{padding:6px 0 4px}
  .svpg-marq-icon{font-size:16px;margin-bottom:4px}
  .svpg-marq-text{font-size:12px}
  .svpg-marq-group{gap:14px;padding-bottom:14px}
  .svpg-wrap .svpg-marq-chev svg{width:18px!important;height:18px!important}
}
@media (prefers-reduced-motion:reduce){
  .svpg-marq-inner,.svpg-marq-chev{animation:none}
}