/* Root */
.mvc-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    --mvc-gap: 10px;
  }
  
  .mvc-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    cursor: grab;
  }
  
  .mvc-track:active {
    cursor: grabbing;
  }
  
  .mvc-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--mvc-gap);
    box-sizing: border-box;
    min-width: 33.3333%; /* 3 on desktop by default */
  }
  
  .mvc-thumb {
    position: relative;
    width: 100%;
    height: 400px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0.6;
    transform: scale(0.9);
    transition: all 0.4s ease;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .mvc-slide.active .mvc-thumb {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }
  
  .mvc-thumb img, .mvc-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Play button */
  .mvc-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 60px; height: 60px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display:flex;justify-content:center;align-items:center;
    pointer-events: none; /* ensure click hits .mvc-thumb */
  }
  .mvc-play::before{
    content:"";
    width:0;height:0;
    border-left:20px solid #fff;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
  }
  
  /* Dots (pill) */
  .mvc-dots {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 8px;
  }
  .mvc-dots .dot {
    width: 30px;
    height: 8px;
    border-radius: 20px;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s;
  }
  .mvc-dots .dot.active { background: #d33; }
  
  /* Modal */
  .mvc-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
  }
  .mvc-modal .mvc-close {
    position: absolute;
    top: 20px; right: 30px;
    font-size: 30px; color:#fff; cursor:pointer;
  }
  .mvc-modal .mvc-modal-inner {
    width: 80%; height: 70%;
    max-width: 1200px;
    position: relative;
  }
  .mvc-modal iframe, .mvc-modal video {
    width: 100%; height: 100%;
    border: none; border-radius: 10px;
    background:#000;
  }
  
  /* Responsive: slides per device (tablet: 2, mobile: 1) */
  @media (max-width: 991px) {
    .mvc-slide { min-width: 50%; }
  }
  @media (max-width: 639px) {
    .mvc-slide { min-width: 100%; }
    .mvc-thumb { height: 260px; }
  }