/* KantorBox Order Tool — Public CSS (v4.0) */



:root {



  --kb-green:      #1D9E75;



  --kb-green-lt:   #E1F5EE;



  --kb-green-dk:   #0F6E56;



  --kb-green-deep: #085041;



  --kb-wa:         #25D366;



  --kb-wa-hov:     #1EBF5A;



  --kb-bg:         #F4F6F9;



  --kb-surface:    #FFFFFF;



  --kb-border:     #E5E7EB;



  --kb-text:       #111827;



  --kb-muted:      #6B7280;



  --kb-subtle:     #9CA3AF;



  --kb-radius:     10px;



  --kb-radius-lg:  14px;



}







/* ── App shell ── */



#kbot-app {



  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;



  color: var(--kb-text);



  background: var(--kb-bg);



  min-height: 60vh;



  max-width: 680px;



  margin: 0 auto;



  box-sizing: border-box;



  position: relative;



}



#kbot-app *, #kbot-app *::before, #kbot-app *::after { box-sizing: border-box; }







/* ── View system ── */



#kbot-app .kbot-view { display: none; }



#kbot-app .kbot-view.active { display: flex; flex-direction: column; min-height: 60vh; }







/* ── Shared view header ── */



#kbot-app .kbot-view-header {



  display: flex;



  align-items: center;



  gap: 10px;



  padding: 14px 16px 10px;



  background: var(--kb-surface);



  border-bottom: 1px solid var(--kb-border);



  position: sticky;



  top: 0;



  z-index: 10;



}







#kbot-app .kbot-back-btn {



  display: inline-flex;



  align-items: center;



  gap: 4px;



  font-size: 13px;



  font-weight: 500;



  color: var(--kb-green-dk);



  background: none;



  border: none;



  cursor: pointer;



  padding: 6px 10px 6px 6px;



  border-radius: 8px;



  transition: background 0.15s;



  flex-shrink: 0;



  font-family: inherit;



}



#kbot-app .kbot-back-btn:hover { background: var(--kb-green-lt); }



#kbot-app .kbot-back-btn svg { flex-shrink: 0; }







#kbot-app .kbot-view-title {



  font-size: 15px;



  font-weight: 600;



  color: var(--kb-text);



  flex: 1;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}







/* ════════════════════════



   VIEW 1 — CATEGORIES



════════════════════════ */



#kbot-view-cats {



  padding: 0;



  background: var(--kb-bg);



}







#kbot-view-cats .kbot-cats-header {



  padding: 20px 16px 12px;



  background: var(--kb-surface);



  border-bottom: 1px solid var(--kb-border);



}







#kbot-view-cats .kbot-cats-headline {



  font-size: 11px;



  font-weight: 600;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  color: var(--kb-muted);



  margin-bottom: 4px;



}







#kbot-view-cats .kbot-cats-sub {



  font-size: 18px;



  font-weight: 700;



  color: var(--kb-text);



}







#kbot-cat-grid {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 10px;



  padding: 14px;



}







#kbot-app .kbot-cat-card {



  background: var(--kb-surface);



  border: 1.5px solid var(--kb-border);



  border-radius: var(--kb-radius-lg);



  padding: 16px 14px 14px;



  cursor: pointer;



  transition: border-color 0.15s, background 0.15s, transform 0.1s;



  display: flex;



  flex-direction: column;



  gap: 8px;



}



#kbot-app .kbot-cat-card:hover {



  border-color: var(--kb-green);



  background: var(--kb-green-lt);



  transform: translateY(-1px);



}



#kbot-app .kbot-cat-card:active { transform: translateY(0); }







#kbot-app .kbot-cat-name {



  font-size: 13px;



  font-weight: 600;



  color: var(--kb-text);



  line-height: 1.35;



}







#kbot-app .kbot-cat-meta {



  display: flex;



  align-items: center;



  justify-content: space-between;



}







#kbot-app .kbot-cat-count {



  font-size: 11px;



  color: var(--kb-muted);



  font-weight: 500;



}







#kbot-app .kbot-cat-arrow {



  color: var(--kb-green);



  display: flex;



  align-items: center;



}







/* ════════════════════════



   VIEW 2 — SKU LIST



════════════════════════ */



#kbot-view-list {



  background: var(--kb-surface);



}







#kbot-app .kbot-search-bar {



  padding: 10px 16px;



  border-bottom: 1px solid var(--kb-border);



  background: var(--kb-surface);



}







#kbot-app .kbot-search-bar input {



  width: 100%;



  font-family: inherit;



  font-size: 14px;



  color: var(--kb-text);



  background: var(--kb-bg);



  border: 1px solid var(--kb-border);



  border-radius: 24px;



  padding: 9px 16px;



  outline: none;



  transition: border-color 0.15s, box-shadow 0.15s;



}



#kbot-app .kbot-search-bar input:focus {



  border-color: var(--kb-green);



  box-shadow: 0 0 0 3px rgba(29,158,117,0.12);



  background: var(--kb-surface);



}







/* SKU list container */



#kbot-sku-list {



  flex: 1;



  overflow-y: auto;



  padding-bottom: 80px; /* room for sticky footer */



}







/* Single SKU row */



#kbot-app .kbot-sku-item {



  display: grid;



  grid-template-columns: 22px 56px 1fr auto auto;



  align-items: center;



  column-gap: 12px;



  padding: 12px 16px;



  border-bottom: 1px solid var(--kb-border);



  transition: background 0.1s;



  cursor: pointer;



}



#kbot-app .kbot-sku-item:last-child { border-bottom: none; }



#kbot-app .kbot-sku-item:hover { background: #FAFAFA; }



#kbot-app .kbot-sku-item.checked { background: var(--kb-green-lt); }







#kbot-app .kbot-sku-chk {



  width: 18px;



  height: 18px;



  accent-color: var(--kb-green);



  cursor: pointer;



  flex-shrink: 0;



}







#kbot-app .kbot-sku-thumb {



  width: 56px;



  height: 56px;



  object-fit: contain;



  background: #F3F4F6;



  border-radius: 8px;



  flex-shrink: 0;



  display: block;



}



#kbot-app .kbot-sku-placeholder {



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 22px;



}







#kbot-app .kbot-sku-info {



  display: flex;



  flex-direction: column;



  gap: 2px;



  min-width: 0;



}



#kbot-app .kbot-sku-name {



  font-size: 12px;



  font-weight: 600;



  color: var(--kb-text);



  line-height: 1.3;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}



#kbot-app .kbot-sku-code {



  font-family: 'DM Mono', 'Courier New', monospace;



  font-size: 11px;



  color: var(--kb-muted);



}



#kbot-app .kbot-sku-meds {



  font-size: 14px;



  font-weight: 600;



  color: var(--kb-text);



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}



#kbot-app .kbot-sku-price {



  font-size: 13px;



  font-weight: 700;



  color: var(--kb-green-dk);



}



#kbot-app .kbot-sku-pack {



  font-size: 11px;



  color: var(--kb-muted);



}







/* Stepper (col 4) */



#kbot-app .kbot-sku-stepper {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 3px;



  opacity: 1;



  transition: opacity 0.15s;



}



#kbot-app .kbot-sku-stepper.hidden {



  opacity: 0;



  pointer-events: none;



}







/* Subtotal (col 5) */



#kbot-app .kbot-sku-sub {



  font-size: 12px;



  font-weight: 600;



  color: var(--kb-subtle);



  text-align: right;



  white-space: nowrap;



  min-width: 60px;



  transition: color 0.15s;



}



#kbot-app .kbot-sku-sub.active { color: var(--kb-green-dk); }







/* Shared QTY controls */



#kbot-app .kbot-qty-wrap {



  display: flex;



  align-items: center;



  gap: 6px;



}



#kbot-app .kbot-qty-btn {



  width: 28px; height: 28px;



  border: 1px solid var(--kb-border);



  background: var(--kb-surface);



  border-radius: 8px;



  cursor: pointer;



  font-size: 17px; font-weight: 600; line-height: 1;



  display: flex; align-items: center; justify-content: center;



  color: var(--kb-text);



  transition: all 0.1s;



  padding: 0;



  font-family: inherit;



  flex-shrink: 0;



}



#kbot-app .kbot-qty-btn:hover { background: var(--kb-green); color: #fff; border-color: var(--kb-green); }



#kbot-app .kbot-qty-val {



  font-size: 15px; font-weight: 600;



  min-width: 22px; text-align: center;



}



#kbot-app .kbot-qty-unit {



  font-size: 10px; color: var(--kb-muted);



  text-align: center;



}







/* Sticky footer CTA bar */



#kbot-list-footer {



  position: sticky;



  bottom: 0;



  left: 0; right: 0;



  background: var(--kb-surface);



  border-top: 1px solid var(--kb-border);



  padding: 12px 16px;



  display: flex;



  align-items: center;



  gap: 12px;



  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);



  transform: translateY(100%);



  transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1);



  z-index: 20;



}



#kbot-list-footer.visible { transform: translateY(0); }







#kbot-list-badge {



  font-size: 13px;



  font-weight: 500;



  color: var(--kb-muted);



  flex: 1;



}







#kbot-to-checkout {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 11px 20px;



  background: var(--kb-green);



  color: #fff;



  border: none;



  border-radius: var(--kb-radius);



  font-family: inherit;



  font-size: 14px;



  font-weight: 600;



  cursor: pointer;



  transition: background 0.15s;



}



#kbot-to-checkout:hover { background: var(--kb-green-dk); }



#kbot-to-checkout:disabled { opacity: 0.5; cursor: not-allowed; }







/* ════════════════════════



   VIEW 3 — CHECKOUT



════════════════════════ */



#kbot-view-checkout {



  background: var(--kb-bg);



}







#kbot-checkout-list {



  padding: 10px 16px;



  display: flex;



  flex-direction: column;



  gap: 8px;



}







/* Checkout row */



#kbot-app .kbot-co-row {



  display: grid;



  grid-template-columns: 50px 1fr auto auto 28px;



  align-items: center;



  column-gap: 10px;



  background: var(--kb-surface);



  border: 1px solid var(--kb-border);



  border-radius: var(--kb-radius);



  padding: 10px 12px;



  transition: opacity 0.18s;



}







#kbot-app .kbot-co-thumb {



  width: 50px; height: 50px;



  object-fit: contain;



  background: #F3F4F6;



  border-radius: 7px;



  flex-shrink: 0;



  display: block;



}



#kbot-app .kbot-co-ph {



  display: flex; align-items: center; justify-content: center; font-size: 20px;



}







#kbot-app .kbot-co-info {



  display: flex; flex-direction: column; gap: 2px; min-width: 0;



}



#kbot-app .kbot-co-name {



  font-size: 12px; font-weight: 600; color: var(--kb-text);



  line-height: 1.3;



  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;



}



#kbot-app .kbot-co-sku {



  font-family: 'DM Mono', 'Courier New', monospace;



  font-size: 11px; color: var(--kb-muted);



}



#kbot-app .kbot-co-meds {



  font-size: 13px; font-weight: 600; color: var(--kb-text);



  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;



}







#kbot-app .kbot-co-stepper {



  display: flex; flex-direction: column; align-items: center; gap: 2px;



}







#kbot-app .kbot-co-sub {



  font-size: 13px; font-weight: 700;



  color: var(--kb-green-dk);



  text-align: right; white-space: nowrap;



  min-width: 70px;



}







#kbot-app .kbot-co-remove {



  width: 28px; height: 28px;



  border: none; background: none;



  color: var(--kb-subtle);



  cursor: pointer;



  display: flex; align-items: center; justify-content: center;



  border-radius: 6px;



  padding: 0;



  transition: color 0.15s, background 0.15s;



}



#kbot-app .kbot-co-remove:hover { color: #EF4444; background: #FEF2F2; }







/* Totals bar */



#kbot-app .kbot-totals-card {



  background: var(--kb-surface);



  border: 1px solid var(--kb-border);



  border-radius: var(--kb-radius-lg);



  padding: 16px;



  margin: 4px 16px 0;



}







#kbot-app .kbot-totals-chips {



  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;



}



#kbot-app .kbot-chip {



  background: var(--kb-green-lt); color: var(--kb-green-dk);



  border-radius: 20px; padding: 3px 12px;



  font-size: 12px; font-weight: 500;



}



#kbot-app .kbot-grand-total-row {



  display: flex; align-items: baseline; justify-content: space-between;



}



#kbot-app .kbot-total-label {



  font-size: 13px; font-weight: 600; color: var(--kb-muted);



}



#kbot-app #kbot-grand-total {



  font-size: 26px; font-weight: 700; color: var(--kb-green-deep);



}







/* Customer form */



#kbot-app .kbot-customer-card {



  background: var(--kb-surface);



  border: 1px solid var(--kb-border);



  border-radius: var(--kb-radius-lg);



  padding: 16px;



  margin: 10px 16px 0;



}



#kbot-app .kbot-co-section-title {



  font-size: 11px; font-weight: 600;



  text-transform: uppercase; letter-spacing: 0.08em;



  color: var(--kb-muted); margin-bottom: 10px;



}



#kbot-app .kbot-form-grid {



  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;



}



#kbot-app .kbot-field label {



  display: block; font-size: 12px; font-weight: 500; color: var(--kb-muted); margin-bottom: 4px;



}



#kbot-app input[type="text"],



#kbot-app input[type="email"],



#kbot-app input[type="tel"] {



  font-family: inherit; font-size: 14px; color: var(--kb-text);



  background: var(--kb-bg); border: 1px solid var(--kb-border);



  border-radius: var(--kb-radius); padding: 8px 12px; outline: none;



  transition: border-color 0.15s, box-shadow 0.15s; width: 100%;



}



#kbot-app input:focus {



  border-color: var(--kb-green);



  box-shadow: 0 0 0 3px rgba(29,158,117,0.12);



  background: var(--kb-surface);



}







/* Send buttons */



#kbot-app .kbot-actions {



  display: flex; gap: 10px; flex-wrap: wrap;



  padding: 10px 16px 20px;



}



#kbot-app .kbot-btn-wa,



#kbot-app .kbot-btn-email {



  flex: 1; min-width: 180px;



  display: flex; align-items: center; justify-content: center; gap: 10px;



  padding: 14px 20px; border-radius: var(--kb-radius);



  font-family: inherit; font-size: 15px; font-weight: 600;



  cursor: pointer; transition: all 0.15s; border: none;



}



#kbot-app .kbot-btn-wa { background: var(--kb-wa); color: #fff; }



#kbot-app .kbot-btn-wa:hover { background: var(--kb-wa-hov); }



#kbot-app .kbot-btn-email { background: var(--kb-surface); color: var(--kb-text); border: 1.5px solid var(--kb-border); }



#kbot-app .kbot-btn-email:hover { border-color: var(--kb-text); background: #F9FAFB; }







/* ── Floating cart FAB ── */



#kbot-cart-icon {



  position: fixed; bottom: 28px; right: 28px; z-index: 9990;



  display: flex; align-items: center; gap: 10px;



  background: var(--kb-green); color: #fff;



  border-radius: 50px; padding: 13px 20px 13px 16px;



  cursor: pointer; box-shadow: 0 4px 20px rgba(29,158,117,0.4);



  transform: translateY(90px); opacity: 0;



  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s, background 0.15s;



  user-select: none; pointer-events: none;



}



#kbot-cart-icon.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }



#kbot-cart-icon:hover { background: var(--kb-green-dk); }



#kbot-cart-icon svg { stroke: #fff; flex-shrink: 0; }



#kbot-cart-badge {



  position: absolute; top: -6px; right: -6px;



  background: #fff; color: var(--kb-green-dk);



  font-size: 11px; font-weight: 700;



  min-width: 20px; height: 20px; border-radius: 10px;



  display: flex; align-items: center; justify-content: center; padding: 0 4px;



}



#kbot-cart-total { font-size: 14px; font-weight: 600; white-space: nowrap; color: #fff; }







/* ── Toast ── */



#kbot-app .kbot-toast {



  position: fixed; bottom: 20px; left: 50%;



  transform: translateX(-50%) translateY(80px);



  background: var(--kb-green-deep); color: #fff;



  padding: 11px 20px; border-radius: var(--kb-radius);



  font-size: 14px; font-weight: 500;



  transition: transform 0.28s; z-index: 9999;



  white-space: nowrap; pointer-events: none;



}



#kbot-app .kbot-toast.show { transform: translateX(-50%) translateY(0); }







/* ── Empty state ── */



#kbot-app .kbot-empty {



  text-align: center; padding: 3rem 1rem;



  color: var(--kb-subtle); font-size: 14px;



}







/* ── Responsive ── */



@media (max-width: 480px) {



  #kbot-cat-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }



  #kbot-app .kbot-cat-card { padding: 12px 10px 10px; }



  #kbot-app .kbot-cat-name { font-size: 12px; }







  #kbot-app .kbot-sku-item { grid-template-columns: 20px 48px 1fr auto auto; column-gap: 8px; padding: 10px 12px; }



  #kbot-app .kbot-sku-thumb { width: 48px; height: 48px; }



  #kbot-app .kbot-sku-sub { min-width: 50px; font-size: 11px; }







  #kbot-app .kbot-co-row { grid-template-columns: 42px 1fr auto auto 26px; column-gap: 8px; padding: 8px 10px; }



  #kbot-app .kbot-co-thumb { width: 42px; height: 42px; }







  #kbot-app .kbot-form-grid { grid-template-columns: 1fr; }



  #kbot-app .kbot-btn-wa, #kbot-app .kbot-btn-email { min-width: 100%; }







  #kbot-cart-icon { bottom: 14px; right: 14px; padding: 10px 14px 10px 12px; gap: 7px; }



  #kbot-cart-total { font-size: 13px; }



}



/* ---- Lightbox ---- */

/* Make thumbnails show pointer so users know they're clickable */

#kbot-app .kbot-sku-thumb:not(.kbot-sku-placeholder),

#kbot-app .kbot-co-thumb:not(.kbot-co-ph) {

  cursor: zoom-in;

  transition: opacity 0.15s, transform 0.15s;

}

#kbot-app .kbot-sku-thumb:not(.kbot-sku-placeholder):hover,

#kbot-app .kbot-co-thumb:not(.kbot-co-ph):hover {

  opacity: 0.88;

  transform: scale(1.04);

}



/* Lightbox overlay */

#kbot-lb {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 99999;

  align-items: center;

  justify-content: center;

}

#kbot-lb.open { display: flex; }



#kbot-lb-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.85);

  backdrop-filter: blur(4px);

  animation: kbot-lb-fade-in 0.2s ease;

}



@keyframes kbot-lb-fade-in {

  from { opacity: 0; }

  to   { opacity: 1; }

}



/* Lightbox box */

#kbot-lb-box {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;

  z-index: 1;

  padding: 20px 60px;

  max-width: min(90vw, 860px);

  animation: kbot-lb-pop-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);

}



@keyframes kbot-lb-pop-in {

  from { transform: scale(0.88); opacity: 0; }

  to   { transform: scale(1);    opacity: 1; }

}



/* Image wrapper */

#kbot-lb-img-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

}



#kbot-lb-img {

  display: block;

  max-width: 100%;

  max-height: 76vh;

  object-fit: contain;

  border-radius: 10px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.5);

  transition: opacity 0.15s;

  user-select: none;

}

#kbot-lb-img.kbot-lb-loading { opacity: 0.3; }



/* Close button */

#kbot-lb-close {

  position: absolute;

  top: -6px;

  right: 4px;

  width: 38px; height: 38px;

  border-radius: 50%;

  border: none;

  background: rgba(255,255,255,0.15);

  color: #fff;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  transition: background 0.15s;

  z-index: 2;

  padding: 0;

}

#kbot-lb-close:hover { background: rgba(255,255,255,0.3); }



/* Prev / Next arrows */

#kbot-lb-prev,

#kbot-lb-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 44px; height: 44px;

  border-radius: 50%;

  border: none;

  background: rgba(255,255,255,0.15);

  color: #fff;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  transition: background 0.15s, transform 0.15s;

  z-index: 2;

  padding: 0;

}

#kbot-lb-prev { left: 6px; }

#kbot-lb-next { right: 6px; }

#kbot-lb-prev:hover { background: rgba(255,255,255,0.28); transform: translateY(-50%) scale(1.08); }

#kbot-lb-next:hover { background: rgba(255,255,255,0.28); transform: translateY(-50%) scale(1.08); }



/* Dot indicators */

#kbot-lb-dots {

  display: flex;

  gap: 7px;

  align-items: center;

}

.kbot-lb-dot {

  width: 7px; height: 7px;

  border-radius: 50%;

  background: rgba(255,255,255,0.35);

  cursor: pointer;

  transition: background 0.15s, transform 0.15s;

}

.kbot-lb-dot.active {

  background: #fff;

  transform: scale(1.3);

}



/* Mobile adjustments */

@media (max-width: 480px) {

  #kbot-lb-box { padding: 16px 50px; gap: 10px; max-width: 96vw; }

  #kbot-lb-img { max-height: 68vh; border-radius: 7px; }

  #kbot-lb-prev { left: 2px; }

  #kbot-lb-next { right: 2px; }

  #kbot-lb-prev, #kbot-lb-next { width: 36px; height: 36px; }

}



/* ════════════════════════════════════════════════

   v4.1 ADDITIONS

   1. Category card — selected state + checkmark

   2. Category sticky footer (multi-select CTA)

════════════════════════════════════════════════ */



/* ── Selected card state ── */

#kbot-app .kbot-cat-card.selected {

  border-color: var(--kb-green);

  background: var(--kb-green-lt);

}



#kbot-app .kbot-cat-card.selected .kbot-cat-name {

  color: var(--kb-green-dk);

}



/* ── Checkmark badge (top-right corner of card) ── */

#kbot-app .kbot-cat-chk {

  position: absolute;

  top: 8px;

  right: 8px;

  width: 20px;

  height: 20px;

  background: #D1D5DB;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.15s, transform 0.15s;

  flex-shrink: 0;

  color: #fff;

}



/* Cards need position:relative for the absolute badge */

#kbot-app .kbot-cat-card {

  position: relative;

}



#kbot-app .kbot-cat-card.selected .kbot-cat-chk {

  background: var(--kb-green);

  transform: scale(1.1);

}



/* ── Category sticky footer ── */

#kbot-cat-footer {

  position: sticky;

  bottom: 0;

  left: 0;

  right: 0;

  background: var(--kb-surface);

  border-top: 1px solid var(--kb-border);

  padding: 12px 16px;

  display: flex;

  align-items: center;

  gap: 12px;

  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);

  transform: translateY(100%);

  transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1);

  z-index: 20;

}



#kbot-cat-footer.visible { transform: translateY(0); }



#kbot-cat-sel-badge {

  font-size: 13px;

  font-weight: 500;

  color: var(--kb-muted);

  flex: 1;

}



#kbot-cat-browse-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 11px 20px;

  background: var(--kb-green);

  color: #fff;

  border: none;

  border-radius: var(--kb-radius);

  font-family: inherit;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.15s;

}



#kbot-cat-browse-btn:hover { background: var(--kb-green-dk); }



/* ── Category image cards: keep absolute badge visible ── */

#kbot-app .kbot-cat-card.kbot-cat-has-img .kbot-cat-chk {

  top: 8px;

  right: 8px;

}





.kbot-cat-thumb img {

  width:100%;

}