.category-body {
  min-height: 100vh;
  background: linear-gradient(180deg, #d9f5ff 0, #eefaff 360px, #f5fbfa 100%);
}

.category-topbar { position: relative; }
.category-shell { width: min(1120px, 100%); margin: 0 auto; padding: 30px 24px 70px; }

.category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  border: 3px solid var(--outline);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 6px 7px 0 rgba(23, 67, 111, .18);
}

.category-heading small { color: #8da0ae; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.category-heading h1 { margin: 7px 0 5px; color: #244d72; font: 700 clamp(26px, 4vw, 38px)/1.1 Georgia, "Songti SC", serif; }
.category-heading p { margin: 0; color: #647e93; font-size: 13px; }

.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.category-tabs a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 12px; border: 1px solid #c9e0e9; border-radius: 20px; background: rgba(255, 253, 241, .8); color: #496b87; font-size: 11px; transition: .16s ease; }
.category-tabs a b { color: #92a7b4; font-size: 10px; }
.category-tabs a:hover { border-color: #76bdd6; background: #fff; transform: translateY(-1px); }
.category-tabs a.active { border-color: var(--outline); background: #dff5ff; color: var(--ink); font-weight: 700; box-shadow: 2px 3px 0 rgba(23, 67, 111, .13); }
.category-tabs a.active:before { width: 7px; height: 7px; border-radius: 50%; background: #ffad5b; content: ""; }

.category-results { padding: 24px; border: 2px solid rgba(32, 73, 112, .13); border-radius: 18px; background: rgba(255, 253, 241, .68); }
.results-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.results-heading h2 { margin: 0; color: #244d72; font: 700 21px/1.2 Georgia, "Songti SC", serif; }
.results-heading > span { color: #8295a4; font-size: 10px; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-card { position: relative; display: flex; min-width: 0; min-height: 190px; flex-direction: column; border: 2px solid #d5e4e9; border-radius: 13px; background: #fffefa; box-shadow: 0 4px 0 rgba(39, 83, 119, .08); color: inherit; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #7dbdd4; box-shadow: 0 7px 0 rgba(39, 83, 119, .13); }
.product-card-link { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 17px 17px 10px; color: inherit; }
.product-card-link:focus-visible { outline: 3px solid #f1b655; outline-offset: 3px; }
.product-card-head { display: flex; min-width: 0; align-items: center; gap: 10px; padding-right: 48px; }
.category-like-button { position: absolute; z-index: 2; top: 15px; right: 15px; }
.product-logo { display: grid; flex: none; place-items: center; width: 42px; height: 42px; object-fit: cover; border: 2px solid var(--outline); border-radius: 12px; background: #7890ee; color: white; font: 22px Georgia, serif; }
img.product-logo { display: block; object-fit: contain; border: 0; border-radius: 0; background: transparent; }
.product-card-title { min-width: 0; }
.product-card-title small { display: block; overflow: hidden; color: #92a1ad; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-card-title h3 { margin: 3px 0 0; color: #244d72; font: 700 17px/1.1 Georgia, "Songti SC", serif; overflow-wrap: anywhere; }
.featured-badge { flex: none; margin-left: auto; padding: 4px 6px; border-radius: 8px; background: #fff0bb; color: #916622; font-size: 8px; font-weight: 700; }
.product-tagline { margin: 15px 0 12px; color: #5c7589; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.product-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.product-badges span { padding: 4px 7px; border: 1px solid #d6e5ea; border-radius: 7px; background: #f2f9fa; color: #617b8e; font-size: 9px; }
.category-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.page-numbers { display: flex; gap: 6px; }
.page-numbers a,.page-step { display: grid; min-width: 34px; height: 34px; place-items: center; padding: 0 10px; border: 1px solid #c7dce5; border-radius: 9px; background: #fffefa; color: #4b6d88; font-size: 10px; font-weight: 700; }
.page-numbers a.active { border-color: var(--outline); background: #dff5ff; color: var(--ink); box-shadow: 2px 2px 0 rgba(23, 67, 111, .14); }
.page-step:hover,.page-numbers a:hover { border-color: #78bad1; background: #effaff; }
.category-empty { display: grid; justify-items: center; padding: 55px 15px; text-align: center; }
.category-empty > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #fff0bb; color: #b8893c; font-size: 22px; }
.category-empty h2 { margin: 14px 0 4px; color: #244d72; font: 700 20px Georgia, "Songti SC", serif; }
.category-empty p { margin: 0; color: #778c9b; font-size: 11px; }
.category-empty a { margin-top: 16px; color: #41688c; font-size: 11px; font-weight: 700; }

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .category-shell { padding: 20px 14px 45px; }
  .category-heading { padding: 20px 17px; }
  .category-heading p { max-width: 225px; font-size: 11px; }
  .category-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 17px -14px 20px; padding: 2px 14px 7px; scrollbar-width: none; }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-tabs a { flex: none; }
  .category-results { padding: 15px 12px; }
  .results-heading h2 { font-size: 18px; }
  .product-grid { grid-template-columns: 1fr; gap: 10px; }
  .product-card { min-height: 166px; }
  .product-card-link { padding: 14px 14px 9px; }
  .category-like-button { top: 12px; right: 12px; }
  .category-pagination { gap: 7px; }
  .page-step { min-width: 75px; padding: 0 7px; }
}