/* styles-v2.css: renamed from styles.css (2026-10-02) so a year-cached old copy cannot linger - static assets are cached
   for a year; rename again on the next content change. */
/* ============================================
   CSS VARIABLES - UNIFIED HEIGHT CONFIGURATION
   ============================================ */
:root {
  /* Unified slider heights - apply to both image and video slides */
  --slider-height-desktop: 800px;      /* All desktops ≥1200px */
  --slider-height-tablet-lg: 600px;    /* Tablet large 992-1199px */
  --slider-height-tablet: 500px;       /* Tablet 768-991px */
  --slider-header-offset-mobile: 80px; /* Header offset for mobile calculation */
}

/* ============================================
   SWIPER CORE CONFIGURATION
   ============================================ */
.nop-slider {
  --swiper-navigation-color: #fff;
  --swiper-pagination-color: #fff;
}

.nop-slider .swiper-button-disabled {
  pointer-events: auto;
}

/* ============================================
   BASE STYLES - VIDEO CONTAINER
   ============================================ */

/* Video slide container - base styling (will be overridden by media queries) */
.nop-slider .video-container-swiper {
  position: relative;
  width: 100%;
  height: 600px; /* Fallback height - ensures visibility if media queries fail */
  overflow: hidden;
  background-color: #000;
}

/* ============================================
   VIDEO SLIDE HEIGHT - DESKTOP (≥1200px)
   ============================================ */
@media (min-width: 1200px) {
  /* Video container only - image slides use natural height */
  .nop-slider .video-container-swiper {
    max-height: var(--slider-height-desktop);
    height: var(--slider-height-desktop);
    padding-bottom: 0;
  }
}

/* ============================================
   VIDEO SLIDE HEIGHT - TABLET LARGE (992-1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Video container only - image slides use natural height */
  .nop-slider .video-container-swiper {
    max-height: var(--slider-height-tablet-lg);
    height: var(--slider-height-tablet-lg);
    padding-bottom: 0;
  }
}

/* ============================================
   VIDEO SLIDE HEIGHT - TABLET (768-991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
  /* Video container only - image slides use natural height */
  .nop-slider .video-container-swiper {
    max-height: var(--slider-height-tablet);
    height: var(--slider-height-tablet);
    padding-bottom: 0;
  }
}

/* ============================================
   VIDEO SLIDE HEIGHT - MOBILE (≤767px)
   ============================================ */
@media (max-width: 767px) {
  /* Video container only - image slides use natural height */
  .nop-slider .video-container-swiper {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    max-height: calc(100vh - var(--slider-header-offset-mobile));
    height: auto;
  }
}

/* ============================================
   VIDEO SLIDE HEIGHT - SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {
  /* Video container only - image slides use natural height */
  .nop-slider .video-container-swiper {
    padding-bottom: 75%; /* 4:3 aspect ratio for very small screens */
    max-height: calc(100vh - 60px);
  }
}

/* ============================================
   IMAGE SLIDE STYLING - ORIGINAL BEHAVIOR
   ============================================ */

/* Image styling - original simple approach (natural aspect ratio) */
.nop-slider .slider-img {
  max-width: 100%;
}

/* ============================================
   SLIDE VISIBILITY FIX - FADE EFFECT OVERRIDE
   ============================================ */

/* CRITICAL FIX: Force inactive slides to be completely hidden

   ROOT CAUSE: Swiper's fade effect uses opacity transitions, which means
   during slide changes, both the previous and next slide can have partial
   opacity simultaneously. This causes the previous slide to remain visible
   beneath the active slide.

   SOLUTION: Force visibility:hidden on all non-active slides to completely
   remove them from rendering, regardless of opacity values.
*/

/* Base state: All slides are hidden by default */
.nop-slider .swiper-slide {
  position: relative;
  visibility: hidden;
  opacity: 0;
}

/* Active slide: Fully visible */
.nop-slider .swiper-slide-active {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10;
}

/* Next/previous slides during transition: Keep hidden */
.nop-slider .swiper-slide-next,
.nop-slider .swiper-slide-prev {
  visibility: hidden;
  opacity: 0;
}

/* Duplicate slides (loop mode): Hidden by default */
.nop-slider .swiper-slide-duplicate {
  visibility: hidden;
  opacity: 0;
  z-index: 0;
}

/* Active duplicate slide during loop transition: Visible */
.nop-slider .swiper-slide-duplicate-active {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10;
}

/* ============================================
   VIDEO SLIDE STYLING - RESPONSIVE & POLISHED
   ============================================ */

/* Video iframe - positioned absolutely within container */
.nop-slider .video-container-swiper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: auto; /* Allow interaction with video controls if visible */
}

/* Video slide marker with loading optimization */
.nop-slider .swiper-slide-video {
  background-color: #000; /* Black background prevents white flash */
  min-height: 300px; /* Prevent layout shift during load */
}

/* ============================================
   LOADING OPTIMIZATION - PREVENT THUMBNAIL FLASH
   ============================================ */

/* Hide video iframe until fully loaded - prevents thumbnail flash */
.nop-slider .video-container-swiper iframe {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

/* Show iframe when loaded */
.nop-slider .video-container-swiper iframe.loaded {
  opacity: 1;
}

/* Loading spinner overlay (optional visual enhancement) */
.nop-slider .video-container-swiper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
  z-index: 3; /* Spinner above video iframe during loading */
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

/* Hide spinner when video loaded */
.nop-slider .video-container-swiper.video-loaded::before {
  opacity: 0;
  pointer-events: none;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* ============================================
   VIDEO PLAYER UI CLEANUP - HIDE ALL YOUTUBE OVERLAY UI
   ============================================ */

/* Hide YouTube branding and unnecessary controls via CSS fallback */
.nop-slider .video-container-swiper iframe {
  /* YouTube player is in shadow DOM, but we can control container */
  overflow: hidden; /* Clip any overflow controls */
}

/* Comprehensive overlay to block all YouTube hover UI elements */
/* This overlay covers the entire video area and blocks clicks on YouTube UI */
/* while still allowing video playback controls to work */
.nop-slider .video-container-swiper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4; /* Above iframe and spinner, blocks YouTube UI overlay */
  /* Block all pointer events on YouTube UI overlay */
  pointer-events: auto;
  /* Make overlay completely transparent */
  background: transparent;
}

/* On hover, maintain clean video view without YouTube UI */
.nop-slider .swiper-slide-video:hover .video-container-swiper::after,
.nop-slider .swiper-slide-video:hover .video-container-swiper::before {
  /* Keep overlays active on hover to block YouTube UI */
  display: block;
}

/* ============================================
   SWIPER SLIDE SPACING & ALIGNMENT
   ============================================ */

/* Remove any default padding/margin that might cause scrolling */
.nop-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center video within slide */
.nop-slider .swiper-slide-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ============================================
   ACCESSIBILITY & FOCUS STATES
   ============================================ */

/* Focus state for keyboard navigation */
.nop-slider .video-container-swiper iframe:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: -2px;
}

/* Reduce motion for users with preference */
@media (prefers-reduced-motion: reduce) {
  .nop-slider .video-container-swiper iframe {
    transition: none;
  }

  .nop-slider .video-container-swiper::before {
    animation: none;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for smooth transitions */
.nop-slider .video-container-swiper,
.nop-slider .video-container-swiper iframe {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Contain layout changes to prevent reflow */
.nop-slider .swiper-slide-video {
  contain: layout style paint;
}

/* ============================================
   SLIDER CAPTION OVERLAY - TEXT ON IMAGE
   ============================================ */

/* Caption container - covers entire slide for positioning */
.nop-slider .swiper-slide .npc-slider-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

/* Caption inner - vertically centered, left-aligned */
.nop-slider .swiper-slide .npc-slider-caption-inner {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  padding: 15px;
  text-align: left;
  max-width: 50%;
  pointer-events: auto;
}

/* Title text - bold, uppercase like screenshot */
.nop-slider .npc-slider-title {
  margin: 0;
  font-family: inherit;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--grey-black, #333);
  text-transform: uppercase;
}

/* Subtitle / Short description */
.nop-slider .npc-slider-subtitle {
  margin: 0 0 6px 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--grey-black, #333);
}

/* SHOP NOW button - dark bg, white text */
.nop-slider .npc-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 40px;
  margin-top: 14px;
  padding: 8px 24px;
  background-color: var(--grey-black, #333);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
}

.nop-slider .npc-slider-btn:hover,
.nop-slider .npc-slider-btn:active {
  color: #fff;
  opacity: 0.8;
}

/* ============================================
   NPC SLIDER CAPTION - RESPONSIVE
   ============================================ */

/* Tablet large (992-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .nop-slider .npc-slider-title {
    font-size: 34px;
  }

  .nop-slider .npc-slider-subtitle {
    font-size: 15px;
  }
}

/* Tablet (768-991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .nop-slider .npc-slider-title {
    font-size: 28px;
  }

  .nop-slider .npc-slider-subtitle {
    font-size: 14px;
  }

  .nop-slider .swiper-slide .npc-slider-caption-inner {
    max-width: 60%;
  }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
  .nop-slider .npc-slider-title {
    font-size: 20px;
  }

  .nop-slider .npc-slider-subtitle {
    font-size: 12px;
  }

  .nop-slider .npc-slider-btn {
    min-width: 110px;
    min-height: 34px;
    padding: 6px 16px;
    font-size: 11px;
    margin-top: 10px;
  }

  .nop-slider .swiper-slide .npc-slider-caption-inner {
    left: 4%;
    max-width: 65%;
    padding: 10px;
  }
}

/* Small mobile (max 480px) */
@media (max-width: 480px) {
  .nop-slider .npc-slider-title {
    font-size: 16px;
  }

  .nop-slider .npc-slider-subtitle {
    font-size: 11px;
  }

  .nop-slider .npc-slider-btn {
    min-width: 90px;
    min-height: 30px;
    padding: 5px 12px;
    font-size: 10px;
    margin-top: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Full-image slides (the whole image is the link) and mobile pictures.
   Scoped to the new elements only; the existing .slider-img rules are untouched.
   --------------------------------------------------------------------------- */
.nop-slider .swiper-full-link {
    display: block;
    width: 100%;
    line-height: 0;
}

.nop-slider picture {
    display: block;
    width: 100%;
}

.nop-slider picture .slider-img,
.nop-slider .swiper-full-link .slider-img {
    width: 100%;
    height: auto;
    display: block;
}