/* v1.8.1 — v1.8 cards + upgraded ETA chip + glossy banner */
.mssc8-full{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.mssc8-wrap{
  --gap: 12px;
  --per-view: 2;            /* overridden by shortcode style */
  --steps-per-view: 2;
  background: linear-gradient(180deg, #f5f2ff 0%, #ffffff 100%);
  padding: 16px 14px;
}

/* Steps (2 visible) */
.mssc8-steps{ display:flex; gap:var(--gap); overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:#c7c0ff #efeaff; }
.mssc8-steps::-webkit-scrollbar{ height:8px; } .mssc8-steps::-webkit-scrollbar-track{ background:#efeaff; border-radius:999px; } .mssc8-steps::-webkit-scrollbar-thumb{ background:#c7c0ff; border-radius:999px; }
.mssc8-step{ background:#fff; border:1px solid #eceaff; border-radius:16px; 
  flex: 0 0 calc((100% - (var(--gap) * (var(--steps-per-view) - 1))) / var(--steps-per-view));
  max-width: calc((100% - (var(--gap) * (var(--steps-per-view) - 1))) / var(--steps-per-view));
  padding: 12px 14px; box-shadow:0 2px 6px rgba(20,20,44,.08);
}
.mssc8-step-label{ display:inline-block; font-weight:800; color:#6b5bff; background:#f3f2ff; padding:5px 10px; border-radius:10px; font-size:13px; }
.mssc8-step-text{ margin:8px 0 0; font-weight:800; color:#0f122e; }

/* Banner — glossy sheen + depth */
.mssc8-banner{
  margin: 10px 0 12px;
  background:linear-gradient(135deg, #6b5bff 0%, #7a6cff 100%);
  color:#fff; font-weight:900; border-radius:14px; padding:12px 16px;
  display:flex; align-items:center; gap:10px; font-size:18px; letter-spacing:.2px;
  position:relative; box-shadow:0 8px 20px rgba(107,91,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
  overflow:hidden;
}
.mssc8-banner::before{
  content:''; position:absolute; inset:0; border-radius:14px;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.06);
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .mssc8-banner::after{
    content:''; position:absolute; top:0; left:-30%; width:34%; height:100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: mssc8_sheen 3.4s linear infinite;
  }
  @keyframes mssc8_sheen { 0%{ left:-30%; } 100%{ left:120%; } }
}
.mssc8-bolt{ font-size:18px; }

/* Carousel (2 visible) */
.mssc8-carousel{ display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#c7c0ff #efeaff; padding-bottom:6px; }
.mssc8-carousel::-webkit-scrollbar{ height:8px; } .mssc8-carousel::-webkit-scrollbar-track{ background:#efeaff; border-radius:999px; } .mssc8-carousel::-webkit-scrollbar-thumb{ background:#c7c0ff; border-radius:999px; }

/* Card — exactly v1.8 */
.mssc8-card{
  scroll-snap-align:start;
  background:#fff; border:1px solid #eceaff; border-radius:16px;
  flex: 0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  max-width: calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  box-shadow:0 3px 8px rgba(20,20,44,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mssc8-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,20,44,.12); }

.mssc8-media{ position:relative; padding: 12px 12px 0; }
.mssc8-img{ display:block; border-radius:14px; overflow:hidden; background:#fff; }
.mssc8-image{ width:100%; height:130px; object-fit:contain; }

/* Sub badge: subtle and small */
.mssc8-badge{ position:absolute; left:14px; top:12px; background:#fff7d6; color:#835f00; border:1px solid #ffe197; font-weight:800; font-size:11px; padding:4px 8px; border-radius:9px; box-shadow:0 1px 2px rgba(0,0,0,.04); }

.mssc8-body{ padding: 12px 12px 14px; display:grid; gap:8px; }
.mssc8-title{ margin:0; font-weight:900; color:#10122a; font-size:15px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mssc8-title a{ color:inherit; text-decoration:none; }

.mssc8-price{ display:flex; align-items:baseline; gap:8px; }
.mssc8-now{ font-weight:900; font-size:17px; color:#11122a; }
.mssc8-was{ text-decoration:line-through; color:#97a0b5; font-weight:700; font-size:14px; }

/* ADD button: v1.8 */
.mssc8-buyrow{ display:block; }
.mssc8-add{ display:block; width:100%; text-align:center; height:38px; line-height:34px; border:2px solid #ff4d85; color:#ff4d85; background:#fff; border-radius:12px; font-weight:900; text-decoration:none; letter-spacing:.2px; box-shadow:0 3px 8px rgba(255,77,133,.14); font-size:15px; }
.mssc8-add:hover{ background:#ff4d85; color:#fff; }

/* Meta: upgraded ETA chip (from v1.9) */
.mssc8-meta{ display:flex; align-items:center; gap:6px; }
.mssc8-eta{
  position:relative;
  background: linear-gradient(180deg,#edf4ff 0%, #e3eeff 100%);
  border:1px solid #cfe0ff;
  color:#2f67ff; font-weight:900; font-size:12px; padding:7px 12px 7px 30px; border-radius:999px; display:inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(29,71,255,.06);
}
.mssc8-eta::before{
  content: '⚡'; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-size:14px;
}
@media (prefers-reduced-motion: no-preference){
  .mssc8-eta::after{
    content:''; position:absolute; left:-25%; top:0; width:35%; height:100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: mssc8_shine2 3.6s linear infinite;
    border-radius:999px;
  }
  @keyframes mssc8_shine2 { 0%{ left:-25%; } 100%{ left:120%; } }
}

.mssc8-empty{ padding:22px; color:#8090a3; }