.wcsvf-feed{position:relative; --wcsvf-aspect:4/5; --wcsvf-gap:16px;}
.wcsvf-viewport{position:relative;width:100%;overflow:hidden;}
.wcsvf-track{display:flex;gap:var(--wcsvf-gap);}
.wcsvf-slide{position:relative;flex:0 0 auto;scroll-snap-align:center;}
.wcsvf-video-wrap{overflow:hidden;border-radius:16px;background:#000;}
.wcsvf-video{width:100%;height:100%;object-fit:cover;display:block;}
/* Cards */
.wcsvf--cards .wcsvf-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.wcsvf--cards .wcsvf-video-wrap{aspect-ratio:var(--wcsvf-aspect);}
.wcsvf--cards .wcsvf-slide{min-width:calc(100% / var(--wcsvf-cards));}
:root{--wcsvf-cards:6;--wcsvf-cards-md:3;--wcsvf-cards-sm:2.5;}
.wcsvf--cards{--wcsvf-cards:var(--cards,6);--wcsvf-cards-md:var(--cards-md,3);--wcsvf-cards-sm:var(--cards-sm,2.5);}
@media (max-width:1024px){ .wcsvf--cards .wcsvf-slide{min-width:calc(100%/var(--wcsvf-cards-md));} }
@media (max-width:768px){ .wcsvf--cards .wcsvf-slide{min-width:calc(100%/var(--wcsvf-cards-sm));} }
/* Arrows */
.wcsvf-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:0;width:40px;height:40px;border-radius:999px;z-index:3;}
.wcsvf-prev{left:8px;} .wcsvf-next{right:8px;}
/* Lightbox */
.wcsvf-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;z-index:9999;}
.wcsvf-lightbox.active{display:block;}
.wcsvf-lightbox-inner{position:relative;width:100%;height:100%;}
.wcsvf-lightbox-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.wcsvf-lightbox-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:999px;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:22px;z-index:2;}
.wcsvf-lightbox-prev,.wcsvf-lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:20px;z-index:2;}
.wcsvf-lightbox-prev{left:8px;} .wcsvf-lightbox-next{right:8px;}
/* Bottom card */
.wcsvf-card{position:absolute;left:50%;transform:translateX(-50%);bottom:86px;display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;width:min(680px,92%);padding:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.wcsvf-card-thumb img{width:56px;height:56px;border-radius:12px;object-fit:cover;}
.wcsvf-card-title{font-weight:700;font-size:12px;line-height:1.2;}
.wcsvf-card-price{color:#2b53e5;font-weight:600;}
.wcsvf-card-cta{background:#2b53e5;color:#fff;text-decoration:none;padding:10px 14px;border-radius:12px;font-weight:600;}
/* Prevent theme video UI */
.wcsvf-feed .mejs-container,.wcsvf-feed .mejs-controls,.wcsvf-feed .mejs-overlay{display:none!important;}

/* --- WCSVF Layout Fix Patch --- */
.wcsvf-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto; /* allow horizontal scroll */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.wcsvf--cards .wcsvf-slide {
  flex: 0 0 calc(100% / var(--wcsvf-cards));
  min-width: calc(100% / var(--wcsvf-cards));
  scroll-snap-align: start;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .wcsvf--cards .wcsvf-slide {
    flex: 0 0 calc(100% / var(--wcsvf-cards-md));
    min-width: calc(100% / var(--wcsvf-cards-md));
  }
}

@media (max-width: 768px) {
  .wcsvf--cards .wcsvf-slide {
    flex: 0 0 calc(100% / var(--wcsvf-cards-sm));
    min-width: calc(100% / var(--wcsvf-cards-sm));
  }
}

/* Ensure videos fill slide cleanly */
.wcsvf-video-wrap {
  aspect-ratio: var(--wcsvf-aspect);
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}
.wcsvf-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wcsvf-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  z-index: 3;
  transition: background .2s;
}
.wcsvf-play-btn:hover { background: rgba(0,0,0,0.8); }

.wcsvf-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  z-index: 3;
  transition: background .2s;
}
.wcsvf-play-btn:hover { background: rgba(0,0,0,0.8); }
/*
.wcsvf-mute{
  position:absolute; top:12px; right:56px;   
  width:36px; height:36px; border-radius:999px; border:0;
  background:rgba(255,255,255,.2); color:#fff; font-size:18px;
  z-index:22; display:flex; align-items:center; justify-content:center;
}

*/

/* Mute button: lower-right, above bottom card & below vertical center */
.wcsvf-mute{
  position:absolute;
  right:8px;
  bottom: 35%;        /* adjust if your bottom card is taller/shorter */
  width:45px; height:45px;
  border-radius:999px; border:0;
  background:rgba(0,0,0,.35);
  color:#fff; font-size:18px;
  z-index:22;
  display:flex; align-items:center; justify-content:center;
}
.wcsvf-mute:hover{ background:rgba(0,0,0,.55); }

.wcsvf-mute svg { display:block; }