:root,
.kb {
  --kb-accent: var(--primary, #017961);
  --kb-ink: #1f2937;
  --kb-muted: #6b7280;
  --kb-line: #e8ebef;
  --kb-soft: #f6f7f9;
}

.kb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.kb-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--kb-ink);
  letter-spacing: -0.01em;
}
.kb-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--kb-muted);
}

.kb-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--kb-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.kb-search {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
}
.kb-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
  pointer-events: none;
}
.kb-search input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 38px;
  border: 1px solid var(--kb-line);
  border-radius: 10px;
  background: var(--kb-soft);
  font-size: 14px;
  color: var(--kb-ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.kb-search input::-webkit-search-cancel-button { display: none; }
.kb-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--kb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-accent) 18%, transparent);
}
.kb-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9ca3af;
  line-height: 1;
}
.kb-search-clear:hover { background: #eceff3; color: var(--kb-ink); }

.kb-control {
  flex: 0 1 auto;
}
.kb-control select,
.kb-per select {
  height: 42px;
  min-width: 130px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--kb-line);
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;
  color: var(--kb-ink);
  cursor: pointer;
}
.kb-control select:focus,
.kb-per select:focus {
  outline: none;
  border-color: var(--kb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-accent) 18%, transparent);
}
.kb-control label,
.kb-per label {
  display: none;
}

.kb-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 2px 16px;
}
.kb-count {
  font-size: 14px;
  color: var(--kb-muted);
}
.kb-per {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kb-muted);
}
.kb-per select {
  height: 34px;
  min-width: 0;
  font-size: 13px;
}

.kb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border: 1px solid color-mix(in srgb, var(--kb-accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--kb-accent) 8%, #fff);
  color: var(--kb-accent);
  font-size: 13px;
  font-weight: 600;
}
.kb-chip:hover { background: color-mix(in srgb, var(--kb-accent) 14%, #fff); }
.kb-chip-reset {
  border: 0;
  background: none;
  color: var(--kb-muted);
  font-size: 13px;
  text-decoration: underline;
}

.kb-grid > [hidden] { display: none !important; }
.kb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--kb-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kb-card:hover {
  border-color: color-mix(in srgb, var(--kb-accent) 35%, var(--kb-line));
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.1);
  color: inherit;
}
/* The lift follows the hover of the card's (unmoving) wrapper, so the cursor never slips off the moving
   card edge and causes a hover on/off flicker. Mouse devices only; taps on phones would leave it stuck. */
@media (hover: hover) and (pointer: fine) {
  *:hover > .kb-card { transform: translateY(-4px); }
}
.kb-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .kb-card:hover .kb-card-media img { transform: scale(1.05); }
}
.kb-card-media.is-missing::after {
  content: "\f03e";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  font-size: 42px;
  color: #cfd4da;
}
.kb-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 14px 16px 16px;
}
.kb-card-cat {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--kb-soft);
  color: var(--kb-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kb-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kb-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.kb-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}
.kb-card-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--kb-accent);
}
.kb-card-go {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kb-soft);
  color: var(--kb-ink);
  font-size: 13px;
  transition: background 0.18s, color 0.18s;
}
.kb-card:hover .kb-card-go {
  background: var(--kb-accent);
  color: #fff;
}

.kb-cat-card .kb-card-media { aspect-ratio: 4 / 3; }
.kb-cat-card .kb-card-media img { object-fit: contain; padding: 14px; }
.kb-cat-card .kb-card-name {
  font-size: 17px;
  min-height: 0;
}
.kb-cat-count {
  font-size: 13px;
  color: var(--kb-muted);
}

.kb-empty {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed var(--kb-line);
  border-radius: 16px;
  background: #fff;
}
.kb-empty i {
  font-size: 30px;
  color: #c3c8cf;
  margin-bottom: 12px;
}
.kb-empty h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--kb-ink);
  margin: 0 0 6px;
}
.kb-empty p {
  font-size: 14px;
  color: var(--kb-muted);
  margin: 0 0 14px;
}
.kb-btn {
  display: inline-block;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--kb-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.kb-pager { margin-top: 32px; }
.kb-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.kb-page button {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--kb-line);
  border-radius: 10px;
  background: #fff;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.kb-page button:hover:not(:disabled) {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}
.kb-page.is-active button {
  background: var(--kb-accent);
  border-color: var(--kb-accent);
  color: #fff;
  opacity: 1;
}
.kb-page.is-disabled button {
  opacity: 0.4;
  cursor: default;
}
.kb-page-gap {
  padding: 0 4px;
  color: var(--kb-muted);
}

@media (max-width: 575.98px) {
  .kb-title { font-size: 22px; }
  .kb-control { flex: 1 1 calc(50% - 5px); }
  .kb-control select { width: 100%; min-width: 0; }
  .kb-card-body { padding: 12px; }
  .kb-card-name { font-size: 14px; }
  .kb-card-price { font-size: 16px; }
}

/* ---------- Category sidebar ---------- */
.kb-side {
  position: sticky;
  top: 96px;
  padding: 18px 14px 14px;
  background: #fff;
  border: 1px solid var(--kb-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.kb-side-title {
  margin: 0 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-muted);
}
.kb-side-find {
  position: relative;
  margin: 0 2px 10px;
}
.kb-side-find i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9ca3af;
  pointer-events: none;
}
.kb-side-find input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--kb-line);
  border-radius: 9px;
  background: var(--kb-soft);
  font-size: 13px;
}
.kb-side-find input:focus {
  outline: none;
  background: #fff;
  border-color: var(--kb-accent);
}
.kb-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.kb-side-list > li[hidden] { display: none; }
.kb-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 1px 0;
  border-radius: 10px;
  color: var(--kb-ink) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.kb-side-link:hover {
  background: var(--kb-soft);
}
.kb-side-link > i {
  width: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--kb-muted);
}
.kb-side-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: 0 6px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background 0.15s, transform 0.15s;
}
.kb-side-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}
.kb-side-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--kb-soft);
  color: var(--kb-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.kb-side-link.is-active {
  background: color-mix(in srgb, var(--kb-accent) 10%, #fff);
  color: var(--kb-accent) !important;
  font-weight: 600;
}
.kb-side-link.is-active > i { color: var(--kb-accent); }
.kb-side-link.is-active .kb-side-dot {
  background: var(--kb-accent);
  transform: scale(1.4);
}
.kb-side-link.is-active .kb-side-count {
  background: var(--kb-accent);
  color: #fff;
}
.kb-side-sep {
  height: 1px;
  margin: 8px 6px;
  background: var(--kb-line);
}
.kb-side-none {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--kb-muted);
}

@media (max-width: 767.98px) {
  .shop .row > #order-shop2:has(.kb-side) { order: 0; }
  .shop .row > #order-shop1:has(.kb) { order: 1; }
  .kb-side {
    position: static;
    margin-bottom: 14px;
    padding: 12px 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .kb-side-title { margin: 0 2px 8px; }
  .kb-side-find,
  .kb-side-sep { display: none; }
  .kb-side-list {
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .kb-side-list::-webkit-scrollbar { display: none; }
  .kb-side-list > li { flex: 0 0 auto; }
  .kb-side-link {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--kb-line);
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
  }
  .kb-side-dot { display: none; }
  .kb-side-link.is-active {
    border-color: var(--kb-accent);
    background: var(--kb-accent);
    color: #fff !important;
  }
  .kb-side-link.is-active > i { color: #fff; }
  .kb-side-link.is-active .kb-side-count {
    background: rgba(255, 255, 255, 0.25);
  }
}

/* ---------- Results row: per page (left) + view switch (right) ---------- */
.kb-meta-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.kb-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kb-muted);
}
.kb-view-group {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--kb-line);
  border-radius: 10px;
  background: #fff;
}
.kb-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 34px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9ca3af;
  transition: background 0.15s, color 0.15s;
}
.kb-view-btn:hover { color: var(--kb-ink); }
.kb-view-btn.is-active {
  background: var(--kb-soft);
  color: var(--kb-accent);
}
.kb-view-btn > i {
  display: block;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.kb-view-btn[data-kb-cols-btn="1"] > i { width: 12px; }
.kb-view-btn[data-kb-cols-btn="2"] > i { width: 5px; }
.kb-view-desktop { display: inline-flex; }
.kb-view-mobile { display: none; }

@media (min-width: 992px) {
  .kb-grid[data-cols="2"] > [data-kb-item] { flex: 0 0 auto; width: 50% !important; }
  .kb-grid[data-cols="3"] > [data-kb-item] { flex: 0 0 auto; width: 33.3333% !important; }
  .kb-grid[data-cols="4"] > [data-kb-item] { flex: 0 0 auto; width: 25% !important; }
  .kb-grid[data-cols="4"] .kb-card-name { font-size: 14px; }
  .kb-grid[data-cols="4"] .kb-card-price { font-size: 16px; }
  .kb-grid[data-cols="2"] .kb-card-name { font-size: 17px; }
}
@media (max-width: 991.98px) {
  .kb-view-desktop { display: none; }
  .kb-view-mobile { display: inline-flex; }
  .kb-grid[data-mcols="1"] > [data-kb-item] { flex: 0 0 auto; width: 100% !important; }
  .kb-grid[data-mcols="2"] > [data-kb-item] { flex: 0 0 auto; width: 50% !important; }
}
.kb-per,
.kb-per span { white-space: nowrap; }