*,
*::before,
*::after {
 box-sizing: border-box;
 padding: 0;
 margin: 0;


  

}



/* ==========================================
   SPEC-11: keep borders/layout, make smaller + responsive
   Scope: ONLY the table inside .spec11-wrap
========================================== */

.spec11-wrap {
  /* lets the table be "contained" and responsive */
  max-width: 100%;
  overflow-x: auto;                 /* key: prevents layout blowout on small screens */
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem;
  border-radius: 0.5rem;

}

/* Make the table shrink to fit its content instead of forcing full page width */
.spec11-wrap table {
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--clr--blue_dark);

  width: max-content;               /* table can be wider than container -> wrapper scrolls */
  max-width: 100%;
  margin: 0;                        /* no auto-centering surprises */
}

/* Keep your border look, but scale type + padding responsively */
.spec11-wrap th,
.spec11-wrap td {
  border: 1px solid var(--clr--blue_dark);
  font-size: clamp(0.62rem, 0.35rem + 0.9cqw, 0.78rem);
  padding: clamp(0.15rem, 0.10rem + 0.5cqw, 0.45rem);
  white-space: nowrap;              /* keep numeric columns clean */
}

/* Header styling stays the same vibe, just responsive padding */
.spec11-wrap th {
  background-color: var(--clr--gray_ivory);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  font-weight: 900;
}

/* ==========================================
   SPEC-11: shorten table height (row/cell height)
========================================== */

/* tighter text metrics = shorter rows */
.spec11-wrap table {
  line-height: 1.1;                 /* overrides your body line-height: 1.7 */
}

/* shorten ALL cells */
.spec11-wrap th,
.spec11-wrap td {
  line-height: 1.1;
  padding-block: clamp(0.08rem, 0.05rem + 0.25cqw, 0.22rem); /* top/bottom */
  padding-inline: clamp(0.18rem, 0.12rem + 0.35cqw, 0.45rem);/* left/right */
  vertical-align: middle;
}

/* make header rows even tighter (optional) */
.spec11-wrap thead th {
  padding-block: clamp(0.10rem, 0.06rem + 0.25cqw, 0.26rem);
}

/* prevent wrapped description from creating tall rows
   (keeps rows short; will truncate long descriptions) */
.spec11-wrap td[class^="description-name-"]{
  white-space: nowrap;     /* change to normal if you prefer wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48ch;         /* same idea you already had */
}


/* Column sizing: stop the "Description" from blowing up the table */
.spec11-wrap th.item-header,
.spec11-wrap td[class^="item-grid-"] {
  width: 4ch;
  text-align: center;
}

.spec11-wrap th.assembly-header { text-align: center; }
.spec11-wrap thead tr:nth-child(2) th { width: 3ch; } /* .1 .2 .3 .4 .5 */

/* Description column: allow wrap + clamp width */
.spec11-wrap th.description,
.spec11-wrap td[class^="description-name-"] {
  white-space: normal;              /* allow wrapping for long text */
  text-align: left;
  min-width: 22ch;
  max-width: 48ch;                  /* keeps the table from going crazy wide */
}

/* Part number column: keep tight */
.spec11-wrap th.part-number,
.spec11-wrap td[class^="part-number-"] {
  width: 14ch;
  text-align: center;
}

/* Optional: sticky header when scrolling inside wrapper (nice for 38 rows) */
@supports (position: sticky) {
  .spec11-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* Extra tightening for small screens */
@media (max-width: 650px) {
  .spec11-wrap {
    padding: 0.15rem;
  }

  .spec11-wrap th,
  .spec11-wrap td {
    padding: 0.2rem 0.35rem;
  }

  /* description gets a bit narrower on phones */
  .spec11-wrap th.description,
  .spec11-wrap td[class^="description-name-"] {
    min-width: 18ch;
    max-width: 34ch;
  }
}