/* Consolidated responsive slider styles — single authoritative block */
:root{ --slider-button-bg:#3b98a5; --slider-button-color:#ffffff; --slider-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.product-slider{ width:100%; position:relative; max-width:100vw; overflow:hidden; padding-left:0; padding-right:env(safe-area-inset-right); box-sizing:border-box; }
.product-slider .main-viewport{ width:100%; overflow:hidden; border-radius:0.5rem; box-shadow:var(--slider-shadow); position:relative; box-sizing:border-box; margin:0; height:50vh; }
.product-slider .main-slider{ display:flex; transform:translateX(0); flex-wrap:nowrap; gap:0; width:100%; will-change: transform; }
.product-slider .main-slider .slide{ flex:0 0 100%; min-width:100%; max-width:100%; margin:0; padding:0; box-sizing:border-box; overflow:hidden; height:100%; }
.product-slider .slide img{ width:100%; max-width:100%; height:auto; object-fit:cover; display:block; max-height:60vh; }

/* Ensure no horizontal overflow from parent paddings/margins */
.product-slider, .product-slider * { box-sizing: border-box; }

/* Thumbnail row */
.product-slider .thumb-row{ display:flex; gap:0.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0.25rem 0; }
.product-slider .thumb-row .thumb-slide{ flex:0 0 auto; }
.thumb-slide{ width:5.5rem; height:3.2rem; }

/* Controls */
.product-slider .slider-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.slider-prev, .slider-next{ background:var(--slider-button-bg); color:var(--slider-button-color); border:none; width:44px; height:44px; border-radius:999px; cursor:pointer; box-shadow:var(--slider-shadow); display:flex; align-items:center; justify-content:center; font-size:20px; pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); }
.slider-prev{ left:8px; }
.slider-next{ right:8px; }
.slider-pagination{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:0.5rem; pointer-events:auto; background:rgba(0,0,0,0.32); padding:6px 10px; border-radius:999px; }
.slider-pagination .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.7); border:none; padding:0; }

/* Lightbox minimal styles preserved */
.product-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); z-index:9999; padding:1rem; }
.product-lightbox.open{ display:flex; }
.product-lightbox .lightbox-inner{ max-width:1200px; width:100%; display:flex; align-items:center; justify-content:center; }
.product-lightbox .lightbox-slide{ display:none; }
.product-lightbox .lightbox-slide.active{ display:block; }
.product-lightbox .lightbox-slide img{ max-width:90vw; max-height:80vh; width:auto; height:auto; display:block; border-radius:6px; }
.lightbox-close{ position:absolute; top:8px; right:8px; background:var(--slider-button-bg); color:var(--slider-button-color); border:none; padding:0.35rem; border-radius:999px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.25); z-index:3; display:flex; align-items:center; justify-content:center; }

/* Responsive tweaks */
@media (max-width: 640px){
  .thumb-slide{ width:4.6rem; height:2.6rem; }
  .slider-prev, .slider-next{ width:40px; height:40px; font-size:18px; }
  .slider-pagination .dot{ width:8px; height:8px; }
  .product-slider .main-viewport{ height:44vh; }
}

/* Explicit: always flush to left (no left gap) on all viewports as requested */
.product-slider{ margin-left:0 !important; padding-left:0 !important; }

/* Small phones aggressive compacting if desired */
@media (max-width: 480px){
  /* Prevent any side padding/margin that can create horizontal overflow */
  .product-slider, .product-slider .main-viewport, .product-slider .main-slider, .product-slider .slide {
    padding:0 !important; margin:0 !important; box-sizing:border-box !important; width:100% !important; overflow:hidden !important;
  }

  /* Slightly shorter viewport on small phones so images fit vertically */
  /* reduce viewport height by ~10% to shrink images a bit */
  .product-slider .main-viewport{ height:32.4vh !important; }

  /* Ensure each slide occupies full viewport width (avoid peeking adjacent slides) */
  .product-slider .main-slider .slide{ min-width:100% !important; max-width:100% !important; flex:0 0 100% !important; }

  /* Make images scale to fit inside the available area without overflowing horizontally
     - use contain so the whole image is visible; center it horizontally
  */
  .product-slider .slide img{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    /* shrink image max-height by ~10% to avoid horizontal overflow */
    max-height:32.4vh !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto !important;
  }

  /* Compact controls and thumbs to avoid pushing layout */
  /* slightly reduce control and thumb sizes (~10%) */
  .slider-prev, .slider-next{ width:32px !important; height:32px !important; left:6px !important; right:6px !important; }
  .product-slider .thumb-row .thumb-slide, .product-slider .ps-thumb{ width:50px !important; height:32px !important; }
}

/* Ensure responsive behaviour for tablets/phones under 768px */
@media (max-width: 768px){
  /* remove any side paddings that can cause peek */
  .product-slider{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
  .product-slider .main-viewport{ width:100% !important; height:44vh; }
  /* keep thumbnails visible but make them compact and horizontally scrollable so they don't push the main slider */
  .product-slider .thumb-row, .product-slider .ps-thumbs{ display:flex !important; gap:8px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; width:100% !important; box-sizing:border-box !important; }
  .product-slider .thumb-row .thumb-slide, .product-slider .ps-thumb{ flex:0 0 auto; width:64px; height:44px; }
  /* make nav buttons slightly inset so they don't overflow */
  .slider-prev{ left:6px !important; }
  .slider-next{ right:6px !important; }
}

/* Force slides to be full-viewport width on small screens to avoid multiple slides visible side-by-side */
@media (max-width: 768px){
  .product-slider .main-slider .slide{
    min-width:100% !important;
    max-width:100% !important;
    flex: 0 0 100% !important;
  }
  .product-slider .main-slider{ gap:0 !important; }
  .product-slider .slide img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; }
}

/* Lightweight slider styles */
:root{
  --slider-button-bg:#3b98a5;
  --slider-button-color:#ffffff;
  --slider-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.product-slider{ width:100%; position:relative; }
.product-slider .main-viewport{ width:100%; overflow:hidden; border-radius:0.5rem; box-shadow:var(--slider-shadow); position:relative; box-sizing: border-box; }
.product-slider .main-slider{ display:flex; transform:translate3d(0,0,0); will-change: transform; transform-origin: 0 0; }
.product-slider .main-slider{ display:flex; transform:translate3d(0,0,0); flex-wrap:nowrap; gap:0; width:100%; will-change: transform; transform-origin: 0 0; }
.product-slider .main-slider .slide{ flex:0 0 100%; min-width:100%; max-width:100%; margin:0; padding:0; box-sizing:border-box; overflow:hidden; }
.product-slider .slide img{ width:100%; max-width:100%; height:auto; object-fit:cover; display:block; max-height:60vh; }
/* Ensure viewport and slides have no padding/margin that could create visible sliver */
.product-slider{ padding:0; }
.product-slider .main-viewport{ padding:0; margin:0; overflow:hidden; }
.product-slider .main-slider{ gap:0 !important; }
.product-slider .main-slider img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Improve touch handling across browsers */
/* Reverted simple slider CSS (earlier style) */
:root{ --slider-button-bg:#3b98a5; --slider-button-color:#fff; }
.product-slider{ width:100%; position:relative; overflow:hidden; box-sizing:border-box; }
.product-slider .main-viewport, .product-slider .ps-viewport{ width:100%; overflow:hidden; box-sizing:border-box; }
.product-slider .main-slider, .product-slider .ps-track{ display:flex; transition:transform 350ms ease; will-change:transform; }
.product-slider .main-slider .slide, .product-slider .ps-slide{ flex:0 0 100%; min-width:100%; box-sizing:border-box; overflow:hidden; }
.product-slider .slide img, .product-slider .ps-slide img{ display:block; width:100%; height:auto; object-fit:cover; }

/* Controls */
.product-slider .slider-prev, .product-slider .slider-next, .product-slider .ps-btn{ position:absolute; top:50%; transform:translateY(-50%); background:var(--slider-button-bg); color:var(--slider-button-color); border:0; width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.product-slider .slider-prev{ left:8px; }
.product-slider .slider-next{ right:8px; }

.slider-pagination{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:.5rem; z-index:2; }
.slider-pagination .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.8); border:0; }

/* Thumbs */
.product-slider .thumb-row, .product-slider .ps-thumbs{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-top:8px; }
.product-slider .thumb-slide, .product-slider .ps-thumb{ flex:0 0 auto; width:72px; height:48px; overflow:hidden; border-radius:6px; cursor:pointer; }
.product-slider .thumb-slide img, .product-slider .ps-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Lightbox basic */
.product-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); z-index:9999; }
.product-lightbox.open{ display:flex; }
.product-lightbox .lightbox-slide{ display:none; }
.product-lightbox .lightbox-slide.active{ display:block; }

/* Responsive tweaks */
@media (max-width:768px){
  .product-slider .thumb-row, .product-slider .ps-thumbs{ width:100%; }
  .product-slider .thumb-slide, .product-slider .ps-thumb{ width:64px; height:44px; }
  .product-slider .slide, .product-slider .ps-slide{ min-width:100%; }
}

/* keep page overflow sane; rely on .product-slider overflow:hidden */
html,body{ overflow-x:auto; }
.thumb-slide.active{ border-color:var(--slider-button-bg); box-shadow:0 6px 18px rgba(0,0,0,0.12); transform:translateY(-2px); }