/* CW Gallery Slider v1.5.7 */
.cw-album{display:block!important; margin:18px 0; direction:ltr;}
.cw-album *{box-sizing:border-box;}
.cw-album .cw-main{position:relative; width:100%; overflow:hidden; border-radius:10px; background:#0000;}
.cw-album .cw-main .cw-track{position:relative; width:100%;}

/* Show only active slide (no external slider library needed) */
.cw-album .cw-main .cw-slide{display:none; width:100%;}
.cw-album .cw-main .cw-slide.is-active{display:block;}
.cw-album .cw-main img{width:100%; height:auto; max-height:560px; object-fit:contain; display:block; margin:0 auto;}

/* Nav buttons */
.cw-album .cw-nav{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:999px; background:rgba(0,0,0,.45); cursor:pointer;}
.cw-album .cw-prev{left:10px;}
.cw-album .cw-next{right:10px;}
.cw-album .cw-nav:before{content:""; display:block; width:10px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff; margin:0 auto;}
.cw-album .cw-prev:before{transform:rotate(135deg); }
.cw-album .cw-next:before{transform:rotate(-45deg); }

/* Thumbs */
.cw-album .cw-thumbs{margin-top:10px; overflow:auto; -webkit-overflow-scrolling:touch;}
.cw-album .cw-thumbs .cw-track{display:flex; gap:8px;}
.cw-album .cw-thumbs .cw-slide{flex:0 0 auto; width:86px; height:56px; border-radius:8px; overflow:hidden; opacity:.6; cursor:pointer; border:2px solid transparent;}
.cw-album .cw-thumbs .cw-slide.is-active{opacity:1; border-color:rgba(0,73,255,.9);}
.cw-album .cw-thumbs img{width:100%; height:100%; object-fit:cover; display:block;}

/* Mobile tweaks */
@media (max-width: 768px){
  .cw-album .cw-main img{max-height:420px;}
  .cw-album .cw-thumbs .cw-slide{width:72px; height:48px;}
  .cw-album .cw-nav{width:34px; height:34px;}
}


/* === Legacy Swiper fallback (for old stored markup) === */
.cw-album .swiper{display:block!important;opacity:1!important;visibility:visible!important;}
.cw-album .swiper-wrapper{transform:none!important;}
.cw-album .swiper-slide{display:none;}
.cw-album .swiper-slide.is-active{display:block;}
.cw-album .swiper.cw-thumbs .swiper-slide{display:inline-block;vertical-align:top;}
.cw-album .swiper.cw-thumbs .swiper-slide img{width:64px;height:64px;object-fit:cover;}
.cw-album .swiper.cw-thumbs{white-space:nowrap;overflow:auto;}

/* ===== Responsive (tablet & mobile) =====
   IMPORTANT: Desktop styles remain unchanged; overrides apply only below breakpoints.
*/
@media (max-width: 1024px) {
  .cw-album { margin: 12px 0; }

  /* prevent any theme-fixed heights from breaking the slider on smaller screens */
  .cw-album .cw-main,
  .cw-album .swiper.cw-main {
    height: auto !important;
    min-height: 0 !important;
  }

  /* make sure wrapper doesn't force a fixed height */
  .cw-album .cw-main .cw-track,
  .cw-album .swiper.cw-main .swiper-wrapper {
    height: auto !important;
  }

  /* Keep images contained on tablet/mobile (do NOT affect desktop) */
  .cw-album .cw-main img,
  .cw-album .swiper.cw-main img {
    width: 100% !important;
    height: auto !important;
    /* prevent very tall portrait images from taking over the screen */
    max-height: 55vh !important;
    object-fit: contain !important;
  }

  /* thumbnails: compact + horizontal scroll */
  .cw-album .cw-thumbs { padding-top: 8px; }
  .cw-album .cw-thumbs .cw-track,
  .cw-album .swiper.cw-thumbs .swiper-wrapper {
    gap: 6px;
  }

  /* Fallback for Swiper markup when Swiper's own CSS isn't present */
  .cw-album .swiper-wrapper{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap: 6px;
    transform:none !important;
  }

  .cw-album .cw-thumbs img,
  .cw-album .swiper.cw-thumbs img {
    width: 56px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  /* slightly tighter height on phones */
  .cw-album .cw-main img,
  .cw-album .swiper.cw-main img {
    max-height: 45vh !important;
  }

  /* nav buttons: slightly larger touch targets */
  .cw-album .cw-nav { width: 40px; height: 40px; }

  /* keep thumbs visible but not too tall */
  .cw-album .cw-thumbs img,
  .cw-album .swiper.cw-thumbs img {
    width: 52px;
    height: 38px;
  }
}

@media (max-width: 480px) {
  .cw-album .cw-main img,
  .cw-album .swiper.cw-main img {
    max-height: 40vh !important;
  }

  .cw-album .cw-thumbs img,
  .cw-album .swiper.cw-thumbs img {
    width: 48px;
    height: 36px;
  }
}

/* ===== Mobile/Tablet overflow fix (thumb carousel) =====
/* Only affects <=1024px to keep desktop unchanged */
@media (max-width: 1024px){
  /* Ensure nothing clips the thumb scroller */
  .cw-album{overflow:visible!important;}

  /* Force horizontal scrolling for thumbs (custom markup) */
  .cw-album .cw-thumbs{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    max-width:100%!important;
  }
  .cw-album .cw-thumbs .cw-track{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
  }

  /* Force horizontal scrolling for thumbs (legacy Swiper markup) */
  .cw-album .swiper.cw-thumbs{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    max-width:100%!important;
    white-space:normal!important; /* we're using flex below */
  }
  .cw-album .swiper.cw-thumbs .swiper-wrapper{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
  }

  /* Prevent thumb items from shrinking into the container */
  .cw-album .cw-thumbs .cw-slide,
  .cw-album .swiper.cw-thumbs .swiper-slide{
    flex:0 0 auto!important;
  }
}


/* ===== Strong mobile/tablet fixes (do NOT affect desktop) ===== */
@media (max-width: 1024px){

  /* Main image should not become absurdly tall on small screens */
  .cw-album .cw-main,
  .cw-album .swiper.cw-main{
    width: 100% !important;
    max-width: 100% !important;
  }
  .cw-album .cw-main img,
  .cw-album .swiper.cw-main img{
    width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    object-fit: contain;
    display: block;
  }

  /* Thumbnails must stay in ONE horizontal row with real horizontal scrolling */
  .cw-album .cw-thumbs,
  .cw-album .swiper.cw-thumbs{
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    padding-top: 8px;
  }

  .cw-album .cw-thumbs .cw-track{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px;
    width: max-content !important;
    min-width: 100%;
    transform: none !important; /* avoid transforms preventing scroll on some browsers */
  }

  .cw-album .cw-thumbs .cw-slide{
    flex: 0 0 auto !important;
  }

  .cw-album .cw-thumbs .cw-slide img{
    width: 64px !important;
    height: 48px !important;
    object-fit: cover;
    display: block;
  }

  /* Swiper thumbs wrapper safety */
  .cw-album .swiper.cw-thumbs .swiper-wrapper{
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
  }
  .cw-album .swiper.cw-thumbs .swiper-slide{
    flex: 0 0 auto !important;
    width: auto !important;
  }
}