/* Wild Vape Stop - custom bento hero (light theme) */
.wvs-hero{ max-width:1240px; margin:16px auto 6px; padding:0 16px; box-sizing:border-box; }
.wvs-hero *{ box-sizing:border-box; }

.wvs-hero__grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(12,1fr);
  grid-template-areas:
    "hero hero hero hero hero hero hero hero prod prod prod prod"
    "hero hero hero hero hero hero hero hero promo promo promo promo"
    "disp disp disp pods pods pods stlth stlth stlth stlth stlth stlth";
}

.wvs-tile{
  position:relative; display:block; overflow:hidden;
  border-radius:18px; background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 6px 22px rgba(15,23,42,.06);
  text-decoration:none; color:#0f172a;
  transition:transform .25s ease, box-shadow .25s ease;
}
.wvs-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(15,23,42,.13); }
.wvs-tile:focus-visible{ outline:3px solid #e0231a; outline-offset:2px; }
.wvs-tile img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.wvs-tile:hover img{ transform:scale(1.05); }

.wvs-hero__hero{ grid-area:hero; min-height:420px; }

/* hero rotator (fade between banners) */
.wvs-rotator{ position:relative; }
.wvs-rotator .wvs-slide{ position:absolute; inset:0; display:block; opacity:0; transition:opacity .8s ease; }
.wvs-rotator .wvs-slide.is-active{ opacity:1; z-index:1; }
.wvs-rotator .wvs-slide img{ width:100%; height:100%; object-fit:cover; }
.wvs-rotator:hover .wvs-slide img{ transform:none; }
.wvs-dots{ position:absolute; z-index:3; left:0; right:0; bottom:12px; display:flex; gap:7px; justify-content:center; }
.wvs-dot{ width:9px; height:9px; padding:0; border:none; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.18); transition:width .25s, background .25s; }
.wvs-dot.is-active{ background:#fff; width:22px; }
.wvs-dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.wvs-hero__prod{ grid-area:prod; display:flex; flex-direction:column; background:#fff; }
.wvs-hero__promo{ grid-area:promo; }
.wvs-hero__disp{ grid-area:disp; min-height:150px; }
.wvs-hero__pods{ grid-area:pods; min-height:150px; }
.wvs-hero__stlth{ grid-area:stlth; min-height:150px; }

/* featured product tile */
.wvs-prod-img{ flex:1; display:flex; align-items:center; justify-content:center; padding:14px; min-height:0; }
.wvs-prod-img img{ width:auto !important; height:auto !important; max-height:155px; object-fit:contain; }
.wvs-tile__label{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-top:1px solid rgba(15,23,42,.06); font-size:14px; }
.wvs-tile__label b{ font-weight:700; }
.wvs-shop{ display:inline-flex; align-items:center; gap:4px; color:#e0231a; font-weight:700; white-space:nowrap; }
.wvs-shop svg{ width:15px; height:15px; }

/* category tiles */
.wvs-cat .wvs-chip{
  position:absolute; left:12px; bottom:12px;
  background:rgba(255,255,255,.94); color:#0f172a;
  font-weight:700; font-size:14px; padding:7px 13px;
  border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.14);
}

/* promo tile */
.wvs-hero__promo{
  border:none; color:#fff; padding:18px 18px 16px;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(135deg,#e0231a 0%,#9e0f0a 100%);
}
.wvs-hero__promo:hover{ box-shadow:0 16px 36px rgba(224,35,26,.35); }
.wvs-promo-kicker{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.wvs-promo-title{ font-size:34px; line-height:1; font-weight:800; margin:6px 0 4px; }
.wvs-promo-code{ font-size:13px; opacity:.95; }
.wvs-promo-code b{ background:rgba(255,255,255,.22); padding:2px 8px; border-radius:6px; letter-spacing:.04em; }
.wvs-count{ display:flex; gap:7px; margin-top:13px; }
.wvs-count div{ background:rgba(255,255,255,.16); border-radius:9px; padding:6px 0; text-align:center; flex:1; }
.wvs-count b{ display:block; font-size:18px; line-height:1; font-weight:800; }
.wvs-count span{ font-size:9px; opacity:.85; text-transform:uppercase; letter-spacing:.06em; }

/* stlth strip */
.wvs-strip{ display:flex; align-items:center; gap:14px; background:#fff; padding:12px 18px; }
.wvs-strip__img{ flex:0 0 auto; width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.wvs-strip__img img{ width:auto !important; height:auto !important; max-height:112px; object-fit:contain; }
.wvs-strip__text{ display:flex; flex-direction:column; gap:5px; }
.wvs-strip__kicker{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#64748b; }
.wvs-strip__title{ font-size:23px; font-weight:800; line-height:1.05; color:#0f172a; }

/* trust strip (replaces the old odd Flatsome bar) */
.wvs-trust{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.wvs-trust__item{
  flex:1 1 0; min-width:185px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#f6f7f9; border:1px solid rgba(15,23,42,.06);
  border-radius:14px; padding:12px 14px;
  font-size:13.5px; font-weight:600; color:#0f172a; line-height:1.2; text-align:center;
}
.wvs-trust__item svg{ width:19px; height:19px; flex:0 0 auto; color:#e0231a; }

/* ---- tablet ---- */
@media (max-width:900px){
  .wvs-hero__grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "hero hero"
      "prod promo"
      "disp pods"
      "stlth stlth";
  }
  .wvs-hero__hero{ min-height:0; aspect-ratio:5 / 3; }
}

/* ---- phone ---- */
@media (max-width:560px){
  .wvs-hero{ margin-top:10px; }
  .wvs-hero__grid{
    gap:11px;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "hero hero"
      "promo promo"
      "prod prod"
      "disp pods"
      "stlth stlth";
  }
  /* full ad banner ratio on mobile (rotator slides are absolute) */
  .wvs-hero__hero{ min-height:0; aspect-ratio:5 / 3; }
  .wvs-prod-img img{ max-height:135px; }
  .wvs-promo-title{ font-size:30px; }
  .wvs-strip__img{ width:96px; height:96px; }
  .wvs-strip__img img{ max-height:90px; }
  .wvs-strip__title{ font-size:20px; }
  .wvs-trust__item{ flex:1 1 calc(50% - 10px); min-width:0; font-size:12px; padding:11px 8px; gap:7px; }
  .wvs-trust__item svg{ width:17px; height:17px; }
}
@media (max-width:380px){
  .wvs-trust__item{ flex:1 1 100%; }
}

@media (prefers-reduced-motion: reduce){
  .wvs-tile,.wvs-tile img,.wvs-rotator .wvs-slide{ transition:none; }
  .wvs-tile:hover{ transform:none; }
  .wvs-tile:hover img{ transform:none; }
}