/* ==========================================================================
   CommerceGurus Shoppable Video Player - CSS Variables & Configuration
   ========================================================================== */

:root {
	/* Focus and Accessibility */
	--cg-ugc-focus-color: #007bff;
	
	/* Primary Carousel Configuration */
	--cg-ugc-carousel-items-desktop: 5; /* Number of items per row on desktop */
	--cg-ugc-carousel-items-mobile: 3;  /* Number of items per row on mobile */
	--cg-ugc-carousel-items-mobile-small: 4; /* Number of items per row on small mobile */
	--cg-ugc-carousel-gap: 1rem; /* Gap between items */
	--cg-ugc-carousel-gap-mobile: 0.5rem; /* Gap between items on mobile */
	
	/* Arrow Configuration - Used across different carousel contexts */
	--cg-ugc-arrow-size: 2.5em;
	--cg-ugc-arrow-size-primary: 3em;
	--cg-ugc-arrow-bg-primary: white;
	--cg-ugc-arrow-bg-modal: rgba(255, 255, 255, 0.1);
	--cg-ugc-arrow-border-primary: rgba(0, 0, 0, 0.1);
	--cg-ugc-arrow-border-modal: transparent;
	--cg-ugc-arrow-shadow-primary: 0 2px 8px rgba(0, 0, 0, 0.1);
	--cg-ugc-arrow-shadow-modal: none;
	--cg-ugc-arrow-shadow-hover-primary: 0 4px 12px rgba(0, 0, 0, 0.15);
	--cg-ugc-arrow-shadow-hover-modal: none;
	--cg-ugc-arrow-svg-size: 1.5em;
	--cg-ugc-arrow-svg-size-modal: 20px;
	--cg-ugc-arrow-svg-color-primary: #333;
	--cg-ugc-arrow-svg-color-modal: #fff;
	--cg-ugc-arrow-opacity: 0.9;
	--cg-ugc-arrow-opacity-hover: 1;
	--cg-ugc-arrow-transition: all 0.2s ease;
}
/* ==========================================================================
   Global Body Styles & Third-Party Library Overrides
   ========================================================================== */

/* Prevent body scroll when modal is open (except in corner widget mode) */
body:has(.cg-ugc__micromodal-slide.is-open):not(:has(.cg-ugc__modal.cg-ugc__cornerWidget-mode)) {
  overflow-y: hidden;
}

/* ==========================================================================
   Splide.js Library Styles (Minified)
   ========================================================================== */
.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #007bff;outline-offset:0px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #007bff;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
/* ==========================================================================
   Primary Carousel - Custom CSS Implementation
   ========================================================================== */

/* 
 * Custom carousel implementation using CSS Grid/Flexbox instead of Splide.js
 * Provides better performance and more control over responsive behavior
 */

/* Grid Layout Configuration */
:root {
  --cg-ugc-grid-columns-desktop: 4;
  --cg-ugc-grid-columns-mobile: 2;
  --cg-ugc-grid-columns-mobile-small: 1;
  --cg-ugc-grid-gap: 1rem;
  --cg-ugc-grid-gap-mobile: 0.5rem;
}

/* Main carousel wrapper container */
.cg-ugc__primaryCarousel-wrapper {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* 
 * Data attribute-based configuration system
 * Allows dynamic carousel configuration via HTML data attributes
 * Falls back to default values if attributes are not provided
 */
.cg-ugc__primaryCarousel-wrapper {
  --cg-ugc-carousel-items-desktop: 5;
  --cg-ugc-carousel-items-mobile: 3;
  --cg-ugc-carousel-items-mobile-small: 4;
  --cg-ugc-carousel-gap: 1rem;
  --cg-ugc-carousel-gap-mobile: 0.5rem;
}
/* Data attribute overrides - dynamically set by JavaScript */
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-desktop] {
  --cg-ugc-carousel-items-desktop: var(--data-carousel-items-desktop);
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile] {
  --cg-ugc-carousel-items-mobile: var(--data-carousel-items-mobile);
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile-small] {
  --cg-ugc-carousel-items-mobile-small: var(--data-carousel-items-mobile-small);
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-gap] {
  --cg-ugc-carousel-gap: var(--data-carousel-gap);
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-gap-mobile] {
  --cg-ugc-carousel-gap-mobile: var(--data-carousel-gap-mobile);
}
/* 
 * Specific flex rules for common desktop item counts
 * These bypass potential issues with CSS variable resolution in calc()
 */
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-desktop="5"] .cg-ugc__primaryCarousel .cg-ugc__slide {
  flex: 0 0 calc((100% / 5) - (1rem * 4 / 5));
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-desktop="6"] .cg-ugc__primaryCarousel .cg-ugc__slide {
  flex: 0 0 calc((100% / 6) - (1rem * 5 / 6));
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-desktop="4"] .cg-ugc__primaryCarousel .cg-ugc__slide {
  flex: 0 0 calc((100% / 4) - (1rem * 3 / 4));
}
/* 
 * Combined item count and gap rules for precise layout control
 * Ensures proper spacing calculations for different combinations
 */
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-desktop="4"][data-carousel-gap="1.5rem"] .cg-ugc__primaryCarousel .cg-ugc__slide {
  flex: 0 0 calc((100% / 4) - (1.5rem * 3 / 4));
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-desktop="5"][data-carousel-gap="1.5rem"] .cg-ugc__primaryCarousel .cg-ugc__slide {
  flex: 0 0 calc((100% / 5) - (1.5rem * 4 / 5));
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-items-desktop="6"][data-carousel-gap="1.5rem"] .cg-ugc__primaryCarousel .cg-ugc__slide {
  flex: 0 0 calc((100% / 6) - (1.5rem * 5 / 6));
}

/* Gap configuration rules */
.cg-ugc__primaryCarousel-wrapper[data-carousel-gap="1rem"] .cg-ugc__primaryCarousel {
  gap: 1rem;
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-gap="1.5rem"] .cg-ugc__primaryCarousel {
  gap: 1.5rem;
}
.cg-ugc__primaryCarousel-wrapper[data-carousel-gap="2rem"] .cg-ugc__primaryCarousel {
  gap: 2rem;
}
/* Main carousel container with horizontal scrolling */
.cg-ugc__primaryCarousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--cg-ugc-carousel-gap);
  -ms-overflow-style: none;
  scrollbar-width: none;
  width: 100%;
  scroll-padding-right: 0;
  scroll-padding-left: 0;
}
/* Hide scrollbar for cleaner appearance */
.cg-ugc__primaryCarousel::-webkit-scrollbar {
  display: none;
}

/* Individual carousel slides with responsive sizing */
.cg-ugc__primaryCarousel .cg-ugc__slide {
  /* Optimized calc() - simplified formula for better performance */
  flex: 0 0 calc((100% - (var(--cg-ugc-carousel-gap) * (var(--cg-ugc-carousel-items-desktop) - 1))) / var(--cg-ugc-carousel-items-desktop));
  scroll-snap-align: start;
  cursor: pointer;
  position: relative;
  width: 100%; 
}
/* Focus styles for accessibility */
.cg-ugc__primaryCarousel .cg-ugc__slide:focus-visible {
  outline: 3px solid var(--cg-ugc-focus-color);
  outline-offset: 2px;
  border-radius: 6px;
}
/* ==========================================================================
   Responsive Breakpoints - Mobile & Tablet
   ========================================================================== */

/* Tablet and mobile devices (max-width: 992px) */
@media (max-width: 992px) {
  .cg-ugc__primaryCarousel .cg-ugc__slide {
    /* Optimized calc() for mobile */
    flex: 0 0 calc((100% - (var(--cg-ugc-carousel-gap) * (var(--cg-ugc-carousel-items-mobile) - 1))) / var(--cg-ugc-carousel-items-mobile));
  }
  
  /* Mobile-specific rules for data attributes */
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile="2"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 1rem) / 2);
  }
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile="3"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 2rem) / 3);
  }
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile="4"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 3rem) / 4);
  }
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile="5"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 4rem) / 5);
  }
}
/* Small mobile devices (max-width: 640px) */
@media (max-width: 640px) {
  .cg-ugc__primaryCarousel {
    gap: var(--cg-ugc-carousel-gap-mobile);
    margin-right: -20%; /* Create peek effect without padding */
  }
  .cg-ugc__primaryCarousel .cg-ugc__slide {
    /* Optimized calc() for small mobile */
    flex: 0 0 calc((100% - (var(--cg-ugc-carousel-gap-mobile) * (var(--cg-ugc-carousel-items-mobile-small) - 1))) / var(--cg-ugc-carousel-items-mobile-small));
  }
  
  /* Small mobile-specific rules for data attributes */
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile-small="2"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 1rem) / 2);
  }
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile-small="3"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 2rem) / 3);
  }
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile-small="4"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 3rem) / 4);
  }
  .cg-ugc__primaryCarousel-wrapper[data-carousel-items-mobile-small="5"] .cg-ugc__primaryCarousel .cg-ugc__slide {
    flex: 0 0 calc((100% - 4rem) / 5);
  }
}
/* ==========================================================================
   Base Arrow Styles
   ========================================================================== */

/* Base arrow styles that can be extended */
.cg-ugc__arrow-base {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--cg-ugc-arrow-transition);
  z-index: 10;
  border: none;
}

.cg-ugc__arrow-base:hover {
  opacity: var(--cg-ugc-arrow-opacity-hover);
  /* Combined transform for better performance */
  transform: translateY(-50%) scale(1.05);
}

.cg-ugc__arrow-base:focus-visible {
  outline: 3px solid var(--cg-ugc-focus-color);
  outline-offset: 2px;
}

.cg-ugc__arrow-base svg {
  fill: none;
  stroke-width: 2;
}

/* ==========================================================================
   Primary Carousel Arrows
   ========================================================================== */

.cg-ugc__primaryCarousel-wrapper .cg-ugc__arrow {
  /* Apply base arrow styles directly */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--cg-ugc-arrow-transition);
  z-index: 10;
  border: none;
  /* Primary carousel specific styles */
  background: var(--cg-ugc-arrow-bg-primary);
  border: 1px solid var(--cg-ugc-arrow-border-primary);
  box-shadow: var(--cg-ugc-arrow-shadow-primary);
  width: var(--cg-ugc-arrow-size-primary);
  height: var(--cg-ugc-arrow-size-primary);
  opacity: var(--cg-ugc-arrow-opacity);
}

.cg-ugc__primaryCarousel-wrapper .cg-ugc__arrow:hover {
  box-shadow: var(--cg-ugc-arrow-shadow-hover-primary);
}

.cg-ugc__primaryCarousel-wrapper .cg-ugc__arrow svg {
  width: var(--cg-ugc-arrow-svg-size);
  height: var(--cg-ugc-arrow-svg-size);
  stroke: var(--cg-ugc-arrow-svg-color-primary);
}

.cg-ugc__primaryCarousel-wrapper .cg-ugc__arrow--prev {
  left: 1em;
}

.cg-ugc__primaryCarousel-wrapper .cg-ugc__arrow--next {
  right: 1em;
}

/* Hide arrows on mobile */
@media (max-width: 640px) {
  .cg-ugc__primaryCarousel-wrapper .cg-ugc__arrow {
    display: none;
  }
}

/* ==========================================================================
   Grid Layout Implementation
   ========================================================================== */

/* Grid mode - override carousel styles */
.cg-ugc__primaryCarousel-wrapper.cg-ugc__grid-mode .cg-ugc__primaryCarousel {
  display: grid;
  grid-template-columns: repeat(var(--cg-ugc-grid-columns-desktop), 1fr);
  column-gap: var(--cg-ugc-grid-gap);
  row-gap: calc(var(--cg-ugc-grid-gap) * 2);
  overflow: visible;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -ms-overflow-style: auto;
  scrollbar-width: auto;
  width: 100%;
}

/* Grid mode - slide styles */
.cg-ugc__primaryCarousel-wrapper.cg-ugc__grid-mode .cg-ugc__primaryCarousel .cg-ugc__slide {
  flex: none;
  width: 100%;
  scroll-snap-align: none;
}

/* Grid mode - hide arrows */
.cg-ugc__primaryCarousel-wrapper.cg-ugc__grid-mode .cg-ugc__arrow {
  display: none;
}

/* Grid mode - responsive breakpoints */
@media (max-width: 992px) {
  .cg-ugc__primaryCarousel-wrapper.cg-ugc__grid-mode .cg-ugc__primaryCarousel {
    grid-template-columns: repeat(var(--cg-ugc-grid-columns-mobile), 1fr);
    column-gap: var(--cg-ugc-grid-gap-mobile);
    row-gap: calc(var(--cg-ugc-grid-gap-mobile) * 2);
  }
}

@media (max-width: 640px) {
  .cg-ugc__primaryCarousel-wrapper.cg-ugc__grid-mode .cg-ugc__primaryCarousel {
    grid-template-columns: repeat(var(--cg-ugc-grid-columns-mobile-small), 1fr);
    column-gap: var(--cg-ugc-grid-gap-mobile);
    row-gap: calc(var(--cg-ugc-grid-gap-mobile) * 2);
    margin-right: 0; /* Remove peek effect in grid mode */
  }
}
/* ==========================================================================
   Carousel Slide Components
   ========================================================================== */

/* Base slide container */
.cg-ugc__slide {
  position: relative;
  width: 100%; 
}
/* Focus management and accessibility */
.splide.is-focus-in .splide__slide.cg-ugc__slide:focus {
  outline: none;
}

/* Apply focus styles to the thumbnail when parent li is focused */
.cg-ugc__slide:focus-visible .cg-ugc__preview {
  outline: 3px solid #0bf;
  outline-offset: -3px;
  border-radius: 6px;
}

/* Hide Splide arrows when using custom carousel */
.splide:not(.is-overflow):has(.cg-ugc__slide) .splide__arrows {
  display: none;
}
/* ==========================================================================
   Preview Images & Thumbnails
   ========================================================================== */

/* Preview image container */
.cg-ugc__slide .cg-ugc__preview {
  object-fit: cover;
  width: 100%;
  height: 100%; 
}

/* Preview image styling */
.cg-ugc__preview img {
  width: 100%;
}
/* Thumbnail container */
.cg-ugc__thumbnail {
  width: 100%;
  display: block;
  position: relative;
  cursor: pointer;
}

/* Thumbnail preview with hover effects */
.cg-ugc__thumbnail .cg-ugc__preview {
  height: 100%;
  width: 100%;
  display: block;
  cursor: pointer;  
  transition: transform 0.15s;
}

/* Thumbnail media styling */
.cg-ugc__thumbnail .cg-ugc__preview img,
.cg-ugc__thumbnail .cg-ugc__preview video {
    border-radius: 8px;
}
/* ==========================================================================
   Loading States & Skeleton Screens
   ========================================================================== */

/* Preview container with aspect ratio */
.cg-ugc__preview {
  position: relative;
  width: 100%;
  padding-bottom: 177.78%; /* 9:16 aspect ratio (9/16 = 0.5625, 1/0.5625 = 1.7778) */
}

/* Preview image positioning and transitions */
.cg-ugc__preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.3s;
}
/* ==========================================================================
   Play Icon & Interactive Elements
   ========================================================================== */

/* Play icon overlay for video thumbnails */
.cg-ugc__playIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  pointer-events: none;  
}
/* Play icon SVG styling */
.cg-ugc__playIcon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
/* Caption text styling */
.cg-ugc__previewCaption {
  padding: 10px;
  text-align: center;
  font-size: clamp(0.75rem, 0.623rem + 0.4065vw, 0.875rem); /* 12-14 */
  text-wrap: pretty;
  line-height: 1.4;
}
/* ==========================================================================
   Modal System & Overlay
   ========================================================================== */

/* Modal visibility states */
.cg-ugc__micromodal-slide {
  display: none;
}
.cg-ugc__micromodal-slide.is-open {
  display: block;
}
.cg-ugc__modal.is-open {
  display: flex;
}
.cg-ugc__modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.cg-ugc__modal__content {
  display: flex;
  height: 100vh;
}
.cg-ugc__carousel {
  flex: 1;
  min-width: 0;
}
.cg-ugc__products {
  width: 25%;
  flex-shrink: 0;
}
.cg-ugc__products:empty {
  display: none;
}
/* -- Modal Header -- */
.cg-ugc__modal__header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  z-index: 1;
}
.cg-ugc__modal__close {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  color: white;
  cursor: pointer;
  width: 44px;
  height: 44px;
  background: transparent;
  border-radius: 50%;
  outline: none;
}
.cg-ugc__modal__close:focus-visible,
.cg-ugc__mute-toggle:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: -3px;
}
.cg-ugc__modal__close svg {
  width: 24px;
  height: 24px;
}
/* -- Fullscreen -- */
.cg-ugc__modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
/* -- Video Section - */
.cg-ugc__modalPlayer {
  width: 100%;
  height: 100vh;
  /* Backdrop filter with fallback for older browsers */
  background-color: rgba(0, 0, 0, 0.8); /* Fallback */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px); /* Safari support */
}
/* Video.js */
.cg-ugc__video.video-js {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cg-ugc__video.video-js {
  background-color: rgba(0, 0, 0, 0.8); /* Fallback */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px); /* Safari support */
}
.cg-ugc__video.video-js.vjs-fluid:not(.vjs-audio-only-mode) {
  height: 100%;
}
.cg-ugc__video.video-js.vjs-default-skin .vjs-big-play-button { 
  display: none; 
}
.cg-ugc__modalPlayer .video-js .vjs-control-bar {
  z-index: 3;
  background-color: transparent;
}
.cg-ugc__modalPlayer .video-js .vjs-control-bar {
  position: absolute;
  top: 0px;
}
.cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modalPlayer .video-js .vjs-control-bar {
  position: absolute;
  top: 0px;
}
.cg-ugc__video.video-js .vjs-slider {
  margin: 0;
  background-color: rgba(0, 0, 0, .3);
}
.cg-ugc__video.video-js .vjs-play-progress {
  background-color: rgba(255, 255, 255, 0.75);
}
.cg-ugc__video.video-js .vjs-play-progress:before {
  display: none;
}
.cg-ugc__video.video-js .vjs-control-bar {
  height: 7px;
}
.cg-ugc__video.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0;
  height: 7px;
}
.cg-ugc__modalPlayer .video-js .vjs-load-progress {
  background: transparent;
}
.cg-ugc__modalPlayer .video-js .vjs-load-progress div {
  background: rgba(0,0,0,0.01);
}
.splide__slide:not(.is-visible) .cg-ugc__modalPlayer .video-js .vjs-control-bar,
.cg-ugc__video.video-js .vjs-control.vjs-button,
.cg-ugc__video.video-js .vjs-time-control,
.cg-ugc__modalPlayer .video-js .vjs-volume-panel,
.cg-ugc__modalPlayer .video-js .vjs-picture-in-picture-control,
.cg-ugc__modalPlayer .video-js .vjs-fullscreen-control,
.cg-ugc__modalPlayer .video-js .vjs-subs-caps-button,
.cg-ugc__modalPlayer .video-js .vjs-captions-button,
.splide__slide:not(.is-active) .video-js .vjs-control-bar {
  display: none;
}
.splide__slide:not(.is-visible) .video-js .vjs-control-bar,
.splide__slide:not(.is-active) .video-js .vjs-control-bar,
.splide__slide.is-moving .video-js .vjs-control-bar {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.cg-ugc__modalContent {
  display: flex;
}
/* -- Modal Arrows -- */
.cg-ugc__modal .splide__arrows {
  position: absolute;
  left: 100%;
  top: 0px;
  bottom: auto;
  margin-left: -30px;
  height: 100dvh;    
}
.cg-ugc__modal .splide__arrows--ttb .splide__arrow--prev {
  margin-top: -3em;
  top: 50%;
}
.cg-ugc__modal .splide__arrows--ttb .splide__arrow--next {
  margin-bottom: -3.5em;
  top: calc(50% + 0.5rem);
}
.cg-ugc__modal .splide__arrow {
  /* Backdrop filter with fallback for older browsers */
  background-color: rgba(255, 255, 255, 0.1); /* Fallback */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* Safari support */
  width: 2.5em;
  height: 2.5em;
}
.cg-ugc__modal .splide__arrow svg {
  fill: none;
  stroke: #fff;
  width: 20px;
  height: 20px;
}
.cg-ugc__modal .splide__arrows--ttb .splide__arrow--prev svg,
.cg-ugc__modal .splide__arrows--ttb .splide__arrow--next svg {
  transform: none;
}
/* -- Mute toggle -- */
.cg-ugc__thumbnail .cg-ugc__thumbnail-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-ugc__mute-toggle {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  color: white;
  cursor: pointer;
  background: transparent;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  outline: none;
  order: -1;
}
.cg-ugc__mute-toggle svg {
  width: 20px;
  height: 20px;
  stroke: white;
}
.cg-ugc__mute-toggle .volume-on,
.cg-ugc__mute-toggle .volume-off {
  position: absolute;
  transition: opacity 0.2s;
}
.cg-ugc__mute-toggle[data-muted="true"] .volume-on,
.cg-ugc__mute-toggle[data-muted="false"] .volume-off {
  opacity: 0;
}
.cg-ugc__mute-toggle[data-muted="false"] .volume-on,
.cg-ugc__mute-toggle[data-muted="true"] .volume-off {
  opacity: 1;
}
/* -- Focus states -- */
.splide__slide video {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  tabindex: -1;
}
.cg-ugc__slide:focus-visible .cg-ugc__thumbnail video {
  outline: 3px solid var(--cg-ugc-focus-color);
  outline-offset: -3px;
  border-radius: 6px;
}
.splide__slide.cg-ugc__slide:focus:not(:focus-visible) {
  outline: none;
}
/* -- Pause/Play video on interaction and display play icon -- */
.cg-ugc__video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.cg-ugc__video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  z-index: 2;
}
.cg-ugc__play-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
  display: none;
  pointer-events: none;
}
.cg-ugc__play-button svg {
  width: 26px;
  height: 26px;
}
.cg-ugc__play-button:hover {
  background: rgba(0, 0, 0, 0.8);
}
/* Play button visibility - hidden by default, only show when video is paused */
.cg-ugc__play-button {
  display: none;
}
/* Only show play button when video is explicitly paused */
.cg-ugc__video-wrapper.is-paused .cg-ugc__play-button {
  display: flex;
}
/* Hide play button during Splide transitions */
.splide.is-transitioning .cg-ugc__play-button {
  display: none;
}
/* Modal grid */
.cg-ugc__video-wrapper {
  width: 100vw;
  transition: width 0.15s ease-out;
}
.cg-ugc__modal .cg-ugc__products.cg-ugc__hidden,
.cg-ugc__modal .cg-ugc__productContent.cg-ugc__hidden {
  display: none;
}
/* Override hidden class for corner widget mode - only for active products */
@media (min-width: 993px) {
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__products {
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productWrapper:not(.cg-ugc__hidden) {
    display: flex;
  }
}
/* Products */
.cg-ugc__productGrid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100%;
  gap: 0.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cg-ugc__productGrid--item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cg-ugc__productGrid .cg-ugc__productCard {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cg-ugc__productCard-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cg-ugc__productGrid .cg-ugc__productCard-image img {
  max-width: 100%;
  max-height: none;
}
.cg-ugc__productGrid--heading {
  display: none;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 1rem;
}
.cg-ugc__productContent {
  line-height: 1.5;
}
.cg-ugc__productCard-image img {
  height: auto;
  width: auto;
  display: block;
  max-width: 150px;
  max-height: 150px;
}
.cg-ugc__productCard-image {
  margin-bottom: 0.75rem;
}
.cg-ugc__productCard-title {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
}
.cg-ugc__productCard-price {
  font-size: 16px;
}
.cg-ugc__additionalContent-description {
  color: #323232;
  font-size: 14px;
}
/* Variation Dropdowns */
.cg-ugc__productCard-dropdown {
  width: 100%;
  font-size: 16px;
  padding: 7px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
} 
/* Add to cart button */
.cg-ugc__productCard-buybox {
  width: 100%;
}
.cg-ugc__productCard-cta {
  width: 100%;
  background: #111;
  color: #fff;
  padding: 16px 20px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0 1.5rem 0;
}

/* -- Desktop -- */
@media (min-width: 993px) {
  .cg-ugc__modal__header {
    padding-top: 10px;
  }
  .cg-ugc__productContent {
    height: 100vh;
    width: 25vw;
    background-color: #fff;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
  }
  .cg-ugc__modal.is-active:has([data-product-id]) .cg-ugc__modal__header {
    width: 75vw;
  }
  .cg-ugc__modal.is-active:has([data-product-id]) .splide__arrows {
    left: 75%;
  }
  .splide:has(.splide__slide.is-active[data-product-id]) {
    width: 75vw;
  }
  .splide:has(.splide__slide.is-active[data-product-id]) .cg-ugc__video-wrapper {
    width: 75vw;
  }
  .cg-ugc__productGrid--heading {
    display: block;
  }
  .cg-ugc__productCard-details {
    height: 100%;
  }
  .cg-ugc__productCard-price {
    margin-bottom: 1rem;
    font-size: 14px;
  }
  .cg-ugc__productGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .cg-ugc__productGrid .cg-ugc__productCard-cta {
    margin-top: auto;
    margin-bottom: 0;
    padding: 12px 10px;
    font-size: 14px;
  }
  .cg-ugc__productGrid .cg-ugc__productCard-title {
    font-size: 16px;
  }
}
.cg-ugc__modalPlayer .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 1; 
}

/* -- Mobile -- */
@media (max-width: 992px) {
  .cg-ugc__modal__header {
    top: 15px;
  }
  /* Play icon */
  .cg-ugc__playIcon {
    width: 28px;
    height: 28px;
  }
  .cg-ugc__playIcon svg {
    width: 16px;
    height: 16px;
  }
  /* Modal grid */
  .cg-ugc__modalContent {
    flex-direction: column;
  }
  .cg-ugc__modalPlayer {
    width: 100%;
    height: 100dvh;
  }
  .cg-ugc__modalPlayer .video-js .vjs-tech {
    object-fit: cover;
  }
  /* Modal arrows */
  .cg-ugc__modal .splide__arrows {
    left: 100%;
    margin-left: -30px;
  }
  /* Modal product */
  .cg-ugc__additionalContent {
    display: none;
  }
  .cg-ugc__productContent {
    height: auto;
    position: absolute;
    bottom: 15px; /* Fallback */
    bottom: max(15px, env(safe-area-inset-bottom)); /* Use safe area inset */
    width: calc(100% - 30px);
    box-sizing: border-box;
    z-index: 3;
    max-height: 40vh; /* Limit height to prevent overflow */
    overflow-y: auto; /* Allow scrolling if needed */
  }
  /* When there is a grid */
  .cg-ugc__productContent:has(.cg-ugc__productGrid) {
    width: 100%;
    left: 0px;
    box-sizing: border-box;
  }
  .cg-ugc__productCard {
    display: flex;
    align-items: center;
  }
  .cg-ugc__productCard-image {
    width: 50px;
    flex-shrink: 0;
    margin: 0;
  }
  .cg-ugc__productCard img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
  }
  .cg-ugc__productCard-title {
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cg-ugc__productCard-price {
    font-size: 12px;
  }
  .cg-ugc__productCard-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
  }
  .cg-ugc__productCard-buybox {
    margin-top: 10px;
  }
  .cg-ugc__productCard-dropdown {
    margin-bottom: 0.5rem;
  }
  .cg-ugc__productCard-cta {
    margin-bottom: 0;
    font-size: 13px;
    padding: 10px;
  }  
  .cg-ugc__modalPlayer .video-js .vjs-control-bar {
    top: 0px;
    bottom: auto;
  }
  .cg-ugc__productCard {
    flex-direction: row;
  }
  /* Grid */
  .cg-ugc__productGrid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%;
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .cg-ugc__productGrid--item {
    width: 85%;
    flex: 0 0 85%;
    scroll-snap-align: start;
    flex-direction: column;
    scroll-margin-left: 15px;
  }
  .cg-ugc__productGrid::after {
    content: '';
    flex: 0 0 15px;
    min-width: 10px;
  }
  .cg-ugc__productGrid .cg-ugc__productCard {
    width: 100%;
    flex-direction: row;
    position: relative;
  }
  .cg-ugc__productGrid::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 993px) and (max-width: 1400px) {
  .cg-ugc__productGrid {
    grid-template-columns: repeat(1, 1fr);
  }
  .cg-ugc__productGrid .cg-ugc__productCard {
    width: 100%;
  }
}

/* Corner Widget Mode - Desktop Only */
@media (min-width: 993px) {
  .cg-ugc__modal.cg-ugc__cornerWidget-mode {
    position: fixed;
    top: auto;
    left: auto;
    right: 25px;
    bottom: 25px;
    width: 370px;
    height: auto;
    max-height: 600px;
    background: transparent;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 9999;
    pointer-events: none; /* Allow page scrolling */
    overflow: hidden; /* Required to hide the products container when toggled off screen */
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modal__content {
    width: 100%;
    height: 100%;
    max-height: 580px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    background: #000;
    pointer-events: auto;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modalContent {
    flex-direction: column;
    width: 100%;
    height: 580px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modalPlayer {
    width: 100%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modalPlayer .video-js {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    object-fit: cover;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modalPlayer .video-js .vjs-tech {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modal__header {
    width: 100%;
    top: 10px;
    padding: 0 0px;
    position: absolute;
    z-index: 10;
  }  
  .cg-ugc__modal.cg-ugc__cornerWidget-mode #modal-carousel,
  .cg-ugc__modal.cg-ugc__cornerWidget-mode #modal-carousel .cg-ugc__video-wrapper,
  .cg-ugc__modal.cg-ugc__cornerWidget-mode #modal-carousel:has(.splide__slide.is-active[data-product-id]),
  .cg-ugc__modal.cg-ugc__cornerWidget-mode #modal-carousel:has(.splide__slide.is-active[data-product-id]) .cg-ugc__video-wrapper {
    width: 100%;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productContent {
    height: auto;
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: calc(100% - 30px);
    box-sizing: border-box;
    z-index: 3;
    border-radius: 0;
    background-color: transparent;
    padding:0;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productContent:has(.cg-ugc__productGrid) {
    width: 100%;
    left: 0px;
    box-sizing: border-box;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__products:has(.cg-ugc__productGrid) .cg-ugc__productWrapper:not(.cg-ugc__hidden) .cg-ugc__productToggle {
    left: 15px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__products:not(:has(.cg-ugc__productGrid)) .cg-ugc__productContent,
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid--item {
    padding: 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.75);
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-image {
    width: 50px;
    flex-shrink: 0;
    margin: 0;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-title {
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-price {
    margin-bottom: 0;
    font-size: 12px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-details {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 10px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-buybox {
    margin-top: 0.5rem;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-dropdown {
    margin-bottom: 0.5rem;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-cta {
    margin-bottom: 0;
    font-size: 12px;
    padding: 9px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modalPlayer .video-js .vjs-control-bar {
    z-index: 3;
    background-color: transparent;
    opacity: 1;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%;
    gap: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid--item {
    width: 85%;
    flex: 0 0 85%;
    scroll-snap-align: start;
    flex-direction: column;
    scroll-margin-left: 15px;
    scroll-margin-right: 15px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid::before {
    content: '';
    flex: 0 0 0px;
    min-width: 5px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid::after {
    content: '';
    flex: 0 0 0px;
    min-width: 1px;
  } 
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid .cg-ugc__productCard {
    width: 100%;
    flex-direction: row;
    position: relative;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid::-webkit-scrollbar,
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__additionalContent,
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productGrid--heading {
    display: none;
  }
  /* Corner widget arrow positioning - optimized selectors */
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .splide__arrows {
    height: 100%;
    margin-top: -5px;
    margin-left: -45px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .splide__arrows--ttb .splide__arrow--prev {
    margin-top: -3em;
    top: 50%;
    transform: translateY(-50%);
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .splide__arrows--ttb .splide__arrow--next {
    margin-bottom: -3.5em;
    top: calc(50% + 0.5rem);
    transform: translateY(-50%);
  }
  /* Seamless video transitions for corner widget */
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .splide__slide {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  /* Eliminate black background during transitions */
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__modalPlayer {
    background-color: #000;
  }
  /* Corner widget select dropdown font size override for larger screens */
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productCard-dropdown {
    font-size: 13px;
  }
  /* Corner widget play button fixes */
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -20px;
    z-index: 5;
    display: none;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__play-button.cg-ugc__hidden {
    display: none;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .is-visible .cg-ugc__video-wrapper.is-paused .cg-ugc__play-button {
    display: flex;
  }
}

/* Product Toggle Styles - Base styles */
.cg-ugc__productToggle {
  display: none;
  position: absolute;
  top: -20px;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e9ecef;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cg-ugc__productToggleContainer {
  position: relative;
}
.cg-ugc__productToggle:hover {
  background: #f8f9fa;
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cg-ugc__productToggle:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
.cg-ugc__productToggle-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  color: #333;
}
.cg-ugc__productWrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Product visibility - hidden by default */
.cg-ugc__productWrapper.cg-ugc__hidden,
.cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__products.cg-ugc__hidden {
  display: none;
}
/* Corner Widget Mode - Product Wrapper Positioning */
@media (min-width: 993px) {
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productWrapper {
    position: relative;
    width: 100%;
    height: auto;
    background: transparent;
    z-index: 10;
  }
}
/* Corner Widget Mode - Desktop */
@media (min-width: 993px) {
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productWrapper:not(.cg-ugc__hidden) .cg-ugc__productToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -50px;
    left: 0;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    /* Backdrop filter with fallback for older browsers */
    background-color: rgba(255, 255, 255, 0.1); /* Fallback */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* Safari support */
    border: 0;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productToggle:hover {
    opacity: 0.9;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productToggle:focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 0px;
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productToggle svg {
    fill: none;
    stroke: #fff;
    width: 20px;
    height: 20px;
  }
  /* Collapsed state - toggle button slides down with product */
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productWrapper.collapsed .cg-ugc__productToggle {
    top: -50px;
  }
  /* Collapsed state for corner widget on desktop - slide down */
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productWrapper.collapsed .cg-ugc__productToggle-icon {
    transform: rotate(180deg);
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productWrapper.collapsed .cg-ugc__productContent {
    transform: translateY(calc(100% + 15px)); /* include 15px margin */
  }
  .cg-ugc__modal.cg-ugc__cornerWidget-mode .cg-ugc__productContent {
    position: relative;
    overflow: visible;
    transition: transform 0.3s ease;
    transform: translateY(0);
  }
}
/* Corner Widget Mode - Mobile */
@media (max-width: 992px) {
  .cg-ugc__modal .cg-ugc__productWrapper:not(.cg-ugc__hidden) .cg-ugc__productToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -50px;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    /* Backdrop filter with fallback for older browsers */
    background-color: rgba(255, 255, 255, 0.1); /* Fallback */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* Safari support */
    border: 0;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
  }
  .cg-ugc__modal .cg-ugc__productToggle:hover {
    opacity: 0.9;
  }
  .cg-ugc__modal .cg-ugc__productToggle:focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 0px;
  }
  .cg-ugc__modal .cg-ugc__productToggle svg {
    fill: none;
    stroke: #fff;
    width: 22px;
    height: 22px;
  }
  /* Collapsed state for corner widget on mobile - slide down */
  .cg-ugc__modal .cg-ugc__productWrapper.collapsed .cg-ugc__productToggle-icon {
    transform: rotate(180deg);
  }
  .cg-ugc__modal .cg-ugc__productWrapper.collapsed .cg-ugc__productContent {
    transform: translateY(calc(100% + 15px)); /* include 15px margin */
  }
  .cg-ugc__modal .cg-ugc__productContent {
    position: relative;
    overflow: visible;
    transition: transform 0.3s ease;
    transform: translateY(0);
  }
}
/* Mobile product layout */
@media (max-width: 992px) {
  .cg-ugc__modal .cg-ugc__products {
      display: block;
      position: absolute;
      bottom: 0px;
      width: 100%;
  }
  .cg-ugc__productContent:has(.cg-ugc__productGrid) {
    width: 100%;
    left: 0px;
    box-sizing: border-box;
  }
  .cg-ugc__modal .cg-ugc__products:has(.cg-ugc__productGrid) .cg-ugc__productWrapper:not(.cg-ugc__hidden) .cg-ugc__productToggle {
    left: 10px;
  }
  .cg-ugc__modal .cg-ugc__products:not(:has(.cg-ugc__productGrid)) .cg-ugc__productContent,
  .cg-ugc__modal .cg-ugc__productGrid--item {
    padding: 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.75);
  }
}

 /* ==========================================================================
       4. Performance Optimizations
       ========================================================================== */

    /* Use transform3d for hardware acceleration */
    .cg-ugc__slide {
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }

    /* Optimize animations */
    .cg-ugc__productToggle {
      transition: opacity 0.2s ease, transform 0.2s ease;
      will-change: opacity, transform;
    }

    /* Reduce paint operations */
    .cg-ugc__modal {
      transform: translateZ(0);
      backface-visibility: hidden;
    }

/* ==========================================================================
   CSS File Structure Summary
   ========================================================================== */

/*
 * CommerceGurus UGC Video Player CSS Structure:
 * 
 * 1. CSS Variables & Configuration (lines 1-40)
 *    - Global configuration variables
 *    - Carousel and arrow settings
 * 
 * 2. Global Body Styles & Third-Party Overrides (lines 41-46)
 *    - Body scroll prevention
 *    - Splide.js library styles (minified)
 * 
 * 3. Primary Carousel - Custom Implementation (lines 47-205)
 *    - CSS-based carousel replacement for Splide.js
 *    - Data attribute configuration system
 *    - Responsive breakpoints and mobile optimization
 * 
 * 4. Grid Layout Implementation (lines 206-250)
 *    - CSS Grid layout alternative to carousel
 *    - Configurable column counts via CSS variables
 *    - Responsive grid breakpoints
 * 
 * 5. Arrow Navigation System (lines 251-325)
 *    - Base arrow styles with CSS custom properties
 *    - Primary carousel arrows
 *    - Modal and corner widget arrow overrides
 * 
 * 6. Carousel Slide Components (lines 326-365)
 *    - Slide containers and focus management
 *    - Preview images and thumbnails
 *    - Loading states and skeleton screens
 * 
 * 7. Modal System & Overlay (lines 366-495)
 *    - Modal visibility and positioning
 *    - Video player integration
 *    - Header and close button styling
 * 
 * 8. Product Integration (lines 496-845)
 *    - Product grid layouts
 *    - Product cards and details
 *    - Add to cart functionality
 * 
 * 9. Responsive Design (lines 846-1045)
 *    - Desktop layouts (min-width: 993px)
 *    - Mobile and tablet layouts (max-width: 992px)
 *    - Small mobile optimization (max-width: 640px)
 * 
 * 10. Corner Widget Mode (lines 1046-1245)
 *    - Desktop-only corner widget implementation
 *    - Compact product display
 *    - Specialized arrow positioning
 * 
 * 11. Product Toggle System (lines 1246-1448)
 *     - Toggle button styling and positioning
 *     - Collapsible product content
 *     - Responsive toggle behavior
 * 
 * Key Features:
 * - Fully responsive design with mobile-first approach
 * - CSS custom properties for easy theming
 * - Accessibility-focused with proper focus management
 * - Performance optimized with CSS-based carousel
 * - Modular structure for easy maintenance
 * 
 * Performance Optimizations Applied:
 * - Simplified calc() expressions for better browser performance
 * - Combined multiple transforms into single declarations
 * - Added backdrop-filter fallbacks for older browsers
 * - Optimized selectors by removing redundant specificity
 * - Added -webkit-backdrop-filter for Safari compatibility
 * - Reduced selector complexity in corner widget mode
 */

/* Add viewport meta tag support for mobile */
@supports (height: 100dvh) {
  @media (max-width: 992px) {
    .cg-ugc__modalPlayer {
      height: 100dvh; /* Use dynamic viewport height */
    }
  }
}

@media (max-width: 992px) {
  /* Ensure Video.js elements are properly sized on mobile */
  .cg-ugc__modalPlayer .video-js {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .cg-ugc__modalPlayer .video-js .vjs-tech {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Force Video.js to be visible on mobile */
  .cg-ugc__modalPlayer .video-js.vjs-fluid {
    height: 100%;
    padding-top: 0;
  }
  /* Ensure video wrapper maintains proper dimensions */
  .cg-ugc__video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
  }
  /* Fix product panel positioning for mobile */
  .cg-ugc__productContent {
    height: auto;
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    z-index: 3;
    max-height: 40vh;
    overflow-y: auto;
  }
  .cg-ugc__modalPlayer {
    width: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Modern browsers */
  }
  .cg-ugc__modal.is-open,
  .cg-ugc__modal__content,
  .cg-ugc__modalPlayer,
  .cg-ugc__video-wrapper,
  .cg-ugc__video.video-js {
    display: block;
  }
  .cg-ugc__modal {
    height: 100dvh;
  }
}