/* Desktop-only & font */
.lps-wrap{ position:relative; margin: 16px 0 24px; --lps-gap:16px; font-family: "Lekton", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
@media (max-width: 1024px){ .lps-wrap{ display:none !important; } }

.lps-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lps-title{ font-size: clamp(18px, 2vw, 24px); font-weight:700; margin:0; }

/* Viewport is the scroll container */
.lps-viewport{
  overflow-x:auto; overflow-y:hidden; position:relative; scroll-snap-type: x mandatory;
  -ms-overflow-style: none;       /* IE/Edge */
  scrollbar-width: none;          /* Firefox */
}
.lps-viewport::-webkit-scrollbar{ display:none; }  /* Chrome/Safari */

.lps-track{
  display:flex;
  gap: var(--lps-gap);
  padding: 4px;
}

/* Each page is 100% width; inside page we place 2x2 grid */
.lps-page{ flex: 0 0 100%; scroll-snap-align: start; }
.lps-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--lps-gap);
}

/* Card */
.lps-card{
  display:flex;
  gap: 14px;
  align-items: stretch;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  height: 100%;
}

/* Image */
.lps-imgbox{
  flex: 0 0 180px;
  max-width: 200px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  overflow:hidden;
  background: transparent;
}
.lps-imgbox a{ display:block; width:100%; height:100%; }
.lps-imgbox img{
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  display:block;
}

/* Content */
.lps-content{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:1;
  min-width:0;
}
.lps-titleline a{
  color:inherit;
  text-decoration:none;
  font-weight:600;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.lps-price{ font-size:16px; font-weight:700; margin-top:6px; }
.lps-actions{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.lps-actions .button{ border-radius: 999px; padding: 9px 14px; font-size: 14px; }

/* Bottom controls: arrows sides, dots center */
.lps-bottom{ display:flex; align-items:center; justify-content:center; margin-top:10px; position:relative; }
.lps-bottom .lps-prev{ position:absolute; left:0; }
.lps-bottom .lps-next{ position:absolute; right:0; }

.lps-btn{
  width:36px; height:36px; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  background:#fff; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s;
}
.lps-btn:hover{ box-shadow:0 2px 8px rgba(0,0,0,.14); transform: translateY(-1px); }
.lps-btn[disabled]{ opacity:.35; cursor:not-allowed; box-shadow:none; transform:none; }

/* Dots */
.lps-dots{ display:flex; gap:6px; justify-content:center; }
.lps-dot{ width:6px; height:6px; border-radius:999px; background:#d0d4dd; }
.lps-dot.is-active{ background:#444; }