/* VinVin Reels Carousel — responsive layout, v1.1.0 */
.vvr{
  --vvr-gap:18px;
  --vvr-text:#1a1a1a;
  --vvr-muted:#626262;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  font-family:inherit;
  color:var(--vvr-text);
}
.vvr,.vvr *,.vvr *::before,.vvr *::after{box-sizing:border-box}
.vvr-heading{margin-bottom:22px}
.vvr-heading h2{margin:0 0 6px;font-size:clamp(24px,3vw,35px);line-height:1.2;font-weight:750;letter-spacing:-.03em}
.vvr-heading p{margin:0;color:var(--vvr-muted);font-size:15px}
.vvr-gallery{display:block;position:relative;width:100%;max-width:100%;min-width:0;container-type:inline-size;container-name:vinvin-reels}
/* Three full-sized cards on desktop. The scroll container is always 100% of its Elementor parent. */
.vvr .vvr-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:var(--vvr-gap);
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:2px 1px 9px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:1px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  scrollbar-width:none;
}
.vvr .vvr-track::-webkit-scrollbar{display:none}
.vvr .vvr-track:focus-visible{outline:2px solid #313131;outline-offset:3px;border-radius:10px}
.vvr .vvr-card{
  display:block;
  flex:0 0 calc((100% - (2 * var(--vvr-gap))) / 3);
  width:calc((100% - (2 * var(--vvr-gap))) / 3);
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  align-self:stretch;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
.vvr .vvr-play{
  display:block!important;
  position:relative;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:9/16;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:16px!important;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(135deg,#ffde9f 0%,#f6a72b 45%,#bb5232 100%);
  box-shadow:none!important;
  transition:transform .18s ease,box-shadow .18s ease;
  appearance:none;
  -webkit-appearance:none;
  line-height:1;
}
.vvr-play:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.13)!important}
.vvr-play:focus-visible{outline:3px solid #1e5fac!important;outline-offset:3px}
.vvr-poster{position:absolute;inset:0;display:block;overflow:hidden}
.vvr .vvr-poster>img{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#ead4b5;filter:saturate(1.05)}
.vvr-poster-fallback{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.36),transparent 42%),radial-gradient(circle at 90% 85%,rgba(255,255,255,.25),transparent 50%),linear-gradient(155deg,#f4c74f,#ee9552 45%,#bf5a89)}
.vvr-play:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.18),transparent 25%,transparent 67%,rgba(0,0,0,.23));pointer-events:none}
.vvr-provider{position:absolute;z-index:3;left:12px;top:12px;background:rgba(20,20,20,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;border-radius:100px;padding:7px 10px;font:600 11px/1 sans-serif;letter-spacing:.01em;text-transform:none}
.vvr-play-icon{position:absolute;z-index:3;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.48);border:1.5px solid rgba(255,255,255,.75);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:transform .2s ease,background .2s ease}
.vvr-play:hover .vvr-play-icon{transform:translate(-50%,-50%) scale(1.09);background:rgba(0,0,0,.65)}
.vvr-play-icon svg{margin-left:3px;display:block}
.vvr-meta{padding:11px 2px 3px}
.vvr-title{font-size:15px;font-weight:650;line-height:1.45;overflow-wrap:anywhere}
.vvr-product-link{display:inline-flex;align-items:center;gap:5px;margin-top:5px;color:inherit!important;font-size:13px;font-weight:700;text-decoration:underline!important;text-underline-offset:3px}
.vvr-product-link:hover{opacity:.68}
/* Desktop/tablet arrow buttons: never shown on mobile. */
.vvr-arrows{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.vvr .vvr-arrow{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;display:grid!important;place-items:center;appearance:none;background:#fff!important;color:#242424!important;border:1px solid #d5d5d5!important;border-radius:100%!important;box-shadow:none!important;cursor:pointer;line-height:1!important;transition:background .18s ease}
.vvr-arrow span{display:block;font:400 30px/1 Arial,sans-serif;transform:translateY(-2px)}
.vvr-arrow:hover:not(:disabled){background:#f0f0f0!important}
.vvr-arrow:disabled{opacity:.3;cursor:default}
.vvr-empty{padding:18px;border:1px dashed #bbb}
/* Tablet: two cards. */
@media (min-width:768px) and (max-width:1024px){
  .vvr .vvr-card{
    flex-basis:calc((100% - var(--vvr-gap)) / 2);
    width:calc((100% - var(--vvr-gap)) / 2);
  }
}
/* Phones: 1 card + exactly 1/4 of the next one, swipe with a finger. */
@media (max-width:767px){
  .vvr{--vvr-gap:12px}
  .vvr .vvr-card{
    flex:0 0 calc((100% - var(--vvr-gap)) / 1.25);
    width:calc((100% - var(--vvr-gap)) / 1.25);
  }
  .vvr .vvr-track{scroll-snap-type:x mandatory;touch-action:pan-x pan-y}
  .vvr .vvr-play{border-radius:14px!important}
  .vvr-play-icon{width:53px;height:53px}
  .vvr-title{font-size:14px}
  .vvr .vvr-arrows{display:none!important}
  .vvr-heading{margin-bottom:15px}
}
/* If Elementor places the shortcode in a narrow column on a wide screen,
   use the compact swipe layout rather than shrinking 3 videos to postage stamps. */
@container vinvin-reels (max-width:500px){
  .vvr .vvr-card{
    flex:0 0 calc((100% - var(--vvr-gap)) / 1.25);
    width:calc((100% - var(--vvr-gap)) / 1.25);
  }
  .vvr .vvr-arrows{display:none!important}
}
@media (prefers-reduced-motion:reduce){.vvr .vvr-track{scroll-behavior:auto}.vvr-play,.vvr-play-icon{transition:none}}
/* Popup is appended to body so it works even inside Elementor containers. */
.vvr-modal[hidden]{display:none!important}
.vvr-modal{position:fixed;inset:0;z-index:2147483000;display:flex;justify-content:center;align-items:center;padding:20px;background:rgba(10,10,10,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vvr-modal-inner{position:relative;display:flex;flex-direction:column;align-items:center;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);max-width:min(440px,100%);width:100%}
.vvr-modal-frame{width:auto;height:min(78vh,calc(100dvh - 115px));aspect-ratio:9/16;max-width:100%;overflow:hidden;background:#000;border-radius:12px;box-shadow:0 14px 50px rgba(0,0,0,.4)}
.vvr-modal-frame iframe{display:block;width:100%;height:100%;border:0}
.vvr-modal-close{position:absolute;right:0;top:-3px;transform:translate(40%,-50%);padding:0!important;margin:0!important;width:42px!important;height:42px!important;min-width:42px!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;color:#fff!important;background:rgba(30,30,30,.95)!important;font:400 28px/1 Arial,sans-serif!important;display:grid!important;place-items:center;cursor:pointer;z-index:2}
.vvr-modal-link{margin-top:12px;font:600 13px/1.4 sans-serif;color:#fff!important;text-decoration:underline!important;text-underline-offset:3px}
@media (max-width:500px){.vvr-modal{padding:32px 12px}.vvr-modal-frame{height:min(77vh,calc(100dvh - 120px))}.vvr-modal-close{right:14px;top:-6px;transform:translateY(-50%)}}