/* ===========================
   ALSO-BOUGHT OVERLAY (others)
   =========================== */

/* Overlay shell */
.bb-others {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
  font-family: inherit;
}

.bb-others.is-open {
  pointer-events: auto;
  opacity: 1;
}

.bb-others__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
}

/* Panel base (desktop/tablet = bottom sheet) */
.bb-others__panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: min(1040px, calc(100vw - 32px));
  max-height: min(70vh, 720px);

  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,.25);
  overflow: hidden;

  translate: 0 110%;
  transition: none;
}

.bb-others.is-open .bb-others__panel {
  translate: 0 0;
}

/* Header */
.bb-others__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.bb-others__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.bb-others__close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.bb-others__close:hover { background: rgba(0,0,0,.10); }

/* Bodies */
.bb-others__body {
  padding: 14px 12px 18px;
}

/* Desktop/Tablet slider layout */
.bb-others__body--slider {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
}

.bb-others__body--list { display: none; }

/* Track: IMPORTANT -> overflow hidden, fixed auto column width to avoid overlaps */
.bb-others__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 360px;          /* fixed width prevents reflow/overlap */
  gap: 14px;

  overflow: hidden;
  scroll-behavior: smooth;

  padding: 2px 2px 8px;
  box-sizing: border-box;
}

/* Nav buttons */
.bb-others__nav {
  border: 0;
  background: rgba(0,0,0,.06);
  border-radius: 12px;
  cursor: pointer;
  height: 44px;
  width: 44px;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.bb-others__nav:hover { background: rgba(0,0,0,.10); }
.bb-others__nav:disabled { opacity: .35; cursor: default; }

/* ---------------------------
   Product Card (article)
   --------------------------- */

.bb-others__item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;

  /* fixed card geometry to avoid overlap / layout jumps */
  width: 360px;                 /* must match grid-auto-columns */
  height: 140px;                /* stable height, not too tall */

  padding: 12px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;

  overflow: hidden;
}

/* Image: forced square */
.bb-others__img-wrap {
  width: 76px;
  height: 76px;                 /* forced square without relying on aspect-ratio */
  flex-shrink: 0;

  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.bb-others__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right side layout: ensure bottom area sticks to bottom */
.bb-others__info {
  min-width: 0;                 /* prevents flex/grid overflow */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Title: 1 line */
.bb-others__name {
  font-size: 0.86rem;           /* smaller */
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Excerpt: 2 lines */
.bb-others__excerpt {
  font-size: 0.80rem;           /* smaller */
  line-height: 1.3;
  margin: 0;

  color: rgba(0,0,0,.70);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta pinned to bottom, price above button */
.bb-others__meta {
  margin-top: auto;             /* pushes to bottom */
  display: flex;
  flex-direction: column;       /* price then button */
  align-items: flex-end;        /* right aligned */
  gap: 6px;
  padding-top: 10px;
}

/* Price */
.bb-others__price {
  font-weight: 800;
  font-size: 0.90rem;
  line-height: 1.1;
  white-space: nowrap;
}

/* CTA */
.bb-others .add-to-cart {
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.75em;            /* requested */
  font-weight: 700;
  line-height: 1.1;
  background: var(--bg-dark);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.bb-others .add-to-cart:hover { filter: brightness(1.06); }

/* ---------------------------
   Mobile: off-canvas from right
   --------------------------- */
@media (max-width: 768px) {

  .bb-others__panel {
    left: auto;
    transform: none;
    right: 0;
    top: 0;
    bottom: 0;

    width: min(420px, 92vw);
    max-height: 100vh;

    border-radius: 16px 0 0 16px;

    translate: 110% 0;
  }

  .bb-others.is-open .bb-others__panel {
    translate: 0 0;
  }

  .bb-others__body--slider { display: none; }

  .bb-others__body--list {
    display: block;
    height: calc(100vh - 62px);
    overflow: auto;
    padding: 12px 12px 18px;
  }

  /* List cards full width, stacked */
  .bb-others__item {
    width: 100%;
    height: 142px;
    grid-template-columns: 84px 1fr;
  }

  .bb-others__img-wrap {
    width: 84px;
    height: 84px;
  }
}

/* Variable Preise IMMER rechtsbündig */
.bb-others__price,
.bb-others__price * {
  text-align: right;
  justify-content: flex-end;
}

.bb-others__price del,
.bb-others__price ins {
  display: inline-block;
}

/* Variant product button */
.bb-others .add-to-cart--variant {
  background: #000080;
  color: #fff;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0.75em;
  font-weight: 700;

  padding: 8px 12px;
  border-radius: 10px;
}

.bb-others .add-to-cart--variant:hover {
  filter: brightness(1.1);
}

/* Icon alignment */
.bb-others .add-to-cart i {
  font-size: 0.85em;
}