/* =====================================================================
 * KS-PDP-CRO-V1 — Product detail page conversion-rate uplifts (2026-05-28)
 *
 * Bundles 10 CRO changes from the 2026-05-28 audit. Loaded on product
 * pages only (gate via head.tpl with body.page-product condition).
 * ===================================================================== */

/* =========================================================
 * #1 — Tame the Ola AI chat widget on mobile
 * Hide the big "Pytania o licencję?" proactive bubble on small
 * screens; the small launcher icon stays so users can still open it
 * manually. Desktop is unchanged.
 * ========================================================= */
@media (max-width: 767px) {
  body.page-product .ksc-proactive,
  body.page-product .ksc-card,
  body.page-product .ksc-prompt,
  body.page-product [class*="ksc-proactive"],
  body.page-product [class*="ksc-bubble"]:not([class*="launcher"]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.page-product .ksc-launcher {
    width: 52px !important;
    height: 52px !important;
    bottom: 84px !important;  /* clear the sticky cart bar */
    right: 14px !important;
  }
}
/* Even on desktop, delay the proactive popup so it doesn't slam the user
 * on load. Pure CSS shim — fade in after 8s. */
body.page-product .ksc-proactive {
  opacity: 0;
  animation: ks-chat-delay 0.4s ease-out 8s forwards;
}
@keyframes ks-chat-delay { to { opacity: 1; } }

/* =========================================================
 * #2 — Hide empty-rating "0.0 ★★★★★" widget
 * Belt + braces: theme override gates server-side, this hides
 * any rendered shells if a stale template path slips through.
 * ========================================================= */
.ets_rv_stats_review:has(.ets_rv_nb_comments[data-text]:not([data-text=""])) .ets_rv_average_grade:empty,
.ets_rv_average_grade:has(+ .ets_rv_grade_stars[data-grade="0.0"]) {
  display: none;
}
.ets_rv_wrap:not(:has(.ets_rv_average_grade)) .ets_rv_average_rating,
.ets_rv_average_grade[data-grade="0.0"],
.ets_rv_stats_review:has([data-grade="0.0"]) > .ets_rv_average_rating {
  display: none !important;
}

/* =========================================================
 * #3 — Trusted Shops rating row, hoist above CTA on mobile
 * Element exists already (.ks-rating-widget); we just lift it to a
 * stronger visual rank on mobile + tighter spacing.
 * ========================================================= */
body.page-product .ks-rating-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 999px;
  font-size: 13px;
  color: #0f172a;
  text-decoration: none;
  line-height: 1;
}
body.page-product .ks-rating-widget:hover {
  background: rgba(22, 163, 74, 0.1);
}
body.page-product .ks-rw-score { font-weight: 600; }
body.page-product .ks-rw-score strong { color: #15803d; }
body.page-product .ks-rw-label { color: #64748b; font-size: 12px; }
body.page-product .ks-rw-badge {
  background: #16a34a;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border-radius: 4px;
}

/* =========================================================
 * #4 — Bundle savings block (visible on products in "Zestawy" category)
 * Template injects .ks-bundle-savings; this styles it.
 * ========================================================= */
.ks-bundle-savings {
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.06) 0%, rgba(234, 88, 12, 0.04) 100%);
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ks-bundle-savings__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f97316;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ks-bundle-savings__body { flex: 1 1 auto; min-width: 0; }
.ks-bundle-savings__title {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ks-bundle-savings__items {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ks-bundle-savings__items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.ks-bundle-savings__items li span:first-child { color: #475569; }
.ks-bundle-savings__items li span:last-child { color: #0f172a; font-weight: 500; }
.ks-bundle-savings__total {
  margin: 8px -14px -12px;
  padding: 10px 14px;
  background: rgba(249, 115, 22, 0.12);
  border-top: 1px dashed rgba(249, 115, 22, 0.4);
  border-radius: 0 0 9px 9px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  color: #9a3412;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ks-bundle-savings__total-pct {
  background: #f97316;
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
}

/* =========================================================
 * #5 — Inline quantity stepper next to price + live discount label
 * (the actual qty stepper is rendered by the PS theme; we only style
 * the new live-discount label that the JS injects.)
 * ========================================================= */
.ks-qty-discount-hint {
  margin: 6px 0 0;
  padding: 6px 10px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 13px;
  color: #78350f;
  font-weight: 500;
  display: none;  /* JS toggles visibility */
}
.ks-qty-discount-hint--visible { display: block; }
.ks-qty-discount-hint strong { color: #b45309; }

/* =========================================================
 * #6 — Promo bar palette — tone the orange→red gradient down
 * so the CTA orange stays the focal point.
 * ========================================================= */
.ks-volpromo-strip,
.ks-promo-bar,
.ks-office-promo-bar,
.ks-promotion-bar {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: #e2e8f0 !important;
}
.ks-volpromo-strip a,
.ks-promo-bar a,
.ks-office-promo-bar a {
  color: #fbbf24 !important;
  font-weight: 600;
}
.ks-volpromo-strip .ks-volpromo-chip,
.ks-promo-bar .ks-promo-chip {
  background: rgba(251, 191, 36, 0.18) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fcd34d !important;
}

/* =========================================================
 * #7 — BNPL/installment hint under price
 * ========================================================= */
.ks-bnpl-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ks-bnpl-hint strong { color: #0f172a; font-weight: 600; }
.ks-bnpl-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fee2e2;
  color: #b91c1c;
}
.ks-bnpl-providers {
  font-size: 11.5px;
  color: #64748b;
  margin-left: 4px;
}

/* =========================================================
 * #8 — Express-pay chips under the CTA button
 * ========================================================= */
.ks-pdp-pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: #64748b;
}
.ks-pdp-pay-chips-label {
  font-size: 11.5px;
  color: #64748b;
  margin-right: 2px;
}
.ks-pdp-pay-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
  text-transform: none;
  white-space: nowrap;
}
.ks-pdp-pay-chip--blik { color: #000; border-color: #cbd5e1; }
.ks-pdp-pay-chip--p24 { color: #d6242d; border-color: #f8c1c5; background: #fef2f2; }
.ks-pdp-pay-chip--visa { color: #1a1f71; }
.ks-pdp-pay-chip--mc { color: #eb001b; }
.ks-pdp-pay-chip--apay { background: #000; color: #fff; border-color: #000; }
.ks-pdp-pay-chip--gpay { color: #4285f4; }
.ks-pdp-pay-chip--klarna { background: #ffa8cd; color: #000; border-color: #ffa8cd; }

/* =========================================================
 * #9 — Trust strip polish (icons already inlined in header.tpl).
 * Color the existing SVGs by semantic intent so they read like a
 * row of clear, scannable signals rather than gray text.
 * ========================================================= */
.ks-trust-strip-item {
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}
.ks-trust-strip-item.gold svg { color: #f59e0b !important; }
.ks-trust-strip-item[title*="KSeF"] svg { color: #16a34a !important; }
.ks-trust-strip-item[title*="minut"] svg,
.ks-trust-strip-item:has(svg polyline[points^="20 6"]) svg { color: #f59e0b !important; }
.ks-trust-strip-item[title*="UE"] svg,
.ks-trust-strip-item:has(svg path[d^="M12 22"]) svg { color: #0369a1 !important; }
.ks-trust-strip-item:has(svg rect[x="3"][y="11"]) svg { color: #475569 !important; }
.ks-trust-strip-item a {
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.ks-trust-strip-item a:hover { color: #f97316 !important; }
.ks-trust-strip-item.gold {
  background: rgba(245, 158, 11, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
}

/* =========================================================
 * #10 — Product video/GIF slot scaffolding
 * Empty until populated by admin via product feature
 * "video_url" or a feature flag. Renders a clean play-button overlay
 * on the cover image when present.
 * ========================================================= */
.ks-pdp-video-slot {
  position: relative;
  margin: 8px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  display: none; /* Hidden unless data-video-url is present */
}
.ks-pdp-video-slot[data-video-url] { display: block; }
.ks-pdp-video-slot__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.ks-pdp-video-slot__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.2);
  transition: background 0.15s;
}
.ks-pdp-video-slot:hover .ks-pdp-video-slot__play { background: rgba(15, 23, 42, 0); }
.ks-pdp-video-slot__play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s;
}
.ks-pdp-video-slot:hover .ks-pdp-video-slot__play-btn { transform: scale(1.08); }

/* Mobile: tighten everything around the price + CTA so trust + bundle
 * + BNPL all fit above the fold. */
@media (max-width: 575px) {
  body.page-product .ks-rating-widget {
    margin: 2px 0 6px;
    padding: 5px 9px;
    font-size: 12px;
  }
  body.page-product .ks-bundle-savings { padding: 10px 12px; margin: 8px 0 10px; }
  body.page-product .ks-bnpl-hint { font-size: 12px; }
  body.page-product .ks-pdp-pay-chips { gap: 5px; margin-top: 8px; }
  body.page-product .ks-pdp-pay-chip { font-size: 10px; height: 20px; padding: 0 6px; }
}