/* Keep size names clear of the five-digit quantity inputs. */
body[data-product] .product .productSizePicker .sizeGrid,
body[data-product] .customizerPage .sizePanel .sizeGrid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)) !important;
}

body[data-product] .product .productSizePicker .sizeGrid label,
body[data-product] .customizerPage .sizePanel .sizeGrid label {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(4rem, 1fr) 7.5rem !important;
  column-gap: 0.75rem !important;
  align-items: center !important;
  min-width: 14rem !important;
}

body[data-product] .product .productSizePicker .sizeGrid label > b,
body[data-product] .customizerPage .sizePanel .sizeGrid label > b {
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.25;
}

body[data-product] .product .productSizePicker .sizeGrid input[type="number"],
body[data-product] .customizerPage .sizePanel .sizeGrid input[type="number"] {
  position: relative;
  z-index: 1;
  justify-self: end;
  margin: 0 !important;
}

@media (max-width: 480px) {
  body[data-product] .product .productSizePicker .sizeGrid,
  body[data-product] .customizerPage .sizePanel .sizeGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-product] .product .productSizePicker .sizeGrid label,
  body[data-product] .customizerPage .sizePanel .sizeGrid label {
    grid-template-columns: minmax(4rem, 1fr) minmax(7.5rem, 45%) !important;
    min-width: 0 !important;
  }
}