/* The single Vape Deals slide retains its original card and dimensions. */
.vz-hero-carousel { position: relative; min-width: 0; }
.vz-hero-viewport { display: grid; position: relative; min-width: 0; max-width: 1668px; margin-inline: auto; }
.vz-hero-slide { grid-area: 1 / 1; min-width: 0; }
.vz-hero-slide[hidden], .vz-hero-controls[hidden], .vz-hero-pause[hidden] { display: none !important; }
.vz-hero-carousel.is-carousel .vz-hero-viewport { border-radius: 22px; background: #080c0b; box-shadow: 0 40px 90px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.08); }
.vz-hero-carousel.is-carousel .vd-card { height: 100%; box-shadow: none; }
.vz-hero-image { position: relative; min-height: 607px; height: 100%; border-radius: 22px; overflow: hidden; background: #080c0b; }
.vz-hero-image picture, .vz-hero-banner-link { display: block; width: 100%; height: 100%; }
.vz-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vz-hero-banner-link:focus-visible { outline: 4px solid var(--green); outline-offset: -6px; }
.vz-hero-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 8px 8px 0; position: relative; }
/* Also hides arrows in any page HTML still held by the staging cache. */
.vz-hero-arrow { display: none !important; }
.vz-hero-dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; max-width: calc(100% - 34px); }
.vz-hero-dot { position: relative; width: 26px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vz-hero-dot::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #8c9c92; opacity: .5; margin: auto; transition: opacity .15s ease, background .15s ease; }
.vz-hero-dot.is-active::before { background: #397457; opacity: 1; }
.vz-hero-dot:hover::before { opacity: 1; }
.vz-hero-pause { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #718078; cursor: pointer; font-size: 0; }
.vz-hero-pause:hover { color: #397457; }
.vz-hero-pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.vz-hero-pause .vz-hero-icon-play, .vz-hero-pause.is-paused .vz-hero-icon-pause { display: none; }
.vz-hero-pause.is-paused .vz-hero-icon-play { display: block; fill: currentColor; stroke: none; }
/* Retain the pause affordance while previously cached HTML expires. */
.vz-hero-pause:not(:has(svg))::before { content: ''; width: 7px; height: 9px; border-inline: 2px solid currentColor; }
.vz-hero-pause.is-paused:not(:has(svg))::before { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.vz-hero-controls button:focus-visible { outline: 2px solid #08b969; outline-offset: 1px; }
.vz-hero-carousel.is-carousel .vz-hero-slide.is-active { animation: vzHeroAppear .25s ease; }
@keyframes vzHeroAppear { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 1739px) {
	.vz-hero-carousel.is-carousel .vd-card { height: auto; }
	.vz-hero-image { min-height: 0; height: auto; }
	.vz-hero-image picture, .vz-hero-banner-link { height: auto; }
	.vz-hero-image img { position: static; display: block; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .vz-hero-carousel.is-carousel .vz-hero-slide.is-active { animation: none; } .vz-hero-dot::before { transition: none; } }