/* Homepage "Frisch erschienen" — Karussell: 4 sichtbare Karten, rotiert nach links.
   Wird erst aktiv, wenn das JS (lus-newcarousel-v1.js) den Track markiert hat
   (.lus-np-on am Wrapper) — ohne JS bleibt das bestehende Grid aus custom-theme-*.css. */

.lus-newproducts.lus-np-on .lus-np-viewport{
  width:100%;
  overflow:hidden;
}

.lus-newproducts.lus-np-on .featured-products .products.row.lus-np-track,
.lus-newproducts.lus-np-on .products.row.lus-np-track,
.lus-newproducts.lus-np-on .products.lus-np-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  grid-template-columns:none !important;
  gap:28px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  will-change:transform;
}

.lus-newproducts.lus-np-on .products.lus-np-track > .js-product,
.lus-newproducts.lus-np-on .products.lus-np-track > .product,
.lus-newproducts.lus-np-on .products.lus-np-track > [class*="col-"]{
  flex:0 0 calc((100% - 3 * 28px) / 4) !important;
  max-width:calc((100% - 3 * 28px) / 4) !important;
  min-width:0 !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
}

@media (max-width:900px){
  .lus-newproducts.lus-np-on .products.lus-np-track > .js-product,
  .lus-newproducts.lus-np-on .products.lus-np-track > .product,
  .lus-newproducts.lus-np-on .products.lus-np-track > [class*="col-"]{
    flex:0 0 calc((100% - 2 * 28px) / 3) !important;
    max-width:calc((100% - 2 * 28px) / 3) !important;
  }
}

@media (max-width:600px){
  .lus-newproducts.lus-np-on .featured-products .products.row.lus-np-track,
  .lus-newproducts.lus-np-on .products.row.lus-np-track,
  .lus-newproducts.lus-np-on .products.lus-np-track{gap:14px !important;}
  .lus-newproducts.lus-np-on .products.lus-np-track > .js-product,
  .lus-newproducts.lus-np-on .products.lus-np-track > .product,
  .lus-newproducts.lus-np-on .products.lus-np-track > [class*="col-"]{
    flex:0 0 calc((100% - 14px) / 2) !important;
    max-width:calc((100% - 14px) / 2) !important;
  }
}

/* ---- v2: Bedienung durch den Nutzer ---- */

/* Buehne umschliesst das Viewport, damit die Pfeile daran ausgerichtet werden
   koennen, ohne die Karten zu ueberdecken. */
.lus-newproducts.lus-np-on .lus-np-stage{
  position:relative;
  /* box-sizing ist Pflicht: ohne sie addiert sich das Padding zur Breite,
     die Buehne wird breiter als das Fenster und beide Pfeile landen
     ausserhalb des sichtbaren Bereichs. */
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  padding:0 54px;          /* Platz fuer die Pfeile links und rechts */
  outline:none;
}

.lus-newproducts.lus-np-on .lus-np-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d9d9d9;
  border-radius:50%;
  background:#fff;
  color:#16233f;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lus-newproducts.lus-np-on .lus-np-arrow:hover,
.lus-newproducts.lus-np-on .lus-np-arrow:focus-visible{
  background:var(--lus-red,#d20007);
  border-color:var(--lus-red,#d20007);
  color:#fff;
  box-shadow:0 4px 14px rgba(210,0,7,.30);
}
.lus-newproducts.lus-np-on .lus-np-arrow:active{transform:translateY(-50%) scale(.94);}
.lus-newproducts.lus-np-on .lus-np-arrow--zurueck{left:0;}
.lus-newproducts.lus-np-on .lus-np-arrow--vor{right:0;}

/* Sichtbarer Fokusrahmen, wenn per Tastatur geblaettert wird. */
.lus-newproducts.lus-np-on .lus-np-stage:focus-visible{
  box-shadow:0 0 0 3px rgba(210,0,7,.35);
  border-radius:6px;
}

@media (max-width:900px){
  .lus-newproducts.lus-np-on .lus-np-stage{padding:0 46px;}
  .lus-newproducts.lus-np-on .lus-np-arrow{width:38px;height:38px;}
}

/* Auf dem Handy stoeren die Pfeile mehr als sie helfen — dort wird gewischt. */
@media (max-width:600px){
  .lus-newproducts.lus-np-on .lus-np-stage{padding:0;}
  .lus-newproducts.lus-np-on .lus-np-arrow{display:none;}
}