:root {
  --ink: #111111;
  --muted: #595854;
  --panel: #d9d7d2;
  --stage: #71716b;
  --paper: #f7f5ef;
  --felony: #c83f31;
  --felony-soft: #ffe0db;
  --misdemeanor: #16846f;
  --misdemeanor-soft: #d9f2e6;
  --wobbler: #d9841d;
  --wobbler-soft: #ffe8c7;
  --infraction: #5f6f89;
  --infraction-soft: #e7ecf5;
  --lookup: #1f2937;
  --lookup-soft: #e5e7eb;
  --civil: #3b5b92;
  --civil-soft: #e1ecff;
  --municipal: #6f4e37;
  --municipal-soft: #f1e3d3;
  --county: #595f72;
  --county-soft: #e6e8ef;
  --federal: #174a7c;
  --federal-soft: #d8ecff;
  --general: #5b3b82;
  --general-soft: #ece1ff;
  --radio: #111827;
  --radio-soft: #dbeafe;
  --gold: #f7c948;
}

* {
  box-sizing: border-box;
}

[hidden],
.utility-hidden,
.hero-copy,
.status-strip {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 4%, rgba(247, 201, 72, 0.18), transparent 20%),
    radial-gradient(circle at 86% 10%, rgba(22, 132, 111, 0.12), transparent 24%),
    #f3f1ec;
  color: var(--ink);
  font-family: Bahnschrift, "Aptos", "Segoe UI", Arial, sans-serif;
}

button,
input,
a {
  font: inherit;
}

.page-shell {
  width: min(1680px, calc(100% - 28px));
  margin: 0 auto;
  padding: 10px 0 18px;
}

.hero-bar {
  width: 100%;
  margin: 0 auto 10px;
  text-align: center;
}

.hero-bar h1 {
  margin: 0;
  color: #111;
  font-family: "Cooper Black", "Franklin Gothic Heavy", "Arial Black", Georgia, serif;
  font-size: clamp(3rem, 4.8vw, 5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: none;
}

.kakobuy-trigger,
.contact-trigger,
.ten-codes-trigger {
  position: fixed;
  top: 18px;
  z-index: 30;
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  padding: 0 22px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.18);
}

.kakobuy-trigger {
  left: 18px;
}

.contact-trigger {
  right: 18px;
}

.ten-codes-trigger {
  right: 122px;
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.56fr) minmax(0, 3.4fr) minmax(190px, 0.45fr);
  gap: 18px;
  align-items: start;
}

.side-rail,
.class-rail {
  display: grid;
}

.categories-panel,
.class-panel,
.latest-panel {
  min-height: 720px;
  padding: 18px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 28px;
  background: var(--panel);
}

.panel-heading h2 {
  margin: 0;
  color: #030406;
  font-size: 1.38rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.category-list,
.severity-list,
.latest-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.category-chip,
.severity-chip {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.category-chip:hover,
.category-chip.active,
.severity-chip:hover,
.severity-chip.active {
  background: #111;
  color: #fff;
}

.severity-chip-felony {
  background: var(--felony-soft);
  color: var(--felony);
}

.severity-chip-wobbler {
  background: var(--wobbler-soft);
  color: #8a4d00;
}

.severity-chip-misdemeanor {
  background: var(--misdemeanor-soft);
  color: var(--misdemeanor);
}

.severity-chip-infraction {
  background: var(--infraction-soft);
  color: var(--infraction);
}

.severity-chip-federal {
  background: var(--federal-soft);
  color: var(--federal);
}

.severity-chip-general {
  background: var(--general-soft);
  color: var(--general);
}

.severity-chip-civil {
  background: var(--civil-soft);
  color: var(--civil);
}

.severity-chip-municipal {
  background: var(--municipal-soft);
  color: var(--municipal);
}

.severity-chip-county {
  background: var(--county-soft);
  color: var(--county);
}

.severity-chip-radio,
.severity-chip-lookup {
  background: #fff;
  color: #111;
}

.products-panel {
  max-height: 720px;
  overflow-y: auto;
  border-radius: 28px;
  background: var(--stage);
  padding: 10px 16px 18px;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 0 12px;
  background: var(--stage);
}

.toolbar,
.toolbar input {
  width: 100%;
}

.toolbar input {
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  padding: 0 18px;
  font-size: 0.92rem;
  font-weight: 800;
}

.toolbar input::placeholder {
  color: #777;
}

.secondary-button {
  min-width: 74px;
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.catalog-heading {
  margin: 6px 0 12px;
}

.panel-kicker {
  margin: 0;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.results-meta {
  margin: 3px 0 0;
  color: #fff;
  font-weight: 900;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.product-card {
  min-height: 226px;
  padding: 14px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-1px);
  outline: 0;
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.16);
}

.product-card::before {
  content: "";
  display: block;
  height: 9px;
  margin: -14px -14px 12px;
  background: #111;
}

.product-copy {
  min-height: 186px;
  display: grid;
  grid-template-rows: auto minmax(76px, auto) auto 1fr;
  gap: 10px;
}

.product-code-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: start;
}

.product-code {
  min-height: 30px;
  margin: 0;
  padding: 6px 11px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.product-title {
  min-height: 76px;
  margin: 0;
  padding: 12px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}

.product-offence-class {
  justify-self: start;
  min-height: 30px;
  margin: 0;
  padding: 6px 10px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eee;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.product-meta {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.product-arrestable,
.product-price {
  min-height: 36px;
  margin: 0;
  padding: 7px 9px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.product-price {
  background: var(--gold);
}

.product-arrestable {
  background: #e8e8e4;
}

.product-card.severity-felony::before,
.product-card.severity-felony .product-code,
.product-card.severity-felony .product-offence-class {
  background: var(--felony);
  color: #fff;
}

.product-card.severity-felony .product-title {
  background: var(--felony-soft);
}

.product-card.severity-misdemeanor::before,
.product-card.severity-misdemeanor .product-code,
.product-card.severity-misdemeanor .product-offence-class {
  background: var(--misdemeanor);
  color: #fff;
}

.product-card.severity-misdemeanor .product-title {
  background: var(--misdemeanor-soft);
}

.product-card.severity-wobbler::before,
.product-card.severity-wobbler .product-code,
.product-card.severity-wobbler .product-offence-class {
  background: var(--wobbler);
  color: #fff;
}

.product-card.severity-wobbler .product-title {
  background: var(--wobbler-soft);
}

.product-card.severity-infraction::before,
.product-card.severity-infraction .product-code,
.product-card.severity-infraction .product-offence-class {
  background: var(--infraction);
  color: #fff;
}

.product-card.severity-infraction .product-title {
  background: var(--infraction-soft);
}

.product-card.severity-lookup::before,
.product-card.severity-lookup .product-code,
.product-card.severity-lookup .product-offence-class {
  background: var(--lookup);
  color: #fff;
}

.product-card.severity-lookup .product-title {
  background: var(--lookup-soft);
}

.product-card.severity-civil::before,
.product-card.severity-civil .product-code,
.product-card.severity-civil .product-offence-class {
  background: var(--civil);
  color: #fff;
}

.product-card.severity-civil .product-title {
  background: var(--civil-soft);
}

.product-card.severity-municipal::before,
.product-card.severity-municipal .product-code,
.product-card.severity-municipal .product-offence-class {
  background: var(--municipal);
  color: #fff;
}

.product-card.severity-municipal .product-title {
  background: var(--municipal-soft);
}

.product-card.severity-county::before,
.product-card.severity-county .product-code,
.product-card.severity-county .product-offence-class {
  background: var(--county);
  color: #fff;
}

.product-card.severity-county .product-title {
  background: var(--county-soft);
}

.product-card.severity-radio::before,
.product-card.severity-radio .product-code,
.product-card.severity-radio .product-offence-class {
  background: var(--radio);
  color: #fff;
}

.product-card.severity-radio .product-title {
  background: var(--radio-soft);
}

.product-card.severity-federal::before,
.product-card.severity-federal .product-code,
.product-card.severity-federal .product-offence-class {
  background: var(--federal);
  color: #fff;
}

.product-card.severity-federal .product-title {
  background: var(--federal-soft);
}

.product-card.severity-general::before,
.product-card.severity-general .product-code,
.product-card.severity-general .product-offence-class {
  background: var(--general);
  color: #fff;
}

.product-card.severity-general .product-title {
  background: var(--general-soft);
}

.latest-item {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  text-decoration: none;
}

.latest-title,
.latest-price {
  margin: 0;
}

.latest-title {
  font-weight: 900;
  line-height: 1.1;
}

.latest-price {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--muted);
}

.empty-state {
  grid-column: 1 / -1;
  min-height: 240px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  text-align: center;
}

.contact-modal,
.kakobuy-modal,
.ten-codes-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 17, 17, 0.38);
}

.contact-backdrop,
.kakobuy-backdrop,
.ten-codes-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.contact-card,
.kakobuy-card,
.ten-codes-card {
  position: relative;
  width: min(540px, 100%);
  padding: 22px;
  border-radius: 26px;
  background: var(--paper);
  color: var(--ink);
}

.ten-codes-card {
  width: min(920px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: auto;
}

.contact-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 20px;
}

.contact-head h2,
.kakobuy-card h2,
.ten-codes-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0;
}

.ten-codes-note {
  margin: 0 0 14px;
  border-radius: 18px;
  background: #fff5cf;
  color: #4a3900;
  padding: 14px 16px;
  font-weight: 900;
  line-height: 1.35;
}

.la-radio-list,
.ten-codes-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.la-radio-list {
  margin-bottom: 14px;
}

.la-radio-list p,
.ten-codes-list p {
  margin: 0;
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.15;
}

.la-radio-list p {
  background: #111;
  color: #fff;
}

.kakobuy-badge {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kakobuy-copy {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}

.contact-links,
.kakobuy-actions {
  display: grid;
  gap: 12px;
}

.rights-copy {
  display: grid;
  gap: 14px;
}

.rights-copy p {
  margin: 0;
  border-radius: 20px;
  background: #fff;
  padding: 18px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.45;
}

.rights-copy .rights-note {
  background: #fff5cf;
  color: #4a3900;
  font-size: 0.9rem;
}

.rights-source {
  border-radius: 16px;
  background: #111;
  color: #fff;
  padding: 13px 18px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.kakobuy-close,
.kakobuy-open,
.contact-close {
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  padding: 12px 16px;
  font-weight: 900;
  text-decoration: none;
}

.contact-close,
.kakobuy-close {
  cursor: pointer;
}

@media (max-width: 1180px) {
  .layout-grid {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categories-panel,
  .class-panel,
  .latest-panel {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: min(100% - 20px, 100%);
    padding-top: 76px;
  }

  .hero-bar {
    width: 100%;
  }

  .hero-bar h1 {
    font-size: 3rem;
  }

  .kakobuy-trigger,
  .contact-trigger,
  .ten-codes-trigger {
    top: 12px;
    min-height: 42px;
    padding: 0 14px;
    font-size: 0.82rem;
  }

  .ten-codes-trigger {
    top: 62px;
    right: 12px;
  }

  .contact-trigger {
    right: 12px;
  }

  .la-radio-list,
  .ten-codes-list {
    grid-template-columns: 1fr;
  }

  .search-row,
  .products-grid,
  .product-meta {
    grid-template-columns: 1fr;
  }
}