/* ============================================================
   Compressor Controller — Components
   Light only. Hairline borders, tabular-nums monospace specs,
   Emil-school motion (220ms cubic-bezier(.32,.72,0,1)).
   ============================================================ */

/* OceanWP wraps its main column in a max-width container — let our
   pages bleed full-width edge to edge while still respecting the WP
   header/footer. */
body.cc-page-catalog #main,
body.cc-page-installers #main,
body.cc-page-detail-compressor #main,
body.cc-page-detail-installer #main,
body.cc-page-catalog #content-wrap,
body.cc-page-installers #content-wrap,
body.cc-page-detail-compressor #content-wrap,
body.cc-page-detail-installer #content-wrap,
body.cc-page-catalog #wrap,
body.cc-page-installers #wrap,
body.cc-page-detail-compressor #wrap,
body.cc-page-detail-installer #wrap,
body.cc-page-catalog .site-main,
body.cc-page-installers .site-main,
body.cc-page-detail-compressor .site-main,
body.cc-page-detail-installer .site-main,
body.cc-page-catalog .content-area,
body.cc-page-installers .content-area,
body.cc-page-detail-compressor .content-area,
body.cc-page-detail-installer .content-area,
body.cc-page-catalog .entry-content,
body.cc-page-installers .entry-content,
body.cc-page-detail-compressor .entry-content,
body.cc-page-detail-installer .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.cc-page-catalog #content,
body.cc-page-installers #content,
body.cc-page-detail-compressor #content,
body.cc-page-detail-installer #content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.cc-page-catalog .container,
body.cc-page-installers .container,
body.cc-page-detail-compressor .container,
body.cc-page-detail-installer .container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* OceanWP appends a "page-header" or page title; hide it for the catalog/installer pages. */
body.cc-page-catalog .page-header,
body.cc-page-installers .page-header,
body.cc-page-detail-compressor .page-header,
body.cc-page-detail-installer .page-header,
body.cc-page-catalog .entry-header,
body.cc-page-installers .entry-header,
body.cc-page-detail-compressor .entry-header,
body.cc-page-detail-installer .entry-header,
body.cc-page-catalog .single-page-header,
body.cc-page-installers .single-page-header,
body.cc-page-detail-compressor .single-page-header,
body.cc-page-detail-installer .single-page-header {
  display: none !important;
}

/* ------------------------------------------------------------
   Root shell
   ------------------------------------------------------------ */
.cc-root {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.cc-root *,
.cc-root *::before,
.cc-root *::after { box-sizing: border-box; }

.cc-root a { color: inherit; text-decoration: none; }
.cc-root .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cc-root ::selection {
  background: var(--c-accent-bg);
  color: var(--c-accent-ink);
}

.cc-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------
   Cross-link bar (catalog ↔ installer)
   ------------------------------------------------------------ */
.cc-cross {
  display: flex;
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
  overflow: hidden;
  margin: 24px 0 18px;
  box-shadow: var(--shadow-1);
}
.cc-cross-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 56px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink-2);
  border-right: 1px solid var(--c-line);
  letter-spacing: -.005em;
  line-height: 1.2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cc-cross-link:last-child { border-right: 0; }
.cc-cross-link small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink-4);
  margin-top: 3px;
  letter-spacing: 0;
}
.cc-cross-link:hover { background: var(--c-surface-2); color: var(--c-ink); }
.cc-cross-link:hover small { color: var(--c-ink-3); }
.cc-cross-link.is-active { background: var(--c-accent); color: #fff; }
.cc-cross-link.is-active small { color: #fff; opacity: .85; }
.cc-cross-link.is-active:hover { background: var(--c-accent-ink); color: #fff; }

@media (max-width: 720px) {
  .cc-cross { flex-direction: column; }
  .cc-cross-link {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    min-height: 52px;
  }
  .cc-cross-link:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------
   Banner
   ------------------------------------------------------------ */
.cc-banner {
  background: var(--c-surface-2);
  color: var(--c-ink-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  padding: 10px 14px;
  font-size: 12.5px;
  letter-spacing: .005em;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.cc-banner strong { color: var(--c-ink-2); font-weight: 600; }
.cc-banner-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--c-accent);
  display: inline-block; flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Layout — sidebar + main
   ------------------------------------------------------------ */
.cc-layout {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 80px;
}
@media (max-width: 720px) {
  .cc-layout { grid-template-columns: 1fr; gap: 18px; }
}

.cc-sidebar {
  position: sticky;
  top: 24px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--r-3);
  padding: 16px;
  box-shadow: var(--shadow-1);
}
@media (max-width: 720px) {
  .cc-sidebar { position: static; }
}
.cc-sidebar h2 {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-ink-3);
  margin: 0 0 10px;
}

.cc-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cc-search:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
}
.cc-search svg {
  width: 14px; height: 14px;
  color: var(--c-ink-4); flex: 0 0 auto;
}
.cc-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: inherit; color: var(--c-ink);
  font-size: 13px;
}
.cc-search input::placeholder { color: var(--c-ink-4); }

.cc-facet-stub {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-line);
  font-size: 12px;
  color: var(--c-ink-3);
  line-height: 1.5;
}
.cc-facet-stub strong {
  display: block; color: var(--c-ink-2); font-weight: 600; margin-bottom: 4px;
}

/* ------------------------------------------------------------
   Archive header
   ------------------------------------------------------------ */
.cc-main { min-width: 0; }

.cc-archive-head {
  display: flex; align-items: baseline;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.cc-archive-head h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--c-ink);
}
.cc-archive-head .cc-count { color: var(--c-ink-3); font-size: 13px; }

/* ------------------------------------------------------------
   Grid
   ------------------------------------------------------------ */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ------------------------------------------------------------
   Compressor card
   ------------------------------------------------------------ */
.cc-card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  padding: 14px; gap: 10px;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  position: relative;
  color: var(--c-ink);
}
.cc-card:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-2);
}
@media (prefers-reduced-motion: no-preference) {
  .cc-card:hover { transform: translateY(-2px); }
  .cc-grid > .cc-card { animation: cc-card-in var(--dur) var(--ease) both; }
}
@keyframes cc-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-card-img {
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2);
  border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.cc-card-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.cc-card-img .cc-glyph {
  color: var(--c-ink-4);
}

.cc-card-brand {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-ink-3);
}

.cc-card-model {
  font-family: var(--font-mono);
  font-weight: 600; font-size: 14px;
  color: var(--c-ink); letter-spacing: -.01em;
  word-break: break-word; line-height: 1.3;
}

.cc-spec {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--c-ink-2);
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}
.cc-spec .em { color: var(--c-ink-4); }

.cc-sector-chip {
  display: inline-block;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
  background: var(--c-sec-oem); color: var(--c-sec-oem-fg);
  align-self: flex-start;
}
.cc-sector-chip.s-cig  { background: var(--c-sec-cig);  color: var(--c-sec-cig-fg); }
.cc-sector-chip.s-cic  { background: var(--c-sec-cic);  color: var(--c-sec-cic-fg); }
.cc-sector-chip.s-ind  { background: var(--c-sec-ind);  color: var(--c-sec-ind-fg); }
.cc-sector-chip.s-cpr  { background: var(--c-sec-cpr);  color: var(--c-sec-cpr-fg); }
.cc-sector-chip.s-uq   { background: var(--c-sec-uq);   color: var(--c-sec-uq-fg); }
.cc-sector-chip.s-md   { background: var(--c-sec-md);   color: var(--c-sec-md-fg); }
.cc-sector-chip.s-ba   { background: var(--c-sec-ba);   color: var(--c-sec-ba-fg); }
.cc-sector-chip.s-au   { background: var(--c-sec-au);   color: var(--c-sec-au-fg); }
.cc-sector-chip.s-pg   { background: var(--c-sec-pg);   color: var(--c-sec-pg-fg); }
.cc-sector-chip.s-oem  { background: var(--c-sec-oem);  color: var(--c-sec-oem-fg); }

.cc-divider {
  border-top: 1px dashed var(--c-line);
  margin-top: 4px;
}
.cc-card-price {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 8px;
}
.cc-card-price .label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-ink-3);
}
.cc-card-price .value {
  font-family: var(--font-mono);
  font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.cc-card-price .value.em { color: var(--c-ink-4); font-weight: 500; }

/* ------------------------------------------------------------
   Installer card
   ------------------------------------------------------------ */
.cc-icard {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  padding: 14px;
  min-height: 230px;
  color: var(--c-ink);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.cc-icard:hover {
  transform: translateY(-2px);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-2);
}
@media (prefers-reduced-motion: no-preference) {
  .cc-grid > .cc-icard { animation: cc-card-in var(--dur) var(--ease) both; }
}

.cc-icard-name {
  font-size: 16px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.3;
  color: var(--c-ink);
  padding-right: 1.4rem;
}

.cc-icard-meta {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; font-size: 12px; color: var(--c-ink-3);
}
.cc-icard-meta .pin { color: var(--c-ink-4); }
.cc-icard-meta .dot { color: var(--c-line-strong); margin: 0 2px; }
.cc-icard-meta .region-tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-4);
}

/* Tier pill */
.cc-tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid;
  font-family: var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.cc-tier-1 { background: var(--c-tier1-bg); color: var(--c-tier1-ink); border-color: var(--c-tier1-line); }
.cc-tier-2 { background: var(--c-tier2-bg); color: var(--c-tier2-ink); border-color: var(--c-tier2-line); }
.cc-tier-3 { background: var(--c-tier3-bg); color: var(--c-tier3-ink); border-color: var(--c-tier3-line); }

/* Brand crests row */
.cc-crests { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cc-crest {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-1);
  background: var(--c-surface-2); color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}
.cc-crest.more { color: var(--c-ink-4); background: transparent; }

/* Capability icon row */
.cc-caps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-cap {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-1);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-4);
  position: relative;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cc-cap[data-on="true"] {
  color: var(--c-accent);
  border-color: var(--c-accent-line);
  background: var(--c-accent-bg);
}
.cc-cap[data-on="false"] { opacity: .4; }
.cc-cap svg { width: 12px; height: 12px; }

/* Vertical chips */
.cc-vchips { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-vchip {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 500;
  padding: 3px 7px; border-radius: 999px;
  letter-spacing: .005em;
  background: var(--c-surface-2); color: var(--c-ink-3);
}
.cc-vchip.v-petrochemical       { background: var(--c-vert-petro);    color: var(--c-vert-petro-ink); }
.cc-vchip.v-oil-gas-offshore    { background: var(--c-vert-oil);      color: var(--c-vert-oil-ink); }
.cc-vchip.v-automotive          { background: var(--c-vert-auto);     color: var(--c-vert-auto-ink); }
.cc-vchip.v-aerospace           { background: var(--c-vert-aero);     color: var(--c-vert-aero-ink); }
.cc-vchip.v-food-beverage       { background: var(--c-vert-food);     color: var(--c-vert-food-ink); }
.cc-vchip.v-pharmaceutical      { background: var(--c-vert-pharma);   color: var(--c-vert-pharma-ink); }
.cc-vchip.v-medical             { background: var(--c-vert-medical);  color: var(--c-vert-medical-ink); }
.cc-vchip.v-tire-heavy-commercial { background: var(--c-vert-tire);   color: var(--c-vert-tire-ink); }
.cc-vchip.v-pipeline-cng        { background: var(--c-vert-pipe);     color: var(--c-vert-pipe-ink); }
.cc-vchip.v-tech-semiconductor  { background: var(--c-vert-tech);     color: var(--c-vert-tech-ink); }
.cc-vchip.v-general-manufacturing { background: var(--c-vert-mfg);    color: var(--c-vert-mfg-ink); }
.cc-vchip.v-agriculture         { background: var(--c-vert-ag);       color: var(--c-vert-ag-ink); }
.cc-vchip.v-municipal-water     { background: var(--c-vert-water);    color: var(--c-vert-water-ink); }
.cc-vchip.v-climate-control     { background: var(--c-vert-climate);  color: var(--c-vert-climate-ink); }
.cc-vchip.v-textiles            { background: var(--c-vert-textiles); color: var(--c-vert-textiles-ink); }
.cc-vchip.v-chemical-processing { background: var(--c-vert-chem);     color: var(--c-vert-chem-ink); }
.cc-vchip.v-lifting-handling    { background: var(--c-vert-lift);     color: var(--c-vert-lift-ink); }
.cc-vchip.v-urban-manufacturing { background: var(--c-vert-urban);    color: var(--c-vert-urban-ink); }

/* Card foot */
.cc-icard-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 10px;
  border-top: 1px dashed var(--c-line);
}
.cc-icard-foot .states {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--c-ink-4); letter-spacing: .04em;
}
.cc-cta-row { display: flex; align-items: center; gap: 6px; }
.cc-cta-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--r-1);
  font-size: 11.5px; font-weight: 500; color: var(--c-ink-2);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.cc-cta-btn:hover {
  color: var(--c-accent-ink);
  border-color: var(--c-accent-line);
  background: var(--c-accent-bg);
}
.cc-cta-btn svg { width: 11px; height: 11px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cc-card, .cc-icard { transition: none; }
  .cc-card:hover, .cc-icard:hover { transform: none; }
  .cc-grid > .cc-card,
  .cc-grid > .cc-icard { animation: none; }
}

/* Once the filter UI is wired, skip the entrance animation when cards are
   shown/hidden — re-running it on every toggle is distracting. */
.cc-grid[data-cc-filtered="true"] > .cc-card,
.cc-grid[data-cc-filtered="true"] > .cc-icard {
  animation: none !important;
}

/* ============================================================
   FACET SIDEBAR
   ============================================================ */

.cc-sidebar { padding: 14px 14px 18px; max-height: calc(100vh - 32px); overflow-y: auto; }
.cc-sidebar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 10px;
}
.cc-sidebar-head h2 { margin: 0; }

.cc-clear-all {
  appearance: none; border: 0; background: transparent; padding: 2px 4px;
  font: inherit; font-size: 11px; color: var(--c-accent);
  cursor: pointer; letter-spacing: .005em;
  border-radius: var(--r-1);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cc-clear-all:hover { color: var(--c-accent-ink); background: var(--c-accent-bg); }
.cc-clear-all[hidden] { display: none; }

.cc-active-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0 0 10px;
}
.cc-active-chips:empty { display: none; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 9px;
  font: inherit; font-size: 11.5px; font-weight: 500;
  background: var(--c-accent-bg); color: var(--c-accent-ink);
  border: 1px solid var(--c-accent-line); border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cc-chip:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.cc-chip svg {
  width: 11px; height: 11px;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none;
  opacity: .7;
}

.cc-facet-group { margin-bottom: 10px; }

/* Search input refinements when used inside the sidebar */
.cc-sidebar .cc-search { margin-bottom: 4px; }

/* Sort dropdown — sits in the left column above the facet accordions. */
.cc-sort { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.cc-sort-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.cc-sort select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color 160ms cubic-bezier(.32,.72,0,1), box-shadow 160ms cubic-bezier(.32,.72,0,1);
}
.cc-sort select:hover { border-color: var(--c-line-strong, var(--c-ink-3)); }
.cc-sort select:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
}

/* Inline hint shown next to a slider/legend label to clarify intent. */
.cc-hint-inline {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .005em;
  color: var(--c-ink-3);
  margin-left: 4px;
  text-transform: none;
}

/* Accordion facet group */
.cc-facet {
  border-top: 1px solid var(--c-line);
  margin-top: 8px;
  padding-top: 10px;
}
.cc-facet > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-ink-2);
  padding: 4px 0;
}
.cc-facet > summary::-webkit-details-marker { display: none; }
.cc-facet > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--c-ink-3);
  border-bottom: 1.5px solid var(--c-ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.cc-facet[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.cc-facet-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 0 6px;
}

/* Checkbox / radio rows */
.cc-check, .cc-radio {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--c-ink-2);
  cursor: pointer;
  padding: 2px 0;
  letter-spacing: -.005em;
}
.cc-check input, .cc-radio input {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-1);
  background: var(--c-surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  position: relative;
}
.cc-radio input { border-radius: 999px; }
.cc-check input:checked,
.cc-radio input:checked {
  border-color: var(--c-accent);
  background: var(--c-accent);
}
.cc-check input:checked::after {
  content: "";
  position: absolute;
  width: 4px; height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.cc-radio input:checked::after {
  content: "";
  width: 5px; height: 5px;
  background: #fff; border-radius: 999px;
}
.cc-check input:focus-visible,
.cc-radio input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.cc-check span, .cc-radio span { line-height: 1.3; }

/* Two-column grid for compact lists */
.cc-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
@media (max-width: 360px) {
  .cc-check-grid { grid-template-columns: 1fr; }
}

/* Scrollable brand list */
.cc-check-scroll {
  display: flex; flex-direction: column;
  max-height: 220px; overflow-y: auto;
  padding-right: 4px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  padding: 6px 8px;
  background: var(--c-surface);
}
.cc-check-scroll::-webkit-scrollbar { width: 6px; }
.cc-check-scroll::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 3px; }

/* Radio fieldset wrapper */
.cc-radioset {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cc-radioset legend {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-ink-3);
  margin-bottom: 4px;
  padding: 0;
}

/* Multi-select dropdown */
.cc-multiselect {
  width: 100%;
  padding: 6px 8px;
  font: inherit; font-size: 12.5px;
  font-family: var(--font-mono);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
  color: var(--c-ink);
  outline: none;
  resize: none;
}
.cc-multiselect:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
}
.cc-multiselect option {
  padding: 4px 6px;
  font-family: var(--font-mono);
}
.cc-hint {
  font-size: 11px;
  color: var(--c-ink-4);
  margin: 0;
}

/* Vertical chip-pick */
.cc-chip-pick {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cc-chip-toggle {
  display: inline-flex;
  cursor: pointer;
}
.cc-chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cc-chip-toggle span {
  display: inline-block;
  padding: 4px 9px;
  font-size: 11px; font-weight: 500;
  background: var(--c-surface-2); color: var(--c-ink-2);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  letter-spacing: .005em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cc-chip-toggle input:checked + span {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.cc-chip-toggle input:focus-visible + span {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Capability toggles */
.cc-toggle-list { display: flex; flex-direction: column; gap: 6px; }
.cc-toggle {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--c-ink-2);
}
.cc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cc-toggle-track {
  flex: 0 0 auto;
  width: 30px; height: 17px;
  background: var(--c-line);
  border-radius: 999px;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.cc-toggle-track::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10,12,18,.16);
  transition: transform var(--dur) var(--ease);
}
.cc-toggle input:checked + .cc-toggle-track {
  background: var(--c-accent);
}
.cc-toggle input:checked + .cc-toggle-track::before {
  transform: translateX(13px);
}
.cc-toggle input:focus-visible + .cc-toggle-track {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.cc-toggle-label { line-height: 1.3; }

/* ============================================================
   RANGE SLIDERS (two-thumb shared track)
   ============================================================ */
.cc-range { display: flex; flex-direction: column; gap: 6px; }
.cc-range-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px;
}
.cc-range-label {
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  color: var(--c-ink-3);
  font-size: 10.5px;
}
.cc-range-readout {
  font-size: 12px;
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}
.cc-range-track {
  position: relative;
  height: 22px;
  margin: 0 6px;
}
.cc-range-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: var(--c-line);
  border-radius: 2px;
  transform: translateY(-50%);
}
.cc-range-fill {
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
  left: 0; right: 100%;
}
.cc-range-track input[type="range"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 22px;
  margin: 0; padding: 0;
  background: transparent;
  appearance: none; -webkit-appearance: none;
  pointer-events: none;
  outline: none;
}
.cc-range-track input[type="range"]::-webkit-slider-runnable-track {
  background: transparent; height: 22px; border: 0;
}
.cc-range-track input[type="range"]::-moz-range-track {
  background: transparent; height: 22px; border: 0;
}
.cc-range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  background: var(--c-surface);
  border: 2px solid var(--c-accent);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10,12,18,.18);
  cursor: pointer;
  pointer-events: auto;
  margin-top: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
}
.cc-range-track input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--c-surface);
  border: 2px solid var(--c-accent);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10,12,18,.18);
  cursor: pointer;
  pointer-events: auto;
}
.cc-range-track input[type="range"]:active::-webkit-slider-thumb,
.cc-range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--c-accent-bg);
}
.cc-range-track input[type="range"]:active::-moz-range-thumb,
.cc-range-track input[type="range"]:focus-visible::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--c-accent-bg);
}
.cc-range-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-ink-4);
  letter-spacing: .02em;
  padding: 0 6px;
}

/* ============================================================
   FILTER TOGGLE BUTTON (mobile + tablet) + EMPTY STATE
   ============================================================ */
.cc-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  appearance: none; border: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink);
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--r-2);
  cursor: pointer;
  margin-left: auto;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cc-filter-toggle:hover {
  border-color: var(--c-line-strong);
  background: var(--c-surface-2);
}
.cc-filter-toggle svg { width: 14px; height: 14px; color: var(--c-ink-3); }
.cc-filter-toggle-badge {
  display: inline-block;
  min-width: 18px; padding: 1px 6px;
  background: var(--c-accent); color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.cc-filter-toggle-badge[hidden] { display: none; }

.cc-empty-state {
  margin: 24px 0;
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-3);
  font-size: 13px;
  color: var(--c-ink-3);
  background: var(--c-surface);
}
.cc-link {
  appearance: none; background: transparent; border: 0; padding: 0;
  font: inherit; color: var(--c-accent); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--c-accent-line);
}
.cc-link:hover { color: var(--c-accent-ink); }

/* Drawer handle (visible only when drawer is open or on mobile) */
.cc-drawer-handle {
  display: none;
  appearance: none; border: 0; background: transparent;
  width: 100%; padding: 8px 0;
  cursor: pointer;
}
.cc-drawer-grip {
  display: block;
  width: 36px; height: 4px;
  margin: 0 auto;
  background: var(--c-line-strong);
  border-radius: 999px;
}

/* Drawer backdrop */
.cc-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 12, 18, .35);
  z-index: 998;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.cc-drawer-backdrop:not([hidden]) { opacity: 1; }

/* ============================================================
   MOBILE / TABLET — drawer behavior (<1024px)
   ============================================================ */
@media (max-width: 1023px) {
  .cc-layout { grid-template-columns: 1fr; gap: 18px; }

  .cc-filter-toggle { display: inline-flex; }

  .cc-sidebar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: 88vh;
    border: 0;
    border-top: 1px solid var(--c-line);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(10, 12, 18, .12);
    z-index: 999;
    transform: translateY(100%);
    transition: transform var(--dur) var(--ease);
    padding-top: 4px;
  }
  .cc-sidebar.is-open { transform: translateY(0); }
  .cc-drawer-handle { display: block; }
  body.cc-drawer-open { overflow: hidden; }
}

/* ============================================================
   DESKTOP — sticky sidebar (≥1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .cc-layout {
    grid-template-columns: var(--side-w) 1fr;
  }
  .cc-sidebar {
    position: sticky;
    top: 24px;
  }
  .cc-drawer-backdrop { display: none !important; }
  .cc-filter-toggle { display: none; }
}

/* Reduced motion overrides for facets */
@media (prefers-reduced-motion: reduce) {
  .cc-sidebar,
  .cc-chip,
  .cc-range-track input[type="range"]::-webkit-slider-thumb,
  .cc-range-track input[type="range"]::-moz-range-thumb,
  .cc-toggle-track,
  .cc-toggle-track::before,
  .cc-drawer-backdrop {
    transition: none;
  }
}

/* ============================================================
   SECTOR CHIP — readable on cards, never accent blue
   Palette colors are set via the .s-* modifier classes earlier in
   this file; this block tightens the chrome (border, ellipsis,
   max-width) so long sector names stay on one line.
   ============================================================ */
.cc-sector-chip {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(10, 12, 18, .08);
}

/* ============================================================
   STATE LIST (replaces native multi-select)
   ============================================================ */
.cc-state-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
}
.cc-state-list::-webkit-scrollbar { width: 6px; }
.cc-state-list::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 3px; }

.cc-state-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--c-ink-2);
  cursor: pointer;
  border-radius: var(--r-1);
  transition: background var(--dur) var(--ease);
}
.cc-state-row:hover { background: var(--c-surface-2); }
.cc-state-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-1);
  background: var(--c-surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cc-state-row input[type="checkbox"]:checked {
  border-color: var(--c-accent);
  background: var(--c-accent);
}
.cc-state-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  width: 4px; height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.cc-state-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.cc-state-row .cc-state-name {
  color: var(--c-ink-2);
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-state-row .cc-state-code {
  font-size: 10.5px;
  color: var(--c-ink-4);
  letter-spacing: .04em;
}
.cc-state-row .cc-state-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-accent-ink);
  background: var(--c-accent-bg);
  border: 1px solid var(--c-accent-line);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 1.5;
  min-width: 18px;
  text-align: center;
}
.cc-state-row:has(input:checked) {
  background: var(--c-accent-bg);
}
.cc-state-row:has(input:checked) .cc-state-name { color: var(--c-accent-ink); font-weight: 600; }
.cc-state-row:has(input:checked) .cc-state-code { color: var(--c-accent-ink); }

.cc-facet-tally {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-accent-ink);
  letter-spacing: .02em;
  text-transform: none;
  margin-left: 6px;
}
.cc-facet-tally[hidden] { display: none; }

/* ============================================================
   GRID / MAP VIEW TOGGLE
   ============================================================ */
.cc-view-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-surface);
  overflow: hidden;
  margin-left: auto;
  box-shadow: var(--shadow-1);
}
.cc-view-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--c-ink-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cc-view-btn + .cc-view-btn {
  border-left: 1px solid var(--c-line);
}
.cc-view-btn:hover {
  background: var(--c-surface-2);
  color: var(--c-ink);
}
.cc-view-btn.is-active {
  background: var(--c-accent-bg);
  color: var(--c-accent-ink);
  font-weight: 600;
}
.cc-view-btn svg {
  width: 13px; height: 13px;
  color: currentColor;
}
.cc-view-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* When the filter toggle button shows up next to the view toggle on small
   screens we want the view toggle to keep its own margin-left:auto behavior
   only if the filter button is hidden. On desktop both are visible so we
   just need the view toggle to come before the filter toggle. */
.cc-archive-head .cc-view-toggle { margin-left: auto; }
.cc-archive-head .cc-filter-toggle { margin-left: 8px; }
@media (max-width: 720px) {
  .cc-view-btn span { display: none; }
  .cc-view-btn { padding: 8px 10px; }
}

/* ============================================================
   INSTALLER MAP — Leaflet + OpenStreetMap
   ============================================================ */
.cc-map-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cc-map-view[hidden] { display: none; }
.cc-map-frame {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  padding: 0;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  min-height: 560px;
}
.cc-leaflet {
  width: 100%;
  min-height: 560px;
  height: 560px;
  display: block;
  background: #f3f1eb;
}
/* Leaflet sets its own height inline once initialized; keep ours as the floor. */
.cc-leaflet.leaflet-container { min-height: 560px; }
@media (max-width: 720px) {
  .cc-map-frame { min-height: 420px; }
  .cc-leaflet { height: 420px; min-height: 420px; }
}

/* Round Leaflet's overflow with the frame. */
.cc-leaflet .leaflet-container {
  background: #eef0ee;
  font-family: var(--font-sans);
}
.cc-leaflet .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  color: var(--c-ink-3);
}
.cc-leaflet .leaflet-control-attribution a {
  color: var(--c-accent);
}

/* Override default Leaflet zoom-control chrome to match our hairline language. */
.cc-leaflet .leaflet-bar {
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.cc-leaflet .leaflet-bar a,
.cc-leaflet .leaflet-bar a:hover {
  background: var(--c-surface);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  width: 30px; height: 30px; line-height: 30px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-mono);
}
.cc-leaflet .leaflet-bar a:last-child { border-bottom: 0; }
.cc-leaflet .leaflet-bar a:hover { background: var(--c-surface-2); color: var(--c-accent); }

/* Pin styling — circleMarker uses SVG, this kicks in on hover. */
.cc-leaflet-pin {
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.32,.72,0,1), filter 180ms cubic-bezier(.32,.72,0,1);
  transform-origin: center;
  transform-box: fill-box;
}
.cc-leaflet-pin:hover {
  filter: drop-shadow(0 1px 4px rgba(18, 72, 247, 0.55));
  transform: scale(1.18);
}

/* Popup chrome — match our card vocabulary. */
.cc-leaflet .leaflet-popup-content-wrapper {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  padding: 0;
}
.cc-leaflet .leaflet-popup-content {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-ink);
}
.cc-leaflet .leaflet-popup-tip {
  background: var(--c-surface);
  box-shadow: 0 1px 0 var(--c-line);
}
.cc-leaf-pop {
  padding: 12px 14px 10px;
  min-width: 200px;
}
.cc-leaf-pop__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -.005em;
  margin-bottom: 2px;
  line-height: 1.25;
}
.cc-leaf-pop__loc {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--c-ink-2);
  letter-spacing: 0;
  margin-bottom: 4px;
}
.cc-leaf-pop__tier {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--c-accent-ink);
  background: var(--c-accent-bg);
  padding: 2px 6px;
  border-radius: var(--r-1);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cc-leaf-pop__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  border-top: 1px solid var(--c-line);
  padding-top: 8px;
}
.cc-leaf-pop__link {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: var(--c-accent-line);
  text-underline-offset: 2px;
}
.cc-leaf-pop__link:hover { color: var(--c-accent-ink); }
.cc-leaf-pop__filter {
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--c-ink);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: background 160ms cubic-bezier(.32,.72,0,1), border-color 160ms cubic-bezier(.32,.72,0,1);
}
.cc-leaf-pop__filter:hover {
  background: var(--c-accent-bg);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.cc-map-noscript {
  padding: 14px;
  margin: 0;
  color: var(--c-ink-2);
  font-size: 13px;
}

.cc-map-hint {
  font-size: 12px;
  color: var(--c-ink-3);
  margin: 0;
  letter-spacing: -.005em;
}
.cc-map-hint a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: var(--c-accent-line);
}
.cc-map-hint a:hover { color: var(--c-accent-ink); }

/* When the grid is hidden in favor of map view, drop its layout */
.cc-grid[data-cc-view="map"] { display: none; }

/* Reduced-motion: kill pin scale transition */
@media (prefers-reduced-motion: reduce) {
  .cc-leaflet-pin {
    transition: none;
  }
}

/* ============================================================
   Detail pages — sidebar in left column, content in right.
   Reuses .cc-layout from listings (280px sidebar + 1fr main,
   sticky desktop, falls through to single-column at <1024px).
   ============================================================ */

/* Make sure the detail page main column never overflows the grid track.
   The hero grid + spec grid have their own internal min sizes; we just
   ensure the wrapping <section.cc-main> obeys grid sizing. */
body.cc-page-detail-compressor .cc-main,
body.cc-page-detail-installer .cc-main {
  min-width: 0;
}

/* The hero on detail pages is a multi-col grid; on narrower main columns
   the existing media queries inside cc-detail.css already collapse it.
   Just guard against horizontal overflow in case any inner element has
   intrinsic min-width: 0 issues. */
body.cc-page-detail-compressor .cc-single-hero,
body.cc-page-detail-installer .cc-single-installer-hero {
  min-width: 0;
}

/* Below 1024px the sidebar becomes a fixed bottom drawer that only the
   listing-page filter-toggle button can open. Detail pages don't render
   that toggle — so hide the sidebar entirely below the desktop breakpoint
   to avoid stranding an unopenable drawer in the DOM. */
@media (max-width: 1023px) {
  body.cc-page-detail-compressor .cc-sidebar,
  body.cc-page-detail-installer .cc-sidebar,
  body.cc-page-detail-compressor .cc-drawer-backdrop,
  body.cc-page-detail-installer .cc-drawer-backdrop {
    display: none !important;
  }
  body.cc-page-detail-compressor .cc-layout,
  body.cc-page-detail-installer .cc-layout {
    grid-template-columns: 1fr;
  }
}

/* The "Showing N of M" counter is hidden via JS but also hide it via CSS
   as a defense-in-depth so detail pages never flash it before JS boots. */
body.cc-page-detail-compressor [data-cc-count],
body.cc-page-detail-installer [data-cc-count] {
  display: none !important;
}