/* Outer wrapper */
.wlmpb.wlmpb-constrained {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  position: relative;
}

/* Sticky topbar inside the box (search + 0/10 + total + Köp) */
.wlmpb-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
}

/* Header row inside the topbar */
.wlmpb-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

/* Search */
.wlmpb-search-wrap { position: relative; flex: 1; }
.wlmpb-search {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.wlmpb-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #eee;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  border: 0;
  cursor: pointer;
  line-height: 26px;
}

/* Summary row */
.wlmpb-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.wlmpb-summary--top .wlmpb-count { display:none !important; } /* hide 0/10 in topbar */
.wlmpb-total { font-weight: 700; }
.wlmpb-total .wlmpb-total-amount { font-weight: 700; }

/* Add-to-cart button */
.wlmpb-add-to-cart {
  background: #ed1c24;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  font-weight: bold;
}
.wlmpb-add-to-cart:disabled { opacity: .5; cursor: not-allowed; }

/* Grid + loader */
.wlmpb-grid-wrap { position: relative; }
.wlmpb-grid-loader { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background: rgba(255,255,255,0.7); }
.wlmpb-grid-loader.is-visible { display:flex; }
.wlmpb-spinner, .wlmpb-btn-spinner { width: 18px; height: 18px; border: 2px solid #ccc; border-top-color: #333; border-radius: 50%; animation: wlmpb-spin .8s linear infinite; }
.wlmpb-btn-spinner { display: none; }
@keyframes wlmpb-spin { to { transform: rotate(360deg); } }

/* Grid */
.wlmpb-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, 1fr); /* 6-wide desktop */
}
@media (max-width: 1200px){
  .wlmpb-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}

/* Product card */
.wlmpb-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  overflow: hidden;
  text-align: center;
}
.wlmpb-card img { width: 100%; height: 140px; object-fit: contain; }
.wlmpb-card .name {
  text-align: center;
  font-size: 14px; font-weight: 700;
  min-height: 40px;                 /* space for 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wlmpb-card .unit {
  text-align: center;
  font-size: 13px;
  opacity: .9;
  font-weight: 700;
}

/* Quantity controls */
.wlmpb-qty {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.wlmpb-qty button {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 26px;
  cursor: pointer;
}
.wlmpb-q { min-width: 16px; text-align: center; }

/* Ripple */
.wlmpb-r { position: relative; overflow: hidden; }
.wlmpb-r .wlmpb-ripple, .wlmpb-slot .wlmpb-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  animation: wlmpb-ripple .5s ease-out; pointer-events: none; background: rgba(0,0,0,0.12);
}
@keyframes wlmpb-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Load more */
.wlmpb-more { display:flex; justify-content:center; margin:14px 0 90px; }
.wlmpb-load-more { min-width: 200px; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.wlmpb-load-more.is-hidden { display: none !important; }
.wlmpb-load-more.is-loading .wlmpb-load-text { opacity:.7; }
.wlmpb-load-more.is-loading .wlmpb-btn-spinner { display:inline-block !important; }

/* Bottom tray (fade only, no transform to avoid blur) */
.wlmpb-tray {
  position: sticky;
  bottom: 0;
  z-index: 9;
  background: rgba(255,255,255,0.98);
  border-top: 1px solid #eee;
  padding: 8px 10px;
  box-shadow: 0 -6px 12px rgba(0,0,0,0.04);
  transition: opacity 180ms ease;
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.wlmpb-tray.is-hidden { opacity: 0; pointer-events: none; transform: none !important; }

.wlmpb-tray-toggle { width: 100%; background: none; border: 0; font-weight: 700; display:flex; align-items:center; gap:8px; justify-content:center; padding:6px 4px 8px; cursor:pointer; }
.wlmpb-toggle-arrow { font-size: 12px; opacity: .7; }
.wlmpb-toggle-label { opacity: .85; }

/* Tray topbar (search + total + Köp) visible only when expanded */
.wlmpb-tray-topbar {
  display: none;
  gap: 10px;
  margin: 6px 0 10px;
}
.wlmpb-tray.is-expanded .wlmpb-tray-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 8px;
}
.wlmpb-tray-topbar .wlmpb-search-wrap { grid-column: 1 / -1; }
.wlmpb-summary--tray { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wlmpb-summary--tray .wlmpb-total { font-weight:700; }
.wlmpb-summary--tray .wlmpb-add-to-cart { flex:0 0 auto; }

/* Slots */
.wlmpb-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wlmpb-slot {
  border: 1px dashed #ddd; border-radius: 10px; padding: 6px; min-height: 64px;
  display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 6px;
  background: #fafafa; cursor: pointer; position: relative; overflow: hidden;
}
.wlmpb-slot.filled { border-style: solid; background: #fff; }
.wlmpb-slot-thumb {
  width: 48px; height: 48px; background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 8px; background-color: #fff; border: 1px solid #eee;
}
.wlmpb-slot-name { font-size: 12px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wlmpb-slot-qty { font-weight: 700; text-align: right; }

/* Mobile tweaks */
@media (max-width: 680px){
  .wlmpb-summary { flex-wrap: nowrap; } /* keep total + Köp on one line */
  .wlmpb-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
  .wlmpb-card img { height: 120px; }
  .wlmpb-slots { display: none; }
  .wlmpb-tray.is-expanded .wlmpb-slots { display: grid; grid-template-columns: repeat(2, 1fr); }
}