/* /assets/widgets/vg-slider.v4.css */

:root{
  --vg4-a1:#ff6a00;
  --vg4-a2:#ff3cac;
  --vg4-a3:#6a5cff;
  --vg4-radius:14px;
  --vg4-shadow:0 8px 30px rgba(12,15,40,.08);
  --vg4-muted:#444;
}

.vg-slider4{ box-sizing:border-box; width:100%; margin:0 0 18px; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.vg4-head{ padding:10px 12px 6px; }
.vg4-title{ margin:0 0 4px; font-size:clamp(1rem,1.6vw,1.15rem); color:#111; font-weight:900; }
.vg4-sub{ margin:0 0 10px; color:var(--vg4-muted); font-size:.95rem; }

.vg4-cta{ display:inline-block; margin:6px 0 12px; padding:8px 12px; border-radius:10px;
  background:linear-gradient(90deg,rgba(255,110,74,.08),rgba(255,60,172,.06));
  border:1px solid rgba(255,110,74,.12);
  box-shadow:var(--vg4-shadow);
}
.vg4-ctaText{
  display:inline-block;
  font-weight:900;
  font-size:.95rem;
  background:linear-gradient(90deg,var(--vg4-a1),var(--vg4-a2),var(--vg4-a3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% auto;
  animation:vg4Flash 3s linear infinite;
}
@keyframes vg4Flash{
  0%{background-position:0% 50%;transform:translateY(0)}
  50%{background-position:100% 50%;transform:translateY(-2px)}
  100%{background-position:0% 50%;transform:translateY(0)}
}

.vg4-shell{
  position:relative;
  width:calc(100% - 24px);
  margin:0 12px 10px;
  border-radius:var(--vg4-radius);
  overflow:hidden;
  background:linear-gradient(180deg,#fff,#fffaf8);
  border:1px solid rgba(0,0,0,.04);
  box-shadow:var(--vg4-shadow);
}

.vg4-viewport{ overflow:hidden; outline:none; }
.vg4-track{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  transition:transform 420ms cubic-bezier(.22,.9,.2,1);
  will-change:transform;
}
.vg4-item{ flex:0 0 100%; }

.vg4-link{ display:block; width:100%; color:inherit; text-decoration:none; }
.vg4-card{ position:relative; min-height:clamp(200px,32vh,420px); }
.vg4-imgWrap{ width:100%; min-height:200px; background:linear-gradient(180deg,#f7f3f8,#fff7f3); }
.vg4-img{ width:100%; height:100%; object-fit:cover; display:block; }

.vg4-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:linear-gradient(90deg,rgba(10,10,12,.62),rgba(10,10,12,.40));
  color:#fff;
  border-top:1px solid rgba(255,255,255,.06);
}
.vg4-cardTitle{
  font-size:clamp(.95rem,1.2vw,1.05rem);
  line-height:1.2;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-weight:900;
}

.vg4-buy{
  display:inline-block;
  background:linear-gradient(90deg,var(--vg4-a2),var(--vg4-a3));
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  font-weight:900;
  user-select:none;
  box-shadow:0 8px 18px rgba(106,92,255,.18);
}

.vg4-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35));
  color:#fff;
  border:0;
  padding:10px;
  border-radius:10px;
  z-index:20;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.vg4-prev{ left:10px; }
.vg4-next{ right:10px; }

.vg4-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:10px 0 12px;
}
.vg4-dot{
  width:12px; height:12px; border-radius:50%;
  border:0; cursor:pointer;
  background:linear-gradient(90deg,#fff,#eee);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.vg4-dot[aria-pressed="true"]{
  background:linear-gradient(90deg,var(--vg4-a1),var(--vg4-a3));
  transform:scale(1.12);
  box-shadow:0 6px 18px rgba(106,92,255,.14);
}

.vg4-nav:focus,.vg4-dot:focus,.vg4-link:focus{
  outline:2px solid rgba(106,92,255,.65);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .vg4-ctaText{ animation:none!important; }
  .vg4-track{ transition:none!important; }
}