/* ============================================================
   modules/bundle — "goes well together" on the product page.
   Owns nothing outside `.bundle`. Deleting this file and its
   folder removes the feature and touches no other stylesheet.
   ============================================================ */

.bundle {
  margin-top: var(--space-9);
  padding: var(--space-6);
  background: var(--surface-sunken);
  border: 1px solid var(--gr-border);
  border-radius: var(--radius-lg);
}

.bundle__head { margin-bottom: var(--space-5); }

/* The reason the merchant put these together. It is the whole justification for
   the block existing when there is no purchase data behind it, so it gets real
   reading width rather than being squeezed under the heading as a caption. */
.bundle__why {
  margin: var(--space-2) 0 0;
  max-width: 62ch;
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

.bundle__row {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

/* Grid, so every card is the same width and a wrapped last row lines up with
   the one above it instead of stretching to fill. auto-fit does the column
   count; there is no breakpoint deciding "three across" anywhere. */
.bundle__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bundle__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  /* minmax(0, 1fr) on the last column above, and min-width:0 here, are what
     stop a long product title forcing the card wider than its grid track. */
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--gr-border);
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Unticked items stay legible — greyed out, not hidden. The customer needs to
   see what they just chose not to buy. */
.bundle__item.is-off { opacity: .5; }

.bundle__pick input {
  width: 18px;
  height: 18px;
  accent-color: var(--gr-cyan);
  cursor: pointer;
}

.bundle__thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  flex-shrink: 0;
}
.bundle__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bundle__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.bundle__tag {
  align-self: flex-start;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gr-cyan-dark);
}

.bundle__title {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-decoration: none;
  /* Two lines, then ellipsis. Titles here run to 45 characters and a card that
     grows to fit the longest one leaves the row ragged. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bundle__title:hover { color: var(--link); }

.bundle__price { font-size: var(--fs-14); white-space: nowrap; }
.bundle__was { color: var(--text-muted); margin-left: 4px; font-weight: var(--fw-regular); }

/* Only rendered for parts with an MOQ. The price above it is the line total for
   that minimum, not a unit price, and this is the line that says so. */
.bundle__qty {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* ---- Summary ---------------------------------------------------------- */
.bundle__summary {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bundle__count { margin: 0; color: var(--text-secondary); font-size: var(--fs-14); }

.bundle__total {
  margin: 0;
  font-size: var(--fs-31);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.bundle__save {
  margin: 0;
  color: var(--gr-success);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
}

.bundle__summary .btn-gr { margin-top: var(--space-3); }
.bundle__note { margin: 0; color: var(--text-muted); }

/* Desktop: items on the left, the decision on the right. Below 992 the summary
   drops beneath the items so the CTA stays within thumb reach at the end of the
   list rather than floating above it. */
@media (min-width: 992px) {
  .bundle__row { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 575.98px) {
  .bundle { padding: var(--space-5) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .bundle__item { transition: none; }
}