/* KT UI fixes — loaded after styles.css; overrides only.
   Added by kt-ui-fixes workflow, July 2026. */

/* 1) One accent color for buy CTAs: brand gold (was cyan) */
.live-product-cta,
a.btn-primary.live-product-cta {
  background: linear-gradient(135deg, #D9AC53, #C8973A) !important;
  color: #0D1B2A !important;
  border-color: #C8973A !important;
}
.live-product-cta:hover { filter: brightness(1.08); }

/* 2) Unpin breadcrumb + CA strip (was sticky; ate ~130px of every scroll) */
.filter-bar { position: static !important; top: auto !important; }

/* 3) Equal-height cards, CTA pinned to bottom */
.live-product-card { display: flex; flex-direction: column; }
.live-product-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.live-product-body .live-product-cta { margin-top: auto; }
.kt-alts { margin-top: 10px; }

/* 4) Branded fallback when a feed has no product image */
.live-product-imgwrap { position: relative; }
.kt-img-fallback {
  display: none; position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(135deg, #16202F, #1D2B3F); color: #C8973A;
}
.live-product-imgwrap.kt-noimg .kt-img-fallback { display: flex; }
.kt-img-fallback-brand { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 0 12px; text-align: center; }
.kt-img-fallback-note { font-size: 11px; color: #7A8FA6; }

/* 5) Fill the dead space in the volatility chart card (desktop) */
@media (min-width: 900px) {
  .chart-container .chart-canvas-wrap { height: 560px; }
}

/* 6) Calmer reveal animations; never hide content from reduced-motion users */
.reveal { transition-duration: .35s !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* 7) Hero search: high-contrast input for the core product */
.hero-search input[type="text"],
.hero-search input[type="search"] {
  background: #FFFFFF !important;
  color: #10141B !important;
}
.hero-search input::placeholder { color: #5A6B7E !important; }