/* KSEIBI New Products Slider
   Sticky tile + paged window; desktop unchanged; phone shows 2-up; no wheel scroll */

/* ---- Vars & base -------------------------------------------------------- */
.knp-slider{
  --gap:12px;
  --cols-total:5;   /* sticky + 4 products */
  --cols-slide:4;   /* products per page on desktop */
  --dot-size:8px;
  --dot-gap:8px;
  position:relative; touch-action:pan-y;
}
.knp-slider *, .knp-slider *::before, .knp-slider *::after{ box-sizing:border-box; }
.knp-slider .knp-slider-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.knp-slider .knp-title{ font-size:1.25rem; font-weight:700; margin:0 0 .25rem 0; }

/* ---- Grid: [sticky | window] ------------------------------------------- */
.knp-viewport{
  display:grid;
  grid-template-columns:
    minmax(0, calc((100% - (var(--gap) * (var(--cols-total) - 1))) / var(--cols-total)))
    minmax(0, 1fr);
  gap:var(--gap); align-items:stretch;
}

/* Sticky */
.knp-sticky{ min-width:0; }
.knp-sticky .knp-card{
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; height:100%;
}
.knp-sticky .knp-tile{ display:block; width:100%; }
.knp-sticky .knp-imgwrap{
  aspect-ratio:1/1; width:100%; display:flex; align-items:center; justify-content:center;
  background:#fafafa; padding:0 !important; margin:0 !important; border:0 !important;
}
.knp-sticky .knp-imgwrap img{
  max-width:92%; max-height:92%; object-fit:contain; display:block; width:auto; height:auto;
}

/* Window (clip off-screen pages) */
.knp-window{ position:relative; overflow:hidden; min-width:0; background:#fff; border-radius:14px; }
.knp-window .knp-track{ display:flex; transition:transform .45s ease; will-change:transform; }

/* Pages: forced layout */
.knp-window .knp-page{
  flex:0 0 100% !important; width:100% !important;
  display:flex !important; flex-wrap:nowrap !important;
  gap:var(--gap) !important; padding:12px !important; box-sizing:border-box !important;
  margin:0 !important; overflow:visible !important; scroll-snap-type:none !important;
  list-style:none !important;
}

/* Cards in pages */
.knp-window .knp-page .knp-card{
  flex:0 0 calc((100% - (var(--gap) * (var(--cols-slide) - 1))) / var(--cols-slide)) !important;
  max-width:calc((100% - (var(--gap) * (var(--cols-slide) - 1))) / var(--cols-slide)) !important;
  margin:0 !important; height:100%;
  min-width:0;
  background:#fff; border:1px solid #eee; border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s ease;
}
.knp-window .knp-page .knp-card > *{ width:100%; }

/* Kill theme widths that caused 5–6-in-a-row mess */
.indexDeals_2 .indexDeals_list,
.indexDeals_2 .indexDeals_list .compItem{
  width:auto !important; max-width:none !important; float:none !important;
}

/* Images */
.knp-slider .knp-tile{ display:block; width:100%; text-decoration:none; color:inherit; }
.knp-slider .knp-imgwrap{
  aspect-ratio:1/1; width:100%; display:flex; align-items:center; justify-content:center;
  background:#fafafa; padding:0 !important; margin:0 !important; border:0 !important;
}
.knp-slider .knp-imgwrap img{
  max-width:92%; max-height:92%; object-fit:contain; display:block; width:auto; height:auto;
  border:0 !important; box-shadow:none !important;
}

/* Meta + content alignment */
.knp-slider .knp-meta{
  padding:10px 10px 12px; border-top:1px solid #f1f1f1; display:flex; flex-direction:column;
}
.knp-slider .knp-name{
  font-size:.92rem; line-height:1.25; font-weight:600; margin:6px 0 10px;
  min-height:2.6em; /* lock two lines for equal card heights */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.knp-slider .knp-price{ display:none !important; }
.knp-meta{ font-size:.85rem; line-height:1.2; color:#444; margin-top:6px; }
.knp-brand{ font-weight:600; }
.knp-ref{ color:#666; }
.knp-avail{ color:#0a7a0a; }

/* CTA baseline alignment (works whether you wrap it or not) */
.knp-cta{ margin:12px 10px 10px; margin-top:auto; }
.knp-cta .btn, .knp-cta a{ display:block; width:100%; }
.knp-meta .btn, .knp-meta a.btn{ margin-top:auto; width:100%; }

/* Hover */
.knp-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.14); }
.knp-card.knp-first:hover{ box-shadow:none !important; transform:none !important; }

/* ---- Arrows ------------------------------------------------------------- */
.knp-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid #e8e8e8; background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:9999; box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  pointer-events:auto;
}
.knp-arrow:hover{ box-shadow:0 6px 18px rgba(0,0,0,.12); transform:translateY(-50%) scale(1.03); }
.knp-arrow.is-disabled{ opacity:.4; pointer-events:none; }
.knp-window .knp-prev{ left:8px; }
.knp-window .knp-next{ right:8px; }

/* ---- Dots --------------------------------------------------------------- */
.knp-dots{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--dot-gap); z-index:9990; padding:6px 8px;
  background:rgba(255,255,255,.75); border-radius:999px; backdrop-filter:saturate(1.2) blur(2px);
}
.knp-dot{ width:var(--dot-size); height:var(--dot-size); border-radius:50%; border:0; background:#bbb; cursor:pointer; padding:0; }
.knp-dot.is-active{ background:#111; }

/* Drag state */
.knp-dragging, .knp-dragging *{ user-select:none !important; cursor:grabbing !important; }

/* No radius anywhere (keep if you want square look) */
.knp-slider, .knp-slider *{ border-radius:0 !important; }

/* Keep theme transition */
.indexDeals_2 .indexDeals_list .compItem{
  -webkit-transition:-webkit-box-shadow .4s ease;
  transition:box-shadow .4s ease, -webkit-box-shadow .4s ease;
}

/* ---- Breakpoints -------------------------------------------------------- */
@media (max-width: 1200px){
  .knp-slider{ --gap:10px; --cols-total:5; --cols-slide:4; }
  .knp-window .knp-page{ padding:10px !important; }
}
@media (max-width: 992px){
  .knp-slider{ --gap:10px; --cols-total:3; --cols-slide:2; }
}

/* Tablets: stack sticky over slider */
@media (max-width: 768px){
  .knp-viewport{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
  }
  .knp-sticky{ grid-column: 1 / -1; }
  .knp-window{ grid-column: 1 / -1; }
}

/* Phones: hide sticky; 2 products per page; bigger dots */
@media (max-width: 576px){
  .knp-sticky{ display:none !important; }
  .knp-viewport{ grid-template-columns: 1fr !important; }
  .knp-slider{ --gap:10px; --cols-total:1; --cols-slide:2; --dot-size:10px; --dot-gap:10px; }
  .knp-window .knp-page{ padding:10px !important; }
  .knp-window .knp-prev{ left:6px; }
  .knp-window .knp-next{ right:6px; }
}