/* KS-PDP-ATTACH-V1 — 2026-09-22
 * Buy-box attach strip ("Kup razem"). Sits directly under the CTA so it is
 * reachable at ~30% scroll depth instead of the 59% (desktop) / 42% (mobile)
 * of the legacy .product-accessories block, which measured PDP scroll shows
 * fewer than 10% of desktop purchasers ever reach.
 * Deliberately shares NO selector with button.add-to-cart or #ks-sticky-cta,
 * which the live pdp-cta-copy-test / product-cta-test-1-1 experiments mutate.
 */
.ks-attach {
  /* .product-information is a flex column whose children carry explicit
     order values (ks-pdp-mobile-reorder-v1.css / KS-PDP-DOM-V1):
     product-actions = 9, blockreassurance_product = 10. Without an order
     of our own we default to 0 and jump above the price block. 10 ties
     with reassurance and DOM order breaks the tie in our favour, so the
     strip lands directly under the add-to-cart button. */
  order: 10;
  margin: 18px 0 4px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(248, 250, 252, .9), rgba(255, 255, 255, .9));
}
.ks-attach__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.ks-attach__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
}
.ks-attach__hint {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: #64748b;
}
.ks-attach__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ks-attach__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  background: #fff;
}
.ks-attach__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: #f8fafc;
}
.ks-attach__body { flex: 1 1 auto; min-width: 0; }
.ks-attach__name {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: #0f172a;
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ks-attach__name:hover { text-decoration: underline; }
.ks-attach__price {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
/* Distinct class name on purpose — the CTA experiments target
   button.add-to-cart / [data-button-action="add-to-cart"] only. */
.ks-attach__btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #15803d;
  border-radius: 8px;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 38px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.ks-attach__btn:hover:not([disabled]) { background: #15803d; }
.ks-attach__btn[disabled] { opacity: .55; cursor: not-allowed; }
.ks-attach__btn.is-busy { pointer-events: none; opacity: .7; }
.ks-attach__status {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  min-height: 0;
}
.ks-attach__status:empty { display: none; }
.ks-attach__status--ok { color: #15803d; }
.ks-attach__status--err { color: #b91c1c; }
.ks-attach__status a { color: inherit; font-weight: 700; }

@media (max-width: 575px) {
  .ks-attach { padding: 12px; }
  .ks-attach__item { gap: 8px; padding: 7px; }
  .ks-attach__thumb { width: 38px; height: 38px; }
  .ks-attach__btn { padding: 0 11px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-attach__btn { transition: none; }
}