/* =====================================================================
 * KS-PDP-POLISH-V4 — fix screenshots feedback (2026-05-30)
 *
 * Issues addressed (from user screenshots):
 *  1. TL;DR text rendered white-on-white because color was inherited
 *     from a parent rule. .ks-aeo-tldr-text never declared its own color.
 *  2. Massive empty vertical gap (200-300px) below trust strip, above CTA.
 *     Caused by triple-cascading min-height:240px on .ks-buybox-features
 *     AND min-height:2800px !important on #content-wrapper (CLS hack
 *     dating back to v3/v4 polish — overshoots dramatically when the
 *     features grid is short).
 *  3. "TRUSTED SHOPS" badge clipped on the right because .ks-rating-widget
 *     hits container width boundary.
 *  4. "4,69/5" rating row: the /5 rendered hugely vs the digits due to a
 *     stale .ks-rw-divider / wholesale inheritance bug.
 *  5. Quantity stepper +/- buttons too tiny to click reliably.
 * ===================================================================== */

/* ---------- 1. TL;DR contrast ---------- */
body.page-product .ks-aeo-tldr,
body.page-product .ks-aeo-tldr * {
  color: #1a2433 !important;
}
body.page-product .ks-aeo-tldr-text {
  color: #1a2433 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  display: inline-block;
}
body.page-product .ks-aeo-tldr-label {
  background: #0078d4 !important;
  color: #fff !important;
}
body.page-product .ks-aeo-tldr {
  background: linear-gradient(to right, rgba(0, 120, 212, 0.06), rgba(0, 120, 212, 0.02)) !important;
  border: 1px solid #cdd9e6 !important;
}

/* ---------- 2. Kill empty-space reservations ---------- */
body#product .ks-buybox-features,
body.page-product .ks-buybox-features,
body#product .ks-features-grid,
body#product [class*="ks-product-trust"] {
  min-height: 0 !important;
  height: auto !important;
}
/* #content-wrapper reservation was a 2800px hack — keep CLS sane without
 * reserving a viewport of empty pixels. 600px is enough for the buybox
 * column to settle before the description tabs render. */
body#product #content-wrapper,
body.page-product #content-wrapper {
  min-height: 600px !important;
}
@media (max-width: 991px) {
  body#product #content-wrapper,
  body.page-product #content-wrapper {
    min-height: 700px !important;
  }
}

/* Tighten vertical rhythm in the buybox column */
body.page-product .pdp-col-buybox .product-information > * + * {
  margin-top: 10px;
}
body.page-product .ks-buybox-divider {
  margin: 10px 0 !important;
}
body.page-product .product-actions {
  margin-top: 8px !important;
}

/* ---------- 3. Trusted Shops badge clipping ---------- */
body.page-product .ks-rating-widget {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  max-width: 100%;
  padding: 6px 10px 6px 8px !important;
  box-sizing: border-box;
  overflow: visible !important;
}
body.page-product .ks-rw-badge {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 9.5px !important;
  padding: 3px 5px !important;
}

/* ---------- 4. Rating row "4,69/5" font fix ---------- */
body.page-product .ks-rw-score,
body.page-product .ks-rw-score * {
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  color: inherit !important;
}
body.page-product .ks-rw-score strong {
  font-size: 14px !important;
  color: #15803d !important;
  font-weight: 700 !important;
}
body.page-product .ks-rw-score :where(small, span, em, b):not(strong) {
  font-size: inherit !important;
}
/* The "/5" suffix lives in a sibling node — force normal sizing */
body.page-product .ks-rating-widget,
body.page-product .ks-rating-widget * {
  font-size: 13px;
  line-height: 1.3;
}
body.page-product .ks-rw-label {
  color: #64748b !important;
  font-size: 12px !important;
}

/* ---------- 5. Quantity stepper visibility ---------- */
body.page-product .product-quantity .qty,
body.page-product .product-quantity .bootstrap-touchspin,
body.page-product .input-group.bootstrap-touchspin {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
}
body.page-product .product-quantity input,
body.page-product .product-quantity input.input-group,
body.page-product .product-quantity #quantity_wanted,
body.page-product #quantity_wanted {
  width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: 0 !important;
  background: #fff !important;
}
body.page-product .bootstrap-touchspin .bootstrap-touchspin-up,
body.page-product .bootstrap-touchspin .bootstrap-touchspin-down,
body.page-product .product-quantity .input-group-btn-vertical button,
body.page-product .product-quantity button[type="button"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 22px !important;
  background: #f8fafc !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
}
body.page-product .bootstrap-touchspin .bootstrap-touchspin-up:hover,
body.page-product .bootstrap-touchspin .bootstrap-touchspin-down:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
body.page-product .bootstrap-touchspin .bootstrap-touchspin-down {
  border-bottom: 0 !important;
}

/* Make sure the CTA row aligns nicely */
body.page-product .product-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
body.page-product .product-add-to-cart .product-quantity {
  flex-shrink: 0;
}
body.page-product .product-add-to-cart .add-to-cart,
body.page-product .product-actions .btn-primary {
  flex: 1 1 auto;
  min-height: 52px !important;
}

/* Trust strip in header — bonus polish: ensure the green Dostępny badge
 * isn't isolated way up top with a huge gap below */
body.page-product .ks-availability-row {
  margin: 6px 0 8px !important;
}
body.page-product .ks-legal-strip {
  margin: 10px 0 12px !important;
}