/**
 * ds_bundles — front: plakietka oszczędności, skład zestawu, „Taniej w zestawie".
 * Kolory przez zmienne CSS — motyw może je nadpisać (:root { --ds-bundles-accent: … }).
 */
:root {
  --ds-bundles-accent: #1f7a3d;
  --ds-bundles-accent-bg: #e9f6ee;
  --ds-bundles-border: #e3e3e3;
  --ds-bundles-muted: #6b6b6b;
}

.ds-bundles-badge { color: var(--ds-bundles-accent); line-height: 1.35; }
.ds-bundles-badge strong { font-weight: 700; }
.ds-bundles-badge--product {
  display: flex; flex-direction: column; gap: .15rem;
  margin: .5rem 0 .75rem; padding: .5rem .75rem;
  background: var(--ds-bundles-accent-bg); border-left: 3px solid var(--ds-bundles-accent); border-radius: 4px;
}
.ds-bundles-badge__save { font-size: 1rem; }
.ds-bundles-badge__separately { color: var(--ds-bundles-muted); font-size: .875rem; }
.ds-bundles-badge__separately strong { font-weight: 600; text-decoration: line-through; }
.ds-bundles-badge--listing {
  display: inline-block; margin-top: .25rem; padding: .1rem .45rem;
  background: var(--ds-bundles-accent-bg); border-radius: 3px; font-size: .8125rem;
}

.ds-bundles-items, .ds-bundles-packs { margin: 1.5rem 0; }
.ds-bundles-items__title, .ds-bundles-packs__title { margin-bottom: .75rem; }
.ds-bundles-items__list { display: grid; gap: .75rem; }
.ds-bundles-item {
  display: grid; grid-template-columns: 96px 1fr; gap: .75rem;
  padding: .75rem; border: 1px solid var(--ds-bundles-border); border-radius: 4px; background: #fff;
}
.ds-bundles-item__image img, .ds-bundles-pack__image img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
}
.ds-bundles-item__name { margin: 0 0 .25rem; font-weight: 600; }
.ds-bundles-item__variant { display: block; color: var(--ds-bundles-muted); font-weight: 400; font-size: .875rem; }
.ds-bundles-item__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .35rem; font-size: .875rem; }
.ds-bundles-item__price { font-weight: 600; }
.ds-bundles-item__features { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0 0 .35rem; font-size: .8125rem; }
.ds-bundles-item__feature { display: flex; gap: .25rem; }
.ds-bundles-item__feature dt { font-weight: 400; color: var(--ds-bundles-muted); }
.ds-bundles-item__feature dt::after { content: ":"; }
.ds-bundles-item__feature dd { margin: 0; }
.ds-bundles-item__short { font-size: .875rem; }
.ds-bundles-item__short p:last-child { margin-bottom: 0; }
.ds-bundles-item__more { padding: 0; margin: .25rem 1rem .25rem 0; font-size: .875rem; }
.ds-bundles-item__full { margin: .5rem 0; font-size: .875rem; }
.ds-bundles-item__link { font-size: .875rem; }

.ds-bundles-packs__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.ds-bundles-pack {
  display: flex; flex-direction: column; padding: .75rem;
  border: 1px solid var(--ds-bundles-border); border-radius: 4px; background: #fff;
}
.ds-bundles-pack__body { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.ds-bundles-pack__name { margin: .5rem 0 0; font-weight: 600; }
.ds-bundles-pack__units { margin: 0; color: var(--ds-bundles-muted); font-size: .8125rem; }
.ds-bundles-pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin: 0; }
.ds-bundles-pack__now { font-weight: 700; }
.ds-bundles-pack__separately { color: var(--ds-bundles-muted); font-size: .8125rem; }
.ds-bundles-pack__cta { margin-top: auto; align-self: flex-start; }

@media (min-width: 768px) {
  .ds-bundles-item { grid-template-columns: 120px 1fr; }
}

/* Motywy bez Bootstrapa (np. dynamite): przyciski modułu wyglądają jak przyciski także bez klas .btn.
   :where() ma zerową specyficzność, więc motyw z Bootstrapem (classic, hummingbird) wygrywa swoim .btn. */
:where(.ds-bundles-item__more) {
  background: none; border: 0; color: var(--ds-bundles-accent); font: inherit; font-size: .875rem;
  text-decoration: underline; cursor: pointer;
}
:where(.ds-bundles-pack__cta) {
  display: inline-block; padding: .4rem .9rem; border: 1px solid var(--ds-bundles-accent); border-radius: 4px;
  background: var(--ds-bundles-accent); color: #fff; font-size: .875rem; text-decoration: none; cursor: pointer;
}
.ds-bundles-items, .ds-bundles-packs, .ds-bundles-item, .ds-bundles-pack { min-width: 0; }
.ds-bundles-item__body { min-width: 0; overflow-wrap: anywhere; }

/* Promocja składnika na kaflu składu: cena promocyjna, przekreślona regularna, znaczek */
.ds-bundles-item__regular { color: var(--ds-bundles-muted); font-weight: 400; }
.ds-bundles-item__price--promo { color: #c0392b; }
.ds-bundles-item__promo {
  display: inline-block; padding: .05rem .4rem; border-radius: 3px; background: #c0392b; color: #fff;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
}