/* =====================================================================================
 *  TRENDSIC SUPPLY (public store) — Signal design language
 *  Namespaced .sup-root. Hover/active/keyframe rules that cannot live in inline
 *  style="" attributes. Token vars + all layout are set inline from supply.js
 *  (rootStyle) / supply.html, mirroring the design's own tokens.
 * ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.sup-root * { box-sizing: border-box; }
.sup-root { scroll-behavior: smooth; }
.sup-root ::selection { background: #C2CCFB; }

.sup-scroll::-webkit-scrollbar { width: 10px; }
.sup-scroll::-webkit-scrollbar-thumb { background: #cfd4e4; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

.sup-card { transition: box-shadow .18s, border-color .18s, transform .18s; }
.sup-card:hover { box-shadow: 0 16px 40px rgba(20, 25, 55, .12); border-color: var(--acc-soft-bd); transform: translateY(-2px); }

.sup-act { transition: filter .15s, background .15s, border-color .15s, box-shadow .15s, transform .12s; }
.sup-act:hover { filter: brightness(.97); }
.sup-act:active { transform: scale(.98); }
.sup-disabled { pointer-events: none; }
.sup-disabled:hover { filter: none; }
.sup-disabled:active { transform: none; }

/* Stripe Payment Element host — give it room to render its iframes */
#sup-payment-element { min-height: 40px; }

.sup-link:hover { background: var(--acc-soft); color: var(--acc-strong) !important; }
.sup-foot-link:hover { color: var(--acc) !important; }

.sup-root input:focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 3px var(--acc-soft);
    outline: none;
}

@keyframes sup-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sup-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sup-pop { from { transform: scale(.97); } to { transform: scale(1); } }