/* K3Bxn Shop Tools: the promotion banner, the affiliate page under My account, and the assistant's chat box.
   The colours fall back to the K3Bxn gold and teal when the theme's own properties are not there. */
.k3st-promo, .k3st-chat, .k3st-chat-open, .k3st-aff { --st-deep: var(--brand-deep, #062a30); --st-teal: var(--brand, #0c7c80); --st-gold: var(--accent, #f0b429); --st-gold-2: var(--accent-2, #ffd874); --st-ink: var(--ink, #0a2227); --st-line: var(--line, #d9e7e5); --st-soft: var(--soft, #e8f3f1); --st-mute: var(--mute, #56706f); --st-card: var(--card, #fff); --st-field: var(--field, #fff); --st-field-line: var(--field-line, #b9cfcc); --st-link: var(--link, #0c7c80); --st-note: var(--accent-soft, #fff8e1); --st-note-line: var(--note-line, #e6c964); }

/* ---- promotion banner */
.k3st-promo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; padding: 9px 16px; text-align: center; font-weight: 700; font-size: .95rem; color: #1d1500;
	background: linear-gradient(90deg, var(--st-gold-2), var(--st-gold), var(--st-gold-2)); background-size: 200% 100%; animation: k3st-slide 8s linear infinite; }
.k3st-promo[hidden] { display: none; }
.k3st-promo-code { background: #1d1500; color: var(--st-gold-2); border-radius: 6px; padding: 2px 10px; letter-spacing: .08em; font-family: ui-monospace, Consolas, monospace; }
.k3st-promo-left { background: #ffffff66; border-radius: 999px; padding: 2px 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes k3st-slide { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }

/* ---- My account > Affiliate */
.k3st-aff h3 { margin-top: 28px; }
.k3st-note { border: 1px solid var(--st-note-line); background: var(--st-note); border-radius: 10px; padding: 12px 14px; }
.k3st-terms { border-left: 4px solid var(--st-gold); background: var(--st-soft); border-radius: 0 10px 10px 0; padding: 14px 16px; }
.k3st-form textarea { width: 100%; max-width: 640px; }
.k3st-link { border: 2px dashed var(--st-link); background: var(--st-soft); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.k3st-link label { font-weight: 700; display: block; margin-bottom: 6px; }
.k3st-link > div { display: flex; gap: 8px; }
.k3st-link input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; }
.k3st-hint { color: var(--st-mute); font-size: .875rem; margin: 6px 0 0; }
.k3st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.k3st-tile { border: 1px solid var(--st-line); border-radius: 12px; padding: 14px; background: var(--st-card); border-top: 3px solid var(--st-gold); }
.k3st-tile b { display: block; font-size: 1.45rem; line-height: 1.2; }
.k3st-tile span { color: var(--st-mute); font-size: .85rem; }
.k3st-scroll { overflow-x: auto; }
.k3st-table { width: 100%; }
.k3st-badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.k3st-pending { color: var(--warn, #8a5a00); } .k3st-due { color: var(--ok, #13795b); } .k3st-paid { color: var(--st-link); } .k3st-cancelled { color: var(--bad, #b3261e); }

/* ---- the assistant */
.k3st-chat-open { position: fixed; right: 18px; bottom: 18px; z-index: 70; border: 0; cursor: pointer; border-radius: 999px; padding: 13px 20px 13px 44px; font: 700 .95rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #fff;
	background: linear-gradient(140deg, #19b8ab, var(--st-teal)); box-shadow: 0 14px 30px -10px #062a30aa; transition: transform .2s, box-shadow .2s; animation: k3st-pop .5s 1.2s cubic-bezier(.3,1.5,.5,1) both; }
.k3st-chat-open::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 16px; margin-top: -9px; border-radius: 8px 8px 8px 2px; background: var(--st-gold); }
.k3st-chat-open:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px #062a30cc; }
.k3st-chat-open[hidden] { display: none; }
@keyframes k3st-pop { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
.single-product .k3st-chat-open { bottom: 84px; }
@media (min-width: 641px) { .single-product .k3st-chat-open { bottom: 18px; } }

.k3st-chat { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden;
	background: var(--st-card); color: var(--st-ink); border-radius: 18px; border: 1px solid var(--st-line); box-shadow: 0 30px 70px -20px #062a30cc; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; animation: k3st-pop .25s ease both; }
.k3st-chat[hidden] { display: none; }
.k3st-chat-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 18px; color: #fff; background: linear-gradient(140deg, #0b5158, var(--st-deep)); border-bottom: 3px solid var(--st-gold); }
.k3st-chat-close { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 6px; }
.k3st-chat-close:hover { background: #ffffff22; }
.k3st-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--st-soft); }
.k3st-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; }
.k3st-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.k3st-bot { align-self: flex-start; background: var(--st-card); border: 1px solid var(--st-line); border-bottom-left-radius: 4px; }
.k3st-you { align-self: flex-end; background: var(--st-teal); color: #fff; border-bottom-right-radius: 4px; }
.k3st-wait p { color: var(--st-mute); font-style: italic; }
.k3st-msg-link { display: block; margin-top: 8px; font-weight: 600; font-size: .9rem; color: var(--st-link); }
.k3st-chip { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--st-line); background: var(--st-soft); color: var(--st-ink); font: inherit; font-size: .9rem; cursor: pointer; }
.k3st-chip:hover { border-color: var(--st-link); color: var(--st-link); }
.k3st-chat-notice { margin: 0; padding: 7px 14px; font-size: .72rem; line-height: 1.35; color: var(--st-mute); background: var(--st-card); border-top: 1px solid var(--st-line); }
.k3st-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--st-line); background: var(--st-card); }
.k3st-chat-form input { flex: 1; min-width: 0; border: 1px solid var(--st-field-line); background: var(--st-field); color: var(--st-ink); border-radius: 999px; padding: 10px 14px; font: inherit; }
.k3st-chat-form button { border: 0; border-radius: 999px; padding: 10px 18px; font: 700 .9rem/1 inherit; cursor: pointer; color: #1d1500; background: linear-gradient(180deg, var(--st-gold-2), var(--st-gold)); }
.k3st-chat-form input:focus, .k3st-chat-open:focus-visible, .k3st-chip:focus-visible { outline: 3px solid #19b8ab66; outline-offset: 2px; }
/* a question the site does not answer, e-mailed to the support team */
.k3st-handoff { border-color: var(--st-link); color: var(--st-link); font-weight: 700; }
.k3st-mail { position: relative; display: grid; gap: 7px; margin-top: 9px; }
.k3st-mail p { margin: 0; }
.k3st-mail input, .k3st-mail textarea { width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--st-field-line); background: var(--st-field); color: var(--st-ink); font: inherit; font-size: .9rem; }
.k3st-mail textarea { resize: vertical; min-height: 66px; }
.k3st-mail input:focus, .k3st-mail textarea:focus { outline: 3px solid #19b8ab66; outline-offset: 1px; }
.k3st-mail button { justify-self: start; border: 0; border-radius: 999px; padding: 9px 16px; font: 700 .88rem/1 inherit; cursor: pointer; color: #1d1500; background: linear-gradient(180deg, var(--st-gold-2), var(--st-gold)); }
.k3st-mail button[disabled] { opacity: .6; cursor: wait; }
.k3st-mail small { color: var(--st-mute); font-size: .72rem; line-height: 1.35; }
.k3st-mail .k3st-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.k3st-chat-human { padding: 0; border: 0; background: none; color: var(--st-link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { :root[data-motion="respect"] .k3st-promo, :root[data-motion="respect"] .k3st-chat, :root[data-motion="respect"] .k3st-chat-open { animation: none; } }