.vpsc-shell{
  --vpsc-gap: 14px;
  --vpsc-radius: 18px;
  --vpsc-card-w: 250px;
  --vpsc-card-h: 380px;
  margin: 26px 0;
}

.vpsc-rail{
  display:flex;
  gap:var(--vpsc-gap);
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0 8px;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scrollbar-color: rgba(13,35,71,.28) transparent;
}

.vpsc-rail::-webkit-scrollbar{ height:8px; }
.vpsc-rail::-webkit-scrollbar-track{ background:transparent; }
.vpsc-rail::-webkit-scrollbar-thumb{
  background:rgba(13,35,71,.24);
  border-radius:999px;
}

.vpsc-card,
.vpsc-slide-card{
  position:relative;
  display:flex;
  overflow:hidden;
  text-decoration:none !important;
  isolation:isolate;
  background:#e8edf5;
}

.vpsc-card{
  flex:0 0 var(--vpsc-card-w);
  width:var(--vpsc-card-w);
  min-height:var(--vpsc-card-h);
  border-radius:var(--vpsc-radius);
  box-shadow:0 12px 26px rgba(13,35,71,.08), 0 20px 42px rgba(13,35,71,.08);
  transition:transform .22s ease, box-shadow .22s ease;
}

.vpsc-card:hover,
.vpsc-card:focus-visible,
.vpsc-slide-card:hover,
.vpsc-slide-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(13,35,71,.10), 0 24px 48px rgba(13,35,71,.10);
}

.vpsc-card:focus-visible,
.vpsc-slide-card:focus-visible{ outline:none; }

.vpsc-media,
.vpsc-overlay,
.vpsc-content{
  position:absolute;
  inset:0;
}

.vpsc-media{
  background-size:cover;
  background-position:center center;
  transform:scale(1.01);
}

.vpsc-theme-light .vpsc-overlay{
  background:linear-gradient(180deg, rgba(6,16,36,0.04) 0%, rgba(6,16,36,0.12) 32%, rgba(6,16,36,0.58) 100%);
}

.vpsc-theme-dark .vpsc-overlay{
  background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.14) 26%, rgba(255,255,255,0.76) 100%);
}

.vpsc-content{
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding:18px;
}

.vpsc-title,
.vpsc-text,
.vpsc-cta{ display:block; }

.vpsc-theme-light .vpsc-title,
.vpsc-theme-light .vpsc-text,
.vpsc-theme-light .vpsc-cta{ color:#fff; }

.vpsc-theme-dark .vpsc-title,
.vpsc-theme-dark .vpsc-text,
.vpsc-theme-dark .vpsc-cta{ color:#10213f; }

.vpsc-title{
  font-size:20px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-0.02em;
}

.vpsc-text{
  font-size:13px;
  line-height:1.55;
  max-width:26ch;
  opacity:.94;
}

.vpsc-cta{
  margin-top:4px;
  width:max-content;
  max-width:100%;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.vpsc-theme-light .vpsc-cta{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.vpsc-theme-dark .vpsc-cta{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(16,33,63,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}

.vpsc-slider-shell{
  margin:30px 0;
}

.vpsc-slider{
  position:relative;
  width:100%;
}

.vpsc-slider-viewport{
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 18px 42px rgba(13,35,71,.10), 0 28px 64px rgba(13,35,71,.08);
}

.vpsc-slider-track{
  display:flex;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  touch-action:pan-y;
}

.vpsc-slide{
  flex:0 0 100%;
  width:100%;
}

.vpsc-slide-card{
  min-height:var(--vpsc-slider-h-desktop, 430px);
  width:100%;
  border-radius:22px;
  box-shadow:none;
}

.vpsc-slide-card .vpsc-content{
  padding:24px;
  gap:10px;
}

.vpsc-slide-card .vpsc-title{
  font-size:34px;
  max-width:12ch;
}

.vpsc-slide-card .vpsc-text{
  font-size:15px;
  line-height:1.6;
  max-width:56ch;
}

.vpsc-slide-card .vpsc-cta{
  min-height:38px;
  padding:10px 14px;
  font-size:13px;
}

.vpsc-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
  color:#10213f;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(13,35,71,.16);
}

.vpsc-slider-prev{ left:14px; }
.vpsc-slider-next{ right:14px; }
.vpsc-slider-arrow span{
  font-size:28px;
  line-height:1;
  margin-top:-2px;
}

.vpsc-slider-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

.vpsc-slider-dot{
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:rgba(13,35,71,.22);
  transition:transform .18s ease, background .18s ease, width .18s ease;
}

.vpsc-slider-dot.is-active{
  width:28px;
  background:rgba(13,35,71,.78);
}

@media (max-width: 1024px){
  .vpsc-shell{
    --vpsc-card-w: 220px;
    --vpsc-card-h: 340px;
  }

  .vpsc-title{ font-size:18px; }

  .vpsc-slide-card .vpsc-title{
    font-size:28px;
    max-width:14ch;
  }
}

@media (max-width: 767px){
  .vpsc-shell{
    --vpsc-gap: 12px;
    --vpsc-card-w: 190px;
    --vpsc-card-h: 300px;
    margin:22px 0;
  }

  .vpsc-rail{ padding-bottom:6px; }

  .vpsc-content{
    padding:14px;
    gap:6px;
  }

  .vpsc-title{ font-size:16px; }

  .vpsc-text{
    font-size:12px;
    line-height:1.48;
  }

  .vpsc-cta{
    min-height:32px;
    padding:7px 11px;
    font-size:11px;
  }

  .vpsc-slider-shell{
    margin:24px 0;
  }

  .vpsc-slide-card{
    min-height:var(--vpsc-slider-h-mobile, 290px);
    border-radius:18px;
  }

  .vpsc-slide-card .vpsc-content{
    padding:16px;
    gap:7px;
  }

  .vpsc-slide-card .vpsc-title{
    font-size:22px;
    max-width:14ch;
  }

  .vpsc-slide-card .vpsc-text{
    font-size:13px;
    line-height:1.52;
    max-width:28ch;
  }

  .vpsc-slider-arrow{
    width:38px;
    height:38px;
  }

  .vpsc-slider-prev{ left:10px; }
  .vpsc-slider-next{ right:10px; }
}









@media (max-width: 767px){

  /* important: parent wrappers must not clip the rail */
  .vpsc-shell,
  .woocommerce-Tabs-panel,
  .wc-tab,
  .entry-content{
    overflow: visible;
  }

  .vpsc-rail{
    /* tweak this if you want a little breathing room at edges */
    --vpsc-edge-gap: 0px;

    /* make the rail span the full viewport */
    width: 100vw;
    max-width: none;

    /* pull it out of the centered content container */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* keep first card aligned with the original content container */
    padding-left: calc(((100vw - 100%) / 2) + var(--vpsc-edge-gap));

    /* right side can reach the screen edge */
    padding-right: calc(env(safe-area-inset-right, 0px) + var(--vpsc-edge-gap));

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: calc(((100vw - 100%) / 2) + var(--vpsc-edge-gap));
    scroll-padding-right: calc(env(safe-area-inset-right, 0px) + var(--vpsc-edge-gap));
  }
}


@media (max-width: 767px){
  .vpsc-rail{
    --vpsc-edge-gap: 12px;

    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding-left: calc(((100vw - 100%) / 2) + var(--vpsc-edge-gap));
    padding-right: calc(env(safe-area-inset-right, 0px) + var(--vpsc-edge-gap) + 16px);

    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: calc(((100vw - 100%) / 2) + var(--vpsc-edge-gap));
    scroll-padding-right: calc(env(safe-area-inset-right, 0px) + var(--vpsc-edge-gap) + 16px);
  }
}